Download to read offline
More Related Content
Advanced styles
- 1.
- 2. Поговоримо про CSSфреймовки Препроцесори CSS Task-runners
- 3.
- 4. CSS: фреймворки TwitterBootstrap Zurb Foundation
- 6. Bootstrap ??? Продуктз відкритим кодом розроблений Марком Отто та Джейкобом Торнтоном, які на той момент працювали в Twitter Виник як відповідь на потребу стандартизувати фронт-ендні набори інструментів для інженерів всієї компанії
- 7. Bootstrap ??? Відмоменту виникнення в серпні 2011, він набував популярності Еволюцінував від набору CSS стилів до набору, який також включає JS плагінів та іконок
- 8. Bootstrap: з чогопочати Завантажити зручним способом з http://getbootstrap.com/getting-started/ Під’єднати так само просто як і звичайні стилі та скрипти * Можливість налаштування необхідних компонентів
- 9. CDN: Content DeliveryNetwork
- 10. Bootstrap: структура !JS плагіни вимагають підключення jQuery *Можливість скомпілювати з .less
- 11. Bootstrap: CSS Глобальніналаштування стилів Стилі для фундаментальних елементів з розширюваними класами Система сіток
- 12. Bootstrap: CSS Глобальніналаштування стилів Стилі для фундаментальних елементів з розширюваними класами Система сіток
- 13.
- 14. Bootstrap: шрифти тапосилання Bootstrap встановлює базовий глобальний вигляд, шрифти та посилання. Ці стилі можна знайти в scaffolding.less
- 15. Bootstrap: Normalize Normalize.cssє сучасною альтернативою до CSS resets Normalize.css – css файл, що забезпечує кращу крос-браузерну узгодженість для дефолтних стилів HTML елементів
- 16.
- 17. Bootstrap: система сіток Bootstrapвключає адаптивну систему сіток, що ділиться на 12 колонок відповідно до розміру пристрою.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. Bootstrap: класи длявирівнювання
- 27. Bootstrap: список водну лінію
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. Bootstrap: Glyphicons Включаєбільш ніж 250 іконок в форматі шрифтів (../fonts/) Не поєднувати з іншими компонентами. Краще додати вкладений span Використовуються для елементів, які не мають вмісту чи дітей.
- 37. Bootstrap: Glyphicons Включаєбільш ніж 250 іконок в форматі шрифтів (../fonts/) Не поєднувати з іншими компонентами. Краще додати вкладений span Використовуються для елементів, які не мають вмісту чи дітей.
- 38.
- 39. Препроцесори CSS Позбавляютьсяобмежень CSS Додають етап компіляції з мови препроцесора перед отриманням кінцевого CSS Цей крок можна здійснювати вручну або автоматично.
- 40. Препроцесори CSS: переваги Змінні Математичні операції Міксини Вкладені правила Логіка (оператори умови, цикли …)
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. Препроцесори CSS LESS SASS (SASS, SCSS, COMPASS) Stylus
- 50. Task Runners Grunt Gulp others
- 51. Task Runners: можливості Виконання веб-сервера Оновлення браузера при збереженні файла Використання препроцесорів Оптимізація CSS, JS та картинок
- 52. Gulp: вимоги NodeJS(завантажувати звідци https://nodejs.org/en/)
- 53. Gulp: встановлюємо • npminstall – команда встановлення для Node Package Manager • -g – флаг, що вказує npm встановити gulp глобально
- 54. Gulp: встановлюємо • --save-dev– флаг, що вказує npm встановити gulp в папку проекта • gulp-sass– плагін для компіляції scss
- 55. Gulp: перше завдання Створюємов корені файл gulpfile.js з таким вмістом
- 56.
- 57.
- 58.
- 59.
- 60.