Быстрое развёртывание шаблонов и статики в Mail.ru (Николай Кондратов)
Разработка адаптивных шаблонов на базе Omega
-
Upload
taras-omelianenko -
Category
Documents
-
view
902 -
download
0
Transcript of Разработка адаптивных шаблонов на базе Omega
![Page 1: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/1.jpg)
*
![Page 2: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/2.jpg)
*
* Председатель комиссии по коммуникациям
ППОС НТУ «ХПИ»
* PHP-разработчик
* Блоггер-гик
* Студент-пятикурсник НТУ «ХПИ» :)
![Page 3: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/3.jpg)
*
*Адаптивная верстка
*960.gs
*Тема omega
*Drush
*Пакеты omega_tools, devel
*HTML5
*CSS селекторы
![Page 4: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/4.jpg)
*
![Page 5: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/5.jpg)
*
1.Определитесь со структурой
контента
2.Начинайте с мобильных устройств
3.Оптимизируйте в зависимости от
контекста
![Page 6: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/6.jpg)
![Page 8: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/8.jpg)
*
![Page 9: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/9.jpg)
*
*Поддержка Code Driven Development
*CSS Path to object
*Колоночная верстка – 960.gs
*Способствует SEO дизайну
*Управление дополнительными стилями
![Page 10: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/10.jpg)
*СОБСТВЕННАЯ
ТЕМА$ drush omega-subtheme adaptic
You have successfully created the theme adaptic.
![Page 11: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/11.jpg)
![Page 12: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/12.jpg)
![Page 13: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/13.jpg)
*
![Page 14: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/14.jpg)
![Page 15: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/15.jpg)
![Page 16: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/16.jpg)
*
![Page 17: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/17.jpg)
*
*Настройки сетки (Grid settings)
*Конфигурация зон и регионов (Zone and
region configuration)
* Отладка (Debugging)
*Подключаемые библиотека (Toggle libraries)
*Подключаемые стили (Toggle styles)
*Подключаемые продвинутые элементы
(Toggle advanced elements)
![Page 18: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/18.jpg)
*
* Formalize
* Media queries
* Equal heights
![Page 19: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/19.jpg)
*
* Подключение опциональных стилей
* alpha-mobile.css
* omega-visuals.css
*.....
* global.css – ваш стиль
*Отключение стилей модулей и тем
*field.css
*...
![Page 20: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/20.jpg)
*
![Page 21: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/21.jpg)
![Page 22: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/22.jpg)
![Page 23: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/23.jpg)
*
Темизировать легко, просто научитесь
читать
![Page 24: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/24.jpg)
*Blocks
*section#blockname {…} – path to block via ID
*section.block {…} – all blocks
*section#blockname h2.title {…} –title of block
*aside. region-sidebar-first section#blockname {…} -
block in 1st sidebar
![Page 25: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/25.jpg)
![Page 26: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/26.jpg)
![Page 27: Разработка адаптивных шаблонов на базе Omega](https://reader034.fdocument.pub/reader034/viewer/2022052307/5594bf1b1a28ab99748b45b7/html5/thumbnails/27.jpg)
*
* +38 097 508 84 74
* www.taras.pro
* Twitter.com/miroling
* facebook.com/miroling
* vk.com/miroling