Top Banner
*
27

Разработка адаптивных шаблонов на базе Omega

Jul 02, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Разработка адаптивных шаблонов на базе Omega

*

Page 2: Разработка адаптивных шаблонов на базе Omega

*

* Председатель комиссии по коммуникациям

ППОС НТУ «ХПИ»

* PHP-разработчик

* Блоггер-гик

* Студент-пятикурсник НТУ «ХПИ» :)

Page 3: Разработка адаптивных шаблонов на базе Omega

*

*Адаптивная верстка

*960.gs

*Тема omega

*Drush

*Пакеты omega_tools, devel

*HTML5

*CSS селекторы

Page 4: Разработка адаптивных шаблонов на базе Omega

*

Page 5: Разработка адаптивных шаблонов на базе Omega

*

1.Определитесь со структурой

контента

2.Начинайте с мобильных устройств

3.Оптимизируйте в зависимости от

контекста

Page 6: Разработка адаптивных шаблонов на базе Omega
Page 7: Разработка адаптивных шаблонов на базе Omega

*

http://habrahabr.ru/post/80987/

Page 8: Разработка адаптивных шаблонов на базе Omega

*

Page 9: Разработка адаптивных шаблонов на базе Omega

*

*Поддержка Code Driven Development

*CSS Path to object

*Колоночная верстка – 960.gs

*Способствует SEO дизайну

*Управление дополнительными стилями

Page 10: Разработка адаптивных шаблонов на базе Omega

*СОБСТВЕННАЯ

ТЕМА$ drush omega-subtheme adaptic

You have successfully created the theme adaptic.

Page 11: Разработка адаптивных шаблонов на базе Omega
Page 12: Разработка адаптивных шаблонов на базе Omega
Page 13: Разработка адаптивных шаблонов на базе Omega

*

Page 14: Разработка адаптивных шаблонов на базе Omega
Page 15: Разработка адаптивных шаблонов на базе Omega
Page 16: Разработка адаптивных шаблонов на базе Omega

*

Page 17: Разработка адаптивных шаблонов на базе Omega

*

*Настройки сетки (Grid settings)

*Конфигурация зон и регионов (Zone and

region configuration)

* Отладка (Debugging)

*Подключаемые библиотека (Toggle libraries)

*Подключаемые стили (Toggle styles)

*Подключаемые продвинутые элементы

(Toggle advanced elements)

Page 18: Разработка адаптивных шаблонов на базе Omega

*

* Formalize

* Media queries

* Equal heights

Page 19: Разработка адаптивных шаблонов на базе Omega

*

* Подключение опциональных стилей

* alpha-mobile.css

* omega-visuals.css

*.....

* global.css – ваш стиль

*Отключение стилей модулей и тем

*field.css

*...

Page 20: Разработка адаптивных шаблонов на базе Omega

*

Page 21: Разработка адаптивных шаблонов на базе Omega
Page 22: Разработка адаптивных шаблонов на базе Omega
Page 23: Разработка адаптивных шаблонов на базе Omega

*

Темизировать легко, просто научитесь

читать

Page 24: Разработка адаптивных шаблонов на базе Omega

*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
Page 26: Разработка адаптивных шаблонов на базе Omega
Page 27: Разработка адаптивных шаблонов на базе Omega

*

* +38 097 508 84 74

* [email protected]

* www.taras.pro

* Twitter.com/miroling

* facebook.com/miroling

* vk.com/miroling