Разработка адаптивных шаблонов на базе Omega
•Download as PPTX, PDF•
0 likes•906 views
Разработка адаптивных шаблонов на базе Omega
- 1. *
- 2. * Председатель комиссии по коммуникациям ППОС НТУ «ХПИ» * PHP-разработчик * Блоггер-гик * Студент-пятикурсник НТУ «ХПИ» :) *
- 3. * Адаптивная верстка * 960.gs * Тема omega * Drush * Пакеты omega_tools, devel * HTML5 * CSS селекторы *
- 4. *
- 5. 1. Определитесь со структурой контента 2. Начинайте с мобильных устройств 3. Оптимизируйте в зависимости от контекста *
- 8. *
- 9. * Поддержка Code Driven Development * CSS Path to object * Колоночная верстка – 960.gs * Способствует SEO дизайну * Управление дополнительными стилями *
- 10. *СОБСТВЕННАЯ ТЕМА $ drush omega-subtheme adaptic You have successfully created the theme adaptic.
- 13. *
- 16. *
- 17. * Настройки сетки (Grid settings) * Конфигурация зон и регионов (Zone and region configuration) * Отладка (Debugging) * Подключаемые библиотека (Toggle libraries) * Подключаемые стили (Toggle styles) * Подключаемые продвинутые элементы (Toggle advanced elements) *
- 18. * Formalize * Media queries * Equal heights *
- 19. * Подключение опциональных стилей * alpha-mobile.css * omega-visuals.css * ..... * global.css – ваш стиль * Отключение стилей модулей и тем * field.css * ... *
- 20. *
- 23. * Темизировать легко, просто научитесь читать
- 24. *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
- 27. * +38 097 508 84 74 * mail@taras.pro * www.taras.pro * Twitter.com/miroling * facebook.com/miroling * vk.com/miroling *
Editor's Notes
- #18: Grid settingsZone and region configurationDebuggingToggle librariesToggle stylesToggle advanced elements
- #20: Enable optional stylesheets Reset (all) - alpha-reset.cssCreated by Eric Meyer. Mobile (all) - alpha-mobile.cssDefaultstylesheet for mobile styles. Alpha (all) - alpha-alpha.cssDefault styles & resets for Alpha/Omega base theme. Text Styles (all) - omega-text.cssDefault text styles for Omega. Branding Styles (all) - omega-branding.cssProvides positioning for the logo, title and slogan. Menu Styles (all) - omega-menu.cssProvidespositoning and basic CSS for primary and secondary menus. Form Styles (all) - omega-forms.cssProvides basic form styles. Omega Styles (all) - omega-visuals.cssCustom visual styles for Omega. (pagers, menus, etc.) Your custom global styles (all) - global.cssThis file holds all the globally active custom CSS of your theme.You can choose from this list to enable optional stylesheets.Disable module and theme stylesheets comment.css (all) - Belongs to Comment field.css (all) - Belongs to Field node.css (all) - Belongs to Node search.css (all) - Belongs to Search user.css (all) - Belongs to User views.css (all) - Belongs to Views vertical-tabs.css - Defined by AlphaThis requires a description. aggregator.css - Defined by AlphaThis requires a description. block.css - Defined by AlphaThis requires a description. dblog.css - Defined by AlphaThis requires a description. file.css - Defined by AlphaThis requires a description. filter.css - Defined by AlphaThis requires a description. help.css - Defined by AlphaThis requires a description. menu.css - Defined by AlphaThis requires a description. openid.css - Defined by AlphaThis requires a description. profile.css - Defined by AlphaThis requires a description. statistics.css - Defined by AlphaThis requires a description. syslog.css - Defined by AlphaThis requires a description. admin.css - Defined by AlphaThis requires a description. maintenance.css - Defined by AlphaThis requires a description. system.css - Defined by AlphaThis requires a description. system.admin.css - Defined by AlphaThis requires a description. system.base.css - Defined by AlphaThis requires a description. system.maintenance.css - Defined by AlphaThis requires a description. system.menus.css - Defined by AlphaThis requires a description. system.messages.css - Defined by AlphaThis requires a description. system.theme.css - Defined by AlphaThis requires a description. taxonomy.css - Defined by AlphaThis requires a description. tracker.css - Defined by AlphaThis requires a description. update.css - Defined by Alpha
- #23: SEO