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

Грубо говоря это набор файлов, 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/ |
Разработчик | 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 элементов, присутствует русская документация, а также большое количество надстроек, компонентов и плагинов. Я бы провел аналогию с | Как не странно, но третью версию фреймворка до сих пор используют, видимо | Неплохой фреймворк, если для проекта не нужна «резина» или сложная адаптивная верстка, то это то что нужно. В связи с узкой специализацией и отсутствием UI, избыточность кода куда меньше чем у монструозных собратьев. К слову, на основе данной сетки возникли некоторые другие фреймворки. | Легкий фреймворк, собственно это является его основной фишкой. Но есть два минуса, 1 — присутствуют проблемы с адаптивностью сетки, 2 — проект давно не обновлялся. Но если нужен максимально простой каркас и не нужно огромное количество UI элементов, то решение вполне годное. |
Что такое сетка?
Как мы видим, все CSS фреймворки базируются на сетках, что же такое сетка? Давайте рассмотрим пример сетки 960.gs. (рис. 1)
(рис. 1 — Модульная CSS сетка 960.gs)

Не знаю куда еще проще объяснить, из картинки видно что мы имеем 12ти колончатую сетку, следовательно в строке у может находиться до 12ти блоков с
Количество колонок в сетки в принципе может быть любым, но излишнее дробление выльется косяками, поэтому чаще всего используют 12ти и 16ти колончатые сетки. Также у
Более сложный вид сеток это адаптивные сетки, в данной статье на них останавливаться не будем, лучше написать отдельную с более подробным описанием. Смысл адаптивных сеток заключается в том что они подстраиваются под разрешение окна браузера, поддержкой таких свойств могут похвастаться далеко не все фреймворки, половина из рассмотренных ранее такой функции не имеют.
Классы видимости.
С появлением адаптивной верстки появилось понятие классов видимости, что же это такое? Рассмотрим на недавнем примере. (рис. 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, а
Оставить комментарий