Друзья сайта

Лучший заработок

Дайте +1

Warp6 - CSS фреймворк YooTheme

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 SystemBlueprint или 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. Мы любим его!

Следите за обновлениями, в следующем мы рассмотрим систему администрирования шаблона!

 

?>