Друзья сайта
Лучший заработок
Дайте +1
Новейшие теги
Тематика расширений
Лучшие шаблоны
Warp6 - CSS фреймворк YooTheme |
В предыдущей статье мы рассмотрели шаблон и разметку в HTML5, теперь поговорим о CSS Фреймворке. В этом посте мы узнаем, как его использовать и как он работает. CSS фреймворк Что же такое CSS фреймворк? Это набор инструментов, набор классов CSS, которые используются для разметки HTML. Он обеспечивает кроссбраузерность и позволяет создавать надежные и перспективные сайты. Для Warp6 мы создали собственный набор инструментов. Он вобрал в себя весь наш пятилетний опыт разработки шаблонов. Конечно, мы следим за основными CSS Фреймворками, которые появились за последний год, и изучаем их для того что бы сделать наш код лучше. Основная наша задача была в сохранении модульности в CSS насколько это возможно. Иногда вам просто необходимо использовать определенные инструменты, но вы не хотите загружать есть код на сайт. Вот почему мы разделяем наш CSS на отдельные файлы, каждый файл имеет свое имя и задачу, например layout, menus и т.д. Эти файлы находятся в директории Warp6 в папке CSS. Сам же шаблон то же имеет свои собственные стили, и вы можете контролировать какие файлы вы хотите загружать, а какие нет. В итоге Warp имеет 12 CSS файлов, которые хорошо описаны с помощью комментариев. Каждый файл унифицирован, нет повторяющегося кода, и мы используем всю мощь CSS2.1. Встроенное сжатие CSS – это еще одна особенность Warp6, все таблицы стилей объединяются в один файл, минифицируются, сжимаются на лету с помощью GZip и в после этого кэшируются. Больше нет смысла беспокоиться о скорости загрузки. Мы обещаем, что Warp6 - это супер быстрый фреймворк! Теперь кратко рассмотрим особенности CSS Фреймворка. Скажи нет overflow:hidden!Мы больше не используем overflow:hidden. Потому что он имеет существенный недостаток, а именно обрезает элементы за границей контейнера. Но еще хуже то, что он обрезает CSS3 свойства, например, такие как тени (box-shadow). Отказавшись отoverflow:hidden мы сняли ограничения для новых CSS3 свойств, и теперь можем позиционировать блоки, так как хотим. СеткаДругой очень важной частью нашего CSS фреймворка является сетка. Мы не хотим углубляется в различные аспекты нашей системы. Уделим этому всего несколько минут для того что бы объяснить что бы мы сделали. Большинство знаменитый CSS сеток, таких как 960 Grid System, Blueprint или 1KB CSS Grid, имеют фиксированную ширину и основываются на пиксельной единице измерения. Конечно, можно было бы просто внедрить одну из этих сеток, но тогда мы потеряем гибкость и сделаем некоторые вещи слишком сложные для работы с ними. Поэтому мы решили мы решили создать свою собственную простую сетку для наших шаблонов. Но это не означает, что создание сайта на одной из выше упомянутых систем является плохой идеей. В Warp6 так же можно установить фиксированную ширину для сайта, но в основе сетки лежат проценты. Это дает ряд преимуществ: сетка позволяет использовать ее повторно, нет необходимости генерировать CSS повторно. Основная причина того что остальные сетки не используют проценты, это так называемая субпиксельная проблема, а именно, некоторые браузеры округляют не целые значения. Что бы подробнее изучить данную тему обратитесь к статье John Resig. Это приводит к тому, что некоторые сетки не могут заполнить собой всю область и оставляют с правой стороны 4px. Однако это проблема выявляется крайне редко и только в некоторых браузерах. Вы решили эту проблему с помощью вычисления ширины с помощью JavaScript. Мы считаем что это отличное решение, поскольку оно имеет малый размер и работает во всех браузерах. Файлы фреймворка.Вот краткое описание CSS файлов в фреймвокре. base.cssВсе верно! Мы не используем CSS Reset. Мы выбрали другой путь: чтобы избежать избыточного кода мы устанавливаем новые значения по умолчанию, вместо базовых, а затем сбрасываем их еще раз позже. Шаблон был сделан на основе дизайна admiral casino с внесением некоторых изменений. layout.cssСодержит плавающие стили для сетки и вспомогательные классы для создания разметки любой сложности. menus.cssСодержит стили для различных меню. На данный момент мы поддерживаем наше знаменитое выпадающее меню, раскрывающееся меню, линейное меню и меню в футоре. modules.cssСодержит оформления для различных стилей модулей, таких как defaults, headings, badges and icons. tools.cssНабор инструментов обеспечивающих набор полезных классов CSS для вашего контента. Например, это оформление для кнопки «читать далее», сисков, таблиц и форм, информационные боксы и многое другое. system.cssОпределяет базовые стили для WordPress, Joomla 1.5 и 2.5. rtl.cssОбеспечивает полную поддержку RTL. print.cssЭтот стиль используется только для печати. mobile.cssСтили для мобильных телефонов. ie.css, ie7.css, ie8.cssСтили специально для Internet Explorer. style.cssСтили определяющие цвета и фоны шаблона, которые могут меняться в зависимости от шаблона. custom.cssПользовательские таблицы стилей следует использовать для переопределения основных. Он пуст по умолчанию. ЗаключениеWarp6 обеспечивает гибкую структуру CSS, которая разделена на несколько файлов, каждый для своей цели. Warp6 и сам шаблон имеет свой собственный CSS и вы имеете полный контроль над ними, вы сами выбираете какую часть фреймворка вы хотите загрузить, а какие нет. Например, если вы хотите использовать 960 Grid System, мы можете сделать это. Наша сетка очень легкая и гибкая, мы не используемoverflow:hidden. Мы любим его! Следите за обновлениями, в следующем мы рассмотрим систему администрирования шаблона! |