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

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

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

CSS-framework

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

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

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

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

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

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

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

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

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

Название Bootstrap Foundation v5 960gs Skeleton
Краткое описание Комьюнити: многочисленное.
Сетки: резиновые, адаптивные, фиксированные.
Элементы UI: большая библиотека, отлично подойдет для быстрой разработки.
Истоки: разработан как внутренний список правил для штатных разработчиков.
Комьюнити: среднее.
Сетки: резиновые, адаптивные.
Элементы UI: библиотека скромнее чем у bootstrap, но все равно прекрасно подойдет для быстрой разработки.
Итоки: разработан ZURB для использования в коммерческих проектах.
Комьюнити: среднее.
Сетки: фиксированные.
Элементы UI: нет.
Итоки: разработан Nathan Smith для увеличения скорости верстки.
Комьюнити: малое.
Сетки: фиксированные.
Элементы UI: набор крайне ограничен.
Истоки: создавался целенаправленно как минималистичный фреймворк.
Версия 2.3.2 5 last 1.2
Сайт http://getbootstrap.com/2.3.2/ http://foundation.zurb.com/ http://960.gs/ http://www.getskeleton.com/
Разработчик Twitter ZURB Nathan Smith Dave Gamache
Браузеры IE8+, Chrome, Firefox, Opera, Safari IE9+, Chrome, Firefox, Opera, Safari IE7+, Chrome, Firefox, Opera, Safari IE7+, Chrome, Firefox, Opera, Safari
Устройства PC/Tablet/Phone PC/Tablet/Phone PC/Tablet/Phone PC/Tablet/Phone
Лицензия Apache License v2.0 MIT GPL & MIT MIT
Препроцессор LESS/SASS SASS - -
Комментарий Один из самых популярных CSS фреймворков со всеми вытекающими. Прекрасное решение для прототипирования и создания адаптивного сайта. Собержит массу UI элементов, присутствует русская документация, а также большое количество надстроек, компонентов и плагинов. Я бы провел аналогию с 1С-Битрикс, это универсальный комбайн с кучей дополнений который при умелом использовании подойдет практически для всего. Как не странно, но третью версию фреймворка до сих пор используют, видимо из-за того что она, в отличии от последующих версий, поддерживает IE7+. Темнеменее она явно устарела, да и процентная доля пользователей IE7 стремится к нулю, поэтому стоит обратить внимание на новые версии. В новых версиях к примеру изменена привязка стилей, теперь они привязываются не к типу устройств, а к «фишкам», например показывать на таче. Из плюшек относительно bootstrap можно выделить более семантичные классы используемые в CSS, а также количество адаптивных классов, в foundation их в 3 раза больше, а это значит что он более гибок в настройке адаптивности макетов. Неплохой фреймворк, если для проекта не ннужна «резина» или сложная адаптивная верстка, то это то что нужно. В связи с узкой специализацией и отсутствием UI, избыточность кода куда меньше чем у монструозных собратьев. К слову, на основе данной сетки возникли некоторые другие фреймворки. Легкий фреймворк, собственно это является его основной фишкой. Но есть два минуса, 1 — присутствуют проблемы с адаптивностью сетки, 2 — проект давно не обновлялся. Но если нужен максимально простой каркас и не нужно огромное количество UI элементов, то решение вполне годное.

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

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

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

(рис. 1 — Модульная CSS сетка 960.gs)

Модульная CSS сетка

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

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

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

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

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

(рис. 2 — Пример работы классов видимости)

Пример работы классов видимости

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

Классов и свойств скрытия/отображения элементов сейчас масса у 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 таблице, а не налепленные инлайн. Понятно что создание адаптивных кроссплатформенных решений трудозатратнее и сложнее чем к примеру «запилить фиксу», но будем отдавать дань тенденциям времени в котором мы живем и конечно же пользователям, ведь в конечном итоге мы боремся за их удобство, которое конвертируется в денежку =).


Оставить комментарий