advanced styles

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.