eleks.com eleks.com
CSS: фреймворки, препроцесори
Поговоримо про CSS фреймовки Препроцесори CSS Task-runners
eleks.com eleks.com
CSS: фреймворки
CSS: фреймворки Twitter Bootstrap Zurb Foundation
Bootstrap ??? Продукт з відкритим кодом розроблений
Марком Отто та Джейкобом Торнтоном, які на той момент працювали в Twitter
Виник як відповідь на потребу стандартизувати фронт-ендні набори інструментів для інженерів всієї компанії
Bootstrap ??? Від моменту виникнення в серпні 2011, він
набував популярності Еволюцінував від набору CSS стилів до набору,
який також включає JS плагінів та іконок
Bootstrap: з чого почати Завантажити зручним способом з
http://getbootstrap.com/getting-started/ Під’єднати так само просто як і звичайні стилі
та скрипти
* Можливість налаштування необхідних компонентів
CDN: Content Delivery Network
Bootstrap: структура ! JS плагіни
вимагають підключення jQuery
*Можливість скомпілювати з .less
Bootstrap: CSS Глобальні налаштування стилів Стилі для фундаментальних елементів з
розширюваними класами Система сіток
Bootstrap: CSS Глобальні налаштування стилів Стилі для фундаментальних елементів з
розширюваними класами Система сіток
Bootstrap: базовий шаблон
Bootstrap: шрифти та посиланняBootstrap встановлює базовий глобальний вигляд, шрифти та посилання. Ці стилі можна знайти в scaffolding.less
Bootstrap: Normalize Normalize.css є сучасною
альтернативою до CSS resets Normalize.css – css файл, що
забезпечує кращу крос-браузерну узгодженість для дефолтних стилів HTML елементів
Bootstrap: Container
Адаптивний контейнер з фіксованою шириною
Адаптивний контейнер, що займає всю ширину
Bootstrap: система сітокBootstrap включає адаптивну систему сіток, що ділиться на 12 колонок відповідно до розміру пристрою.
Bootstrap: опції сітки
Bootstrap: приклад сітки
Bootstrap: обгортання сітки
Bootstrap: зміщення колонок
Bootstrap: вкладені колонки
Bootstrap: порядок колонок
Media query
Bootstrap: h1…h6
Bootstrap: класи для вирівнювання
Bootstrap: список в одну лінію
Bootstrap: таблиця
Bootstrap: розмежована таблиця
Bootstrap: форми
Bootstrap: форми
Bootstrap: стани валідації
Bootstrap: кнопки
Bootstrap: картинки
Bootstrap: адаптивні класи
Bootstrap: Glyphicons Включає більш ніж 250 іконок в
форматі шрифтів (../fonts/) Не поєднувати з іншими
компонентами. Краще додати вкладений span
Використовуються для елементів, які не мають вмісту чи дітей.
Bootstrap: Glyphicons Включає більш ніж 250 іконок в
форматі шрифтів (../fonts/) Не поєднувати з іншими
компонентами. Краще додати вкладений span
Використовуються для елементів, які не мають вмісту чи дітей.
Bootstrap: Glyphicons приклад
Препроцесори CSS Позбавляються обмежень CSS Додають етап компіляції з мови
препроцесора перед отриманням кінцевого CSS
Цей крок можна здійснювати вручну або автоматично.
Препроцесори CSS: переваги Змінні Математичні операції Міксини Вкладені правила Логіка (оператори умови, цикли …)
Проблеми з CSS
Рішення
Проблеми з CSS
Рішення
Проблеми з CSS
Рішення
Проблеми з CSS
Рішення
Препроцесори CSS LESS SASS (SASS, SCSS, COMPASS) Stylus
Task Runners Grunt Gulp others
Task Runners: можливості Виконання веб-сервера Оновлення браузера при збереженні
файла Використання препроцесорів Оптимізація CSS, JS та картинок
Gulp: вимоги NodeJS (завантажувати звідци
https://nodejs.org/en/)
Gulp: встановлюємо
• npm install – команда встановлення для Node Package Manager
• -g – флаг, що вказує npm встановити gulp глобально
Gulp: встановлюємо
• --save-dev – флаг, що вказує npm встановити gulp в папку проекта
• gulp-sass– плагін для компіляції scss
Gulp: перше завданняСтворюємо в корені файл gulpfile.js з таким вмістом
Gulp: виконуємо
Gulp: компілюємо SCSS
Gulp: приклад SCSS
eleks.com
Питання
eleks.com
Inspired by Technology.Driven by Value.