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

Post on 02-Jul-2015

899 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

Transcript

*

*

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

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

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

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

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

*

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

*960.gs

*Тема omega

*Drush

*Пакеты omega_tools, devel

*HTML5

*CSS селекторы

*

*

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

контента

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

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

контекста

*

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

*

*

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

*CSS Path to object

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

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

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

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

ТЕМА$ drush omega-subtheme adaptic

You have successfully created the theme adaptic.

*

*

*

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

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

region configuration)

* Отладка (Debugging)

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

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

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

(Toggle advanced elements)

*

* Formalize

* Media queries

* Equal heights

*

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

* alpha-mobile.css

* omega-visuals.css

*.....

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

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

*field.css

*...

*

*

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

читать

*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

*

* +38 097 508 84 74

* mail@taras.pro

* www.taras.pro

* Twitter.com/miroling

* facebook.com/miroling

* vk.com/miroling

top related