Адаптивные CSS-фреймворки, сетки, классы видимости

С развитием мобильной электроники и мобильного интернета, возникла необходимость адаптировать сайты под экраны всевозможных устройств. В связи с этим появились адаптивные CSS-фреймворки, о которых мы сегодня немного поговорим.

Что такое CSS-фреймворк?

Грубо говоря это набор файлов, HTML страницы, CSS таблицы и JS скрипты.

HTML страницы содержат шаблоны разметки, CSS таблицы — стилевые правила, а JS скрипты — всевозможные правила, переопределения и прочие необходимые конструкции для нормального функционирования фреймворка во всех заявленных браузерах.

Для чего они собственно понадобились? Ведь CSS и JS вполне можно написать самому?! Как и все остальные фреймворки, они были созданы для ускорения разработки и стандартизации кода. Тот же bootstrap создавался как корпоративный набор инструментов, чтобы при программировании интерфейсов, разработчики использовали уже готовые блоки кода, тем самым увеличивали бы производительность и приводили код к единому формату.

О преимуществах:

• Человек с низким уровнем знания верстки может создавать более-менее удобоваримые решения.
• Адаптивность верстки.
• Увеличение скорости разработки.
• Кроссбраузерность.
• Шаблонность кода, что позволяет увеличить скорость разработки и минимизировать накладки при командной работе.

О недостатках:

• Как правило избыточность кода, зачастую при разработке используется только часть фреймворка, остальное лежит мертвым грузом.
• Необходимо учить синтаксис фреймворка, но после это переходит в разряд пюсов.
• Внешняя схожесть сайтов на одном фреймворке.

Сравнительная таблица популярных CSS-фреймворков

В чем же отличия? Чтобы разобраться в этом вопроса давайте посмотрим на сравнительную таблицу популярных фреймворков.

Ещё 30 CSS-фреймворков…

Комментарии

Bootstrap

Один из самых популярных CSS фреймворков со всеми вытекающими. Прекрасное решение для прототипирования и создания адаптивного сайта. Содержит массу UI элементов, присутствует русская документация, а также большое количество надстроек, компонентов и плагинов. Я бы провел аналогию с 1С-Битрикс, это универсальный комбайн с кучей дополнений который при умелом использовании подойдет практически для всего.

Foundation v5

Как не странно, но третью версию фреймворка до сих пор используют, видимо из-за того что она, в отличии от последующих версий, поддерживает IE7+. Тем не менее она явно устарела, да и процентная доля пользователей IE7 стремится к нулю, поэтому стоит обратить внимание на новые версии. В новых версиях к примеру, изменена привязка стилей, теперь они привязываются не к типу устройств, а к «фишкам», например показывать на таче. Из плюшек относительно bootstrap можно выделить более семантичные классы используемые в CSS, а также количество адаптивных классов, в foundation их в 3 раза больше, а это значит что он более гибок в настройке адаптивности макетов.

960gs

Неплохой фреймворк, если для проекта не нужна «резина» или сложная адаптивная верстка. В связи с узкой специализацией и отсутствием UI, избыточность кода куда меньше чем у монструозных собратьев. К слову, на основе данной сетки возникли некоторые другие фреймворки.

Skeleton

Легкий фреймворк, собственно это является его основной фишкой. Но есть два минуса, 1 — присутствуют проблемы с адаптивностью сетки, 2 — проект давно не обновлялся. Но если нужен максимально простой каркас и не нужно огромное количество UI элементов, то решение вполне годное.

Что такое сетка?

Как мы видим, все CSS фреймворки базируются на сетках, что же такое сетка? Давайте рассмотрим пример сетки 960.gs.

Не знаю как еще проще объяснить, из картинки видно что мы имеем 12ти колончатую сетку, следовательно в строке может находиться до 12ти блоков с каким-либо контентом. Также пространство из 12ти колонок можно пропорционально делить между блоками. Например получить четыре блока которые включат в себя ширину трех колонок и т. д. Наверняка все когда-либо прикидывали расположение блоков сайта на обычном листе бумаги, проще это делать на клетчатом листочке, потому что мы подсознательно начинаем подстраивать блоки под сетку, здесь принцип тот же.

Количество колонок в сетке может быть любым, но излишнее дробление выльется косяками, поэтому чаще всего используют 12ти и 16ти колончатые сетки. Также у более-менее крупных фреймворков имеются собственные генераторы сеток, например генератор 960.gs — http://grids.heroku.com/. При помощи нехитрых инструментов мы можем создать свою сетку, с произвольной шириной, количеством колонок и расстоянием между ними.

Более сложный вид сеток это адаптивные сетки, в данной статье на них останавливаться не будем, лучше написать отдельную с более подробным описанием. Смысл адаптивных сеток заключается в том что они подстраиваются под разрешение окна браузера, поддержкой таких свойств могут похвастаться далеко не все фреймворки, половина из рассмотренных ранее такой функции не имеют.

Классы видимости.

С появлением адаптивной верстки появилось понятие классов видимости, что же это такое? Рассмотрим на недавнем примере.

На картинке изображены скриншоты с монитора компьютера и мобильного устройства, как можно заметить макеты «слегка» отличаются. Помимо адаптива макета, на мобильном девайсе мы можем заметить отсутствие слайдера, который бы отнял львиную долю видимой области, а также нагрузил бы девайс анимацией перелистывания.

Классов и свойств скрытия/отображения элементов сейчас масса у bootstrap к примеру их 6 штук. Думаю в переводе они не нуждаются, поэтому просто перечислю.

• .visible-phone
• .visible-tablet
• .visible-desktop
• .hidden-phone
• .hidden-tablet
• .hidden-desktop

Но на самом деле этого становится мало, ведь мобильные устройства тоже бывают разными, поэтому фреймворк Foundation пошел дальше и в его запасе целых 18 классов видимости!

Основанные на размере экрана:

• .show-for-xlarge
• .show-for-large
• .show-for-large-up
• .show-for-medium
• .show-for-medium-down
• .show-for-small
• .hide-for-xlarge
• .hide-for-large
• .hide-for-large-up
• .hide-for-medium
• .hide-for-medium-down
• .hide-for-small

Основанные на ориентации:

• .show-for-landscape
• .show-for-portrait

Основанные на сенсорных возможностях:

• .show-for-touch
• .hide-for-touch

Основанные на возможности печати:

• .print-only
• .hide-on-print

Используя эти классы можно очень гибко настраивать поведение сайта на всевозможных девайсах!

ИТОГО заключение

Я думаю, что в скором времени CSS фреймворки прочно закрепятся, и вопросы на тему «использовать или нет» отвалятся также, как это произошло с JS, jQuery ведь тоже не в одночасье приняли, а сейчас многие уже и позабыли что такое нативный JS, а кто-то и не узнает вовсе. Адаптивность сайтов перестанет быть шиком и выпендрежом, а станет обыденностью, как, например, стили в CSS таблице, а не налепленные инлайн. Понятно, что создание адаптивных кроссплатформенных решений трудозатратнее и сложнее, чем, к примеру, «запилить фиксу», но будем отдавать дань тенденциям времени, в котором мы живем, и, конечно же, пользователям, ведь в конечном итоге мы боремся за их удобство, которое конвертируется в денежку =).