CSS-фреймворки для адаптивного веб-дизайна
В данной статье рассмотрим популярные CSS-фреймворки для адаптивного веб-дизайна, среди которых: Twitter Bootstrap, Responsive Grid System, 1140 CSS Grid, Skeleton, The Semantic Grid, Frameless Grid, Gumby Framework, Gridless, The Goldilocks Approach, Proportional Grids, Foundation 3, Amazium, Golden Grid System, Initializr, Simple Grid, Stack Layout, 320 and Up, Fliud Baseline Grid, Columnal, Ingrid Framwork, Yet Another Mobile Boilerplate, Less Framework 4. Рассмотрим теперь каждый из них более детально.
CSS-фреймворк - фреймворк, который, прежде всего, упрощает работу верстальщика, ускоряет процесс разработки и исключает возможные ошибки. Об выборе препроцессора CSS детальнее тут.
Очень популярный и довольно распространенный в использовании Twitter Bootstrap. Для пользователей важную роль имеют особенности фреймворка: использование языка Less; поддержка дванадцати колоночной адаптивной разметки, поддержка моб.устройств и примеры классов .span3, .span8; наличие большого количества разнообразных компонентов, кнопок, выпадающих меню, заголовков, списков и другого полезного; плагины Javascript; обширная документация; сообщество, которое постоянно создает новые плагины.
Второй в нашем списке Responsive Grid System. Его називают не просто фреймворком, а быстрым способом создать адаптивный интернет-ресурс. Для загрузки доступны сетки для 12, 16 и 24 колонок, которые подходят для большинства современных устройств, и мобильных в том числе. Преимущества данного фреймворка: легкое подключение к ресурсу, который уже существует; колонки можно масштабировать к любой ширине; .last и .end не нужны для использования; используются брейкпоинты; не нужно иметь глубокие знания по математике; сначала следует размещение контента, а уже потом подбор разметки.
1140 CSS Grid - доступны 12 колонок; есть возможность подключения картинок для Retina-дисплеев; поддерживает большое количество браузеров, также имеет частичную поддержку IE6; широкая поддержка устройств. Если ваши сайты с шириной страницы 1140, то данный фреймворк вам пригодится.
Skeleton - фреймворк использует достаточно большое количество медиа запросов, поддерживает большинство известных браузеров, имеет расширения для Wordpress, Drupal, а также гем для Rails. Skeleton предоставляет типографику, кнопки и формы и дванадцати колоночную разметку. Фреймворк считается довольно легким ПО.
Адаптивный The Semantic Grid позволяет устанавливать ширину колонок и отступов, которые находятся между ними. Не нужно в разметке использовать классы .grid_x. Среди тегов используются article, header, aside. Поддержка языков LESS, SCSS, Stylus.
Frameless Grid - среди доступных шаблонов имеет LESS, SCSS, база HTML, шаблон для Photoshop. Данный фреймворк - отличное решения для разработчиков, которые не любят резиновые разметки, но предпочитает адаптивный дизайн. Делает адаптацию не по пикселям, а по колонкам.
Gumby Framework также имеет много полезных возможностей. Много чем напоминает всем известный Bootstrap. Среди особенностей стоит выделить: 960-пиксельная разметка, 12 или 16 колонок; примеры классов: .seven columns, .five columns; элементы: формы, кнопки, выпадающие меню и табы; Javascript toggles и drawers; Photoshop-шаблоны.
Gridless подходит для создания онлайн-ресурсов с отличной типографикой. Что предлагает фреймворк? В первую очередь, это DBY-подход. Имеет адаптивную разметку Mobile-first. Поддерживает IE 6/7/8 благодаря Respond.js. По своей сути, очень простой фреймворк, который можно редактировать, настраивать и переписывать под свои нужды.
The Goldilocks Approach делает дизайн не зависимым от разрешения, благодаря использованию m-ов, max-width, медиа-запросов и специальных шаблонов. Встроенные CSS-файлы определяют медиа-запросы: мультиколоночный, с узкими колонками, и одноколоночные. Фреймворк имеет хорошую типографику.
Proportional Grids создан на основе SASS. Имеет поддержку IE8. Фреймворк позовляет использовать фиксированные отступы между колонками (em/rem) и резиновые колонки.
Foundation 3 - адаптивный фреймворк для фронт-энда. Его преимущества: гибкая верстка и быстрое прототипирование, наличие разнообразных стилей и элементов. Также включены формы/кнопки/табы и многое другое. Благодаря данному фреймворку нет необходимости настраивать отображение на каждом размере экрана отдельно.
Фреймворк Amazium предлагает разработчикам: адаптивные картинки и видео, 1200рх верстку, установленную типографику, нумерованные и ненумерованные списки, кастомные формы и таблицы, возможность использовать медиа-запросы.
Golden Grid System разделяет экран на 18 колонок, крайние из которых - грани, остальные для дизайна. Таким образом GGS покрывает разрешения от 240px до 2560px. Поддерживается HTML-разметка, CSS, LESS, SCSS, JS.
Initializr используется, чтобы генерировать шаблоны на HTML5 Boilerplate, Bootstrap, или на адаптивном шаблоне. Фреймворком данный инструмент назвать сложно. Имеет мультиязычную документацию.
Simple Grid. Поддержка экранов до 720, больше 720, больше 985, и больше 1235px. Можно не использовать классы .first и .last. В принципе, все просто и понятно.
Stack Layout предоставляет возможность гибкой верстки. Среди основных возможностей: 12 наименований классов, легкая настройка отступов между колонками.
320 and Up простой и понятный адаптивный шаблон для веб-дизайна. Фреймворк имеет 5 CSS3 значений медиа-запросов: 480, 600, 768, 992 и 1382px; Modernizr, Selectivizr, адаптивный тестер типов и тестер дизайнов; поддерживается LESS и SASS.
Fliud Baseline Grid имеет встроенную поддержку IE6 и выше, встроенную типографику, количество колонок настраивается.
Columnal - фреймворк каскадных таблиц стилей. Имеет встроенный CSS-дебаггер, который показывает структуру каждого из элементов верстки.
Ingrid Framwork уменьшает необходимость использовать классы или индивидуальные типы. Данную систему легко настраивать под собственные нужды и цели.
Yet Another Mobile Boilerplate имеет адаптивную разметку и выпадающее меню с неограниченными подуровнями и подписями. Сайты на данном фреймворке оптимизируются для экранов шириной от 320 до бесконечности.
Less Framework 4 имеет четыри типа верстки и 3 набора типографики. Среди разновидностей верстки выделяют: стандартную, для планшетов, для мобильных и более широкая для мобильных устройств. Имеется генератор CSS.
Кроме выше описанных, часто пользуются популярностью и следующие фреймворки: ResponsiveAeon, Titan Framework, Gridiculous, Kube, inuit.css, HTML, KickStart, Simpliste, 960 Grid System. Но о данных технологиях в следующих статьях.
Как избежать блокировки СSS и JavaScript? Читайте в следующем материале на нашем блоге.
Компания HyperHost желает Вам приятной и качественной работы в мире CSS!
