klondike

Корпоративный блог студии "Клондайк"

Клондайк интернет маркетинга - WEB, SEO, SMM


Previous Entry Share Next Entry
Игошев Дмитрий
klondike

Responsive CSS framework, grids, visible elements/Адаптивные 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)

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

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

  • 1

О сайте

(Anonymous)
Почему же ваш собственный сайт не "responsive"?
А сравнительная таблица фреймворков даже не сжимается, а просто обрезается как придётся...
Зато уж с капчой постарались. Сами-то пробовали понять?

Здесь же платформа ЖЖ, когда они сделают адаптив - будет всё сжиматься.
Свой сайт потихоньку переводим на адаптив, пока клиентской работы и так хватает :)

  • 1
?

Log in

No account? Create an account