Empty Stack Developer
0,0
рейтинг
31 октября 2012 в 00:46

Разработка → 30 CSS-фреймворков для адаптивного веб-дизайна

Заметил, в последнее время на любое упоминание Twitter Bootstrap, минимум один человек отмечает, что «слишком много его стало». Большинство все устраивает, но некоторым он уже приелся и они хотят чего-то нового. Поэтому решил написать статью со сборником css-фреймворков, думаю каждый сможет найти что-нибудь для себя. Заодно сделаем интернет разнообразнее.


Twitter Bootstrap




Извиняюсь перед теми, кто его ненавидит, но все-таки в этом списке нельзя его не упомянуть.
Очень распространенный и широко используемый фреймворк, про который написано уже множество статей, поэтому просто кратко перечислю его особенности:
  • Язык — LESS
  • 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, примеры классов: .span3, .span8
  • Множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее.
  • Различные Javascript-плагины
  • Полная документация
  • Поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML
  • Большое сообщество, которое пишет новые плагины, полностью вписывающиеся в дизайн

На основании этого можно сказать, что Bootstrap — это все-в-одном, который удовлетворит любые потребности разработчика, благодаря чему он и является таким популярным.

Responsive Grid System




Разработчик утверждает, что это не фреймворк, и не набор заготовок, и говорит, что это быстрый и простой способ создать адаптивный веб-сайт.
На официальном сайте выделены следующие достоинства:
  • Можно указать любое количество колонок, от 2 до 12. Пример классов колонок: .1of4, .2of7, и так далее
  • Легко подключить к существующему сайту
  • «Резиновые» колонки, масштабируются к любой ширине
  • Не требуется использовать классы .last и .end
  • Сначала размещается контент, затем подбирается разметка
  • Использование брейкпоинтов (по умолчанию на 480 пикселях)
  • Можно указать, чтобы при низком разрешении колонки не складывались в стопку 1 колонка на строку, а например, 12 колонок разделить на три строки по 4 колонки
  • Не требуется глубоких знаний математики (необходимо уметь считать до 12)

Разметка и ничего лишнего.

1140 CSS Grid




Разметка 1140px, рассчитана под 1280px-мониторы. На мониторах с меньшим разрешением она становится резиновой и адаптируется под ширину окна браузера. После определенной точки она использует медиа-запросы для передачи мобильной версии, которая складывает колонки в стопку, так что информация сохраняет свой смысл.
  • 12-ти колоночная разметка, примеры классов колонок: .threecol, .fourcol, и так далее
  • Мобильные версии, подходят для любых устройств, поддерживающих CSS или медиа-запросы, с их помощью также можно включить x2 картинки для Retina-дисплеев
  • Доступен шаблон для Photoshop
  • Разметка протестирована на новых и старых компьютерах, ноутбуках, нетбуках, планшетах, смартфонах, и даже старых Nokia
  • Поддержка Chrome, Safari, Firefox, IE 7, IE 8, частичная поддержка IE 6
  • До 40px отступы между колонками
  • Картинки сжимаются до ширины колонки, в которой находятся, не рекомендуется указание ширины и высоты картинки

Если вы разрабатываете сайты с шириной страницы 1140 пикселей, вероятно, это то, что вам нужно.

Skeleton




Также уже не раз здесь упоминался, поэтому сразу описание:
  • 12-ти колоночная разметка, 960px максимум, примеры классов колонок: .three columns alpha, .two columns omega
  • Во фреймворк включена типографика, кнопки и формы
  • Использует много медиа-запросов
  • Поддержка Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров
  • Имеются расширения для Wordpress, Drupal, а также гем для Rails


The Semantic Grid




Не нашел ни одного упоминания на хабре, хотя может быть у меня поломался поиск…
  • Возможность устанавливать ширину колонок и отступов между ними, выбирать количество колонок, переключаться между пикселями и процентами
  • Не требуется использовать никаких .grid_x классов в разметке
  • Адаптивный
  • Языки LESS, SCSS, Stylus
  • Использует теги article, header, aside
  • Имеется фиксированная и «резиновая» разметки, возможность заполнять окно на всю ширину, многоуровневые колонки


Frameless Grid




Ищете адаптивный дизайн, но ненавидите резиновые разметки? Думаю, это вам подойдет. Суть такова: создаете много повторяющихся колонок с фиксированной шириной, центруете их по окну, и все! Адаптируется не по пикселям, а по колонкам. Те колонки, которые выходят за пределы вида, скрываются, и разметка перестраивается. Официальный сайт этого фреймворка адаптируется под разрешения 320, 480, 600, 900 и 1900 пикселей.
Имеются шаблоны на LESS, SCSS, база HTML, шаблон для Photoshop.
Достаточно интересная идея, рекомендую хотя бы зайти и посмотреть как оно выглядит.

Gumby Framework




«Фреймворк, с которым вы уже знакомы». По наполнению напоминает Bootstrap.
  • 960-пиксельная «гибридная» разметка, 12 или 16 колонок, примеры классов: .seven columns, .five columns
  • Встроенные элементы: формы, кнопки, выпадающие меню и табы
  • Javascript toggles и drawers
  • Доступны Photoshop-шаблоны


Gridless




HTML5 и CSS3 шаблон для создания адаптивных, кроссбраузерных веб-сайтов с отличной типографикой.
  • DBY-подход — фреймворк убирает все скучные детали разработки веб-сайтов и веб-приложений
  • Поставляется со всем, что вам уже надоело выполнять в начале каждого нового проекта. Включает CSS, типографику, хорошо организованную структуру папок, фиксы для IE и другие полезные штуки
  • Mobile-first адаптивная разметка, подстраивающаяся под ширину устройства
  • Поддержка IE 6/7/8 благодаря Respond.js
  • Очень простой и прямолинейный, нет никаких предустановленных систем разметки или не-семантических классов. Является отправной точкой, его необходимо редактировать, настраивать и переписывать для удовлетворения своих требований


Адаптивные разметки для Compass (SUSY)




Полная поддержка Ruby on Rails, требует установки гема «compass». Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.

The Goldilocks Approach




«Хорошее начало для дизайна, в котором разрешение устройства убирается из уравнения».
  • Фреймворк использует комбинацию Em-ов, max-width, медиа-запросов и шаблонов, чтобы сделать дизайн независимым от разрешения
  • Содержит два хорошо комментированных CSS-файла, которые определяют три разновидности медиа-запросов: мультиколоночная, с узкими колонками, и одноколоночные
  • Включает также хорошую типографику «из коробки»
  • Является попыткой создания адаптивной верстки, которая будет полностью независима от устройства

На официальном сайте есть примеры всех трех типов отображения дизайна при помощи медиа-запросов.

Proportional Grids




Разработчик этого фрейморка использовал css-свойство box-sizing, чтобы создать решение, позволяющее использовать фиксированные отступы между колонками (em/rem) и резиновые колонки. Расстояние между колонками будет оставаться одинаковым на всех брейкпоинтах, связанное с базовым font-size.
Колонки определяются пропорциями, например одна вторая, одна третья, и могут быть использованы сколько угодно раз, даже внутри другой колонки. Также имеется поддержка IE8, и немного другая разметка для IE7 и ниже. Написан на SASS.

Foundation 3




Также недавно упоминался на хабре, заявляет о себе как о наиболее продвинутом адаптивном фреймворке для фронт-энда.
  • Гибкая верстка, позволяющая быстро располагать элементы на странице, и предлагающая многоуровневые колонки, может быть адаптирована под любой размер, от телефонов до экранов телевизоров
  • Быстрое прототипирование, имеется множество стилей и элементов, позволяющих ускорить создание работающих прототипов, которые могут быть отполированы и сразу отправлены в продакшн
  • Включены формы, кнопки, табы, и так далее
  • Не требуется настраивать отображение на каждом размере экрана по отдельности
  • Разработан на SASS


Amazium




  • 1200px-верстка
  • Адаптивный 12-ти колоночный дизайн. Пример класса — .grid_12, .grid_8
  • Установлена типографика
  • Различные виды нумерованных и ненумерованных списков
  • Возможность прятать элементы на определенных разрешениях
  • Кастомные формы и таблицы
  • Использование медиа-запросов
  • Адаптивные картинки и видео


Golden Grid System




GGS разделяет экран на 18 четных колонок. Крайние колонки являются гранями, остается 16 колонок для дизайна. Колонки могут комбинироваться, образуя 8-колоночную разметку для планшетов, или 4-колоночную для телефонов. Благодаря такому решению, GGS покрывает разрешения от 240px до 2560px.
  • Резиновые пропорциональные отступы между колонками
  • Сохраняются пропорции всех элементов разметки, в том числе шрифтов, рамок, и так далее
  • Golden Gridlet — кнопка для разработчика, показывающая колонки, задействованные в раскладке
  • Доступны HTML-разметка, CSS, LESS, SCSS, JS


Initializr




Это скорее не фреймворк, а инструмент для генерации шаблонов, использующих HTML5, CSS3 и jQuery.
  • Позволяет создавать шаблоны, основанные на HTML5 Boilerplate, Bootstrap, или на адаптивном шаблоне
  • Доступна документация на русском и других языках


Simple Grid




  • Поддерживает 4 размера экранов: до 720, больше 720, больше 985, и больше 1235px
  • Посетитель получает верстку, настроенную именно под его размер экрана
  • Не требуется использовать классы .first и .last
  • Простые, насколько возможно, классы и разметка


Stack Layout




  • Всего 12 наименований классов
  • Легкий переход на семантические наименования классов
  • Гибкая фиксированная верстка
  • Легкая настройка отступов между колонками


320 and Up




Для владельцев нетбуков — нужно прокрутить вниз, я и сам сразу не понял куда попал.
320 and Up — легкий, простой в использовании адаптивный шаблон для веб-дизайна. Сменил свой принцип с «сначала дизайн для маленьких экранов» на «сначала контент, потом разметка».
  • Пять CSS3 значений медиа-запросов: 480, 600, 768, 992 и 1382px
  • «Атмосфера» дизайна (цвета, текстуры, типографика) отделена от верстки
  • Стили Bootstrap для кнопок, форм и таблиц
  • Modernizr, Selectivizr, адаптивный тестер типов и тестер дизайнов
  • Поддержка LESS и SASS


Fliud Baseline Grid




HTML5 и CSS3 набор для разработки, который предоставляет фундамент для быстрой разработки дизайна веб-сайта. Фреймворк был построен с соблюдением типографических стандартов, и комбинирует принципы верстки резиновыми колонками, основной версткой и адаптивным дизайном «сначала для мобильных устройств».
  • Настраиваемое количество колонок, есть онлайн-инструмент для генерации соответствующих CSS
  • Встроенная типографика
  • Поддержка IE 6 и выше
  • Несколько брейкпоинтов, размеры от мобильных устройств до десктопов


Columnal




Columnal — это «ремикс» нескольких других разметок. Резиновая метка взята от 1140 CSS Grid, дополнительные функции взяты с 960 Grid System. Ширина 1140px, резиновая, поэтому будет соответствовать ширине большинства браузеров.
  • Встроенный CSS-дебаггер, показывающий структуру любого элемента верстки
  • Возможность размещать несколько колонок внутри родительской
  • Имеются префиксы и суффиксы для добавления дополнительного пространства перед или после содержимым
  • CSS классы для вертикальных отступов
  • PDF для ознакомления с разметкой
  • Шаблоны


Ingrid Framwork




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

Yet Another Mobile Boilerplate




YAMB — это набор инструментов для веб-дизайнеров, позволяющий стоить адаптивные веб-сайты быстрее. Веб-сайты на YAMB будут оптимизированы для экранов шириной от 320 до бесконечности.
  • Адаптивная разметка
  • Выпадающие меню с возможностью неограниченных под-уровней и подписей
  • Для маленьких экранов выпадающие меню автоматически конвертируются в списки для выбора
  • Адаптивные слайдшоу с заголовками, возможность добавления их в контент веб-сайта


Less Framework 4




Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке.
Разновидности версток: стандартная, для планшеров, для мобильных устройств и широкая для мобильных устройств
Каждая верстка основана на колонках шириной 68px и 24px-отступах. Изменяется только количество колонок и ширина внешних отступов.
  • Присутствует генератор CSS
  • Есть Rails гем, различные шаблоны, плагин для Compass, и так далее


ResponsiveAeon




  • Адаптивная сетка данного фреймворка выражена в процентах, использует медиа-запросы, HTML5 и JS.
  • Поддержка всех элементов HTML5: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog, audio, canvas, video
  • Ширина страницы 1104px
  • Доступны дополнительные CSS и JS файлы стилей и тому подобного


Titan Framework




  • Основан на 960 Grid System и имеет такие же названия классов
  • 12-ти и 16-колоночные сетки
  • Шаблоны для Photoshop в нескольких разрешениях


Gridiculous




  • Поддерживает ширину страницы от 320 до 1200px
  • Можно выставить фиксированную максимальную ширину в 960px, 640px, 320px
  • Поддержка вложенных колонок
  • Адаптивные картинки и видео


tigerforce добавил следующих три фреймворка:

Kube




Минимальный, но в то же время достаточный адаптивный фреймворк.
  • Есть несколько разновидностей сетки, классы описаны как «половина», «треть», и так далее
  • Включает в себя типографику и различные элементы: формы, кнопки, таблицы, ссылки
  • Для загрузки доступен готовый CSS-файл, или LESS для разработчиков
  • Поддерживает Chrome, Firefox, Safari, Opera, IE 8+


inuit.css


image

«Фрейморк для серьезных веб-разработчиков».
  • Основан на SASS, объектно-ориентированный
  • Подойдет для дизайнеров, которые хотят сосредоточиться на дизайне, а не на коде, и для веб-разработчиков, осознающих важность абстракций и подход ООП
  • Не включен дизайн элементов, разработчик данного фреймворка предлагает использовать Bootstrap
  • Есть порт на LESS


HTML KickStart




HTML KickStart — это набор HTML5, CSS, JS (jQuery) файлов, дающих базовый дизайн для сайтов, освобождающий разработчика от дизайнерской работы.
  • Встроены множество элементов, формы, таблицы, кнопки, табы, галереи, лайтбоксы, слайдшоу, иконки, меню и таблицы
  • Включена типографика
  • 12-колоночная адаптивная разметка
  • Адаптивные карты, видео и календарь


Следующий фреймворк предложен Agel_Nash

Simpliste




Для того, чтобы создать сайт, не обязательно иметь дело со сложными движками и их административными панелями. «Simpliste» — это очень простой в использовании HTML-шаблон для проектов, в которых требуется создать одну или пару страниц с несложной структурой. Если вы хотите создать простую информационную страницу, причем чем меньше кода нужно писать, а килобайтов загружать, тем лучше, то «Simpliste» как раз то, что вам нужно.
Статья на Хабре: Simpliste

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

960 Grid System




Фреймворк, поддерживающий 12-ти и 16-колоночную сетку шириной 960px.
  • Есть возможность перемещения элементов добавлением дополнительных классов без перемещения самих элементов внутри HTML
  • Имеется альтернативная версия с 24-колоночной сеткой


PS. Если найдете ошибки или неправильное применение терминологии — пишите, пожалуйста, в ЛС, исправлю.

UPD: Отметил насчет 960.gs, добавил еще три адаптивных.
UPD2: Добавлены 4 фреймворка от tigerforce и Agel_Nash.
Феликс @Any1
карма
15,7
рейтинг 0,0
Empty Stack Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (44)

  • +3
    960.gs разве адаптивный?
    • 0
      Нет он не адаптивный конечно же.
    • 0
      Вообще адаптивность — это одна из самые интересных технологий в этом году, на сайте бутстрапа есть отличная табличка:

      image

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

      Было бы неплохо, если появилось бы решение на подобие бутстрепа, только для экранов меньше 480px. Была бы тогда идеальная связка бутстреп для десктопа и что-то еще для мобильников.
      • +1
        Не прикрепилась фотка, сорри
        image
  • +1
    Ошибся, с толку сбила ссылка на Adaptive CSS, сам по себе он неадаптивный.
    И промахнулся, это ответ на комментарий Coder
  • –1
    Спасибо за подборочку, о многих не знал.
    Но лично для меня, css и framework до сих пор звучит немного дико. Возможно, я динозавр, но предпочитаю статичные *.css
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Нет, я использую less, но генерю статичные css на сервере при деплое, без клиентской обработки.
        • 0
          Я думаю что так делают все, так как компиляция less на лету на стороне клиента достаточно затратное и не быстрое занятие для браузера.
  • 0
    На каком из них проще сделать стильный сайт с webgl элементами?
  • –5
    Bootstrap он просто раскручен или он реально не хуже остальных?
    • +3
      С одной стороны, Bootstrap действительно у всех на слуху, чуть ли не каждый хотя бы слышал это название, а с другой — это полностью готовый набор для быстрого создания прототипа, который вообще никак не нужно редактировать, а просто установить и использовать «из коробки». Полный набор CSS, JS, готовая сетка, сторонние плагины, а также подробная документация и обилие обучающих видео, в том числе и на railscasts и подобных сайтах сделали его очень известным.
      Но главная цель Bootstrap — это все-таки создание прототипов, чтобы разрабатывать функционал, не сосредотачиваясь на дизайне, что неоднократно подчеркивается в различных учебниках и статьях.
      • 0
        А что это за фишка с изменением параметров на специальной странице?
        twitter.github.com/bootstrap/customize.html
        Каждый раз чтобы изменить какой-нибудь цвет придется идти туда и перекомпиливать все это дело?
        • +1
          Ну если нужно просто «изменить какой-нибудь цвет», можно вручную отредактировать соответствующий LESS файл, и не придется никуда идти и ничего компилировать.
          • 0
            То есть клиент все же грузит .less и на лету компилируется JavaScript'ом уже после загрузки?
            LESS, кстати, прикольный. Мне бы такой инструмент лет 5 назад.
            • +1
              Два варианта:
              1. Клиент грузит LESS и компилирует его в CSS (рекомендуют использовать при разработке);
              2. Прекомпиляция исходников, например в Rails, можно заранее скомпилировать исходники и отдавать уже готовый CSS (используется на продакшене, чтобы снизить нагрузку на сервер).
              • 0
                Компиляция исходников в первую очередь все-таки для клиента делается.
                • 0
                  Согласен, неправильно мысль выразил. Плюсы есть и для сервера, и для клиента, но, действительно, клиенту это важнее.
      • 0
        То есть использовать в реальных проектах с готовым дизайном все же не получится? Только в прототипировании?
        • 0
          Бутстрап часто используется в реальных проектах, но обычно они не так уж сильно отходят от стандартного дизайна. Всё же он включает в себя множество компонентов, поэтому для готового дизайна лучше, наверное, использовать более легковесный фреймворк.
  • +3
    Спасибо за подборку.

    Ещё несколько:
    Kube
    inuit.css
    HTML KickStart
    • 0
      • 0
        Спасибо, добавил их в статью.
  • 0
    Добавлю еще www.bootstrapdesigner.com генератор темплейта, шрифты.
    • 0
      Это все-таки не фреймворк, а инструмент, к тому же платный. Хотя 5 долларов в месяц это почти не деньги, особенно если это требуется для работы, но список, опубликованный мной, состоит из полностью бесплатных фреймворков, и я хотел бы, чтобы он таким и остался.
  • 0
    Не хватает таблички, тяжело сориентироваться :)
    Думаю стоит доработать вот эту табличку: socialcompare.com/en/comparison/css-grids-amp-responsive-frameworks-comparison
  • 0
    Логотипа как такового нет

    Насчет inuit.css, логотип у него есть:

    • 0
      Хм, действительно, не заметил… Добавил в статью, спасибо!
  • 0
    Colomnal на самом деле называется Columnal.
    • –4
      че хател?
    • +1
      Просил же, в личку сообщать… Ну да ладно, все равно я неправ, спасибо, исправил.
  • 0
    ещё фреймворки, www.bestwebframeworks.com/compare-web-frameworks/css/ вроде некоторых не было
  • –1
    Кстати, я все-таки еще раз скажу, как и везде со всеми фреймворками. Господа, если Вам нужна просто сетка, без всякиой фигни, не грузите свой код ненужными вложениями и мощными фреймворками. Сетки делаются до смешного просто! Вот в этой статье объясняется как это сделать за 5ть минут. Все-таки каждому инструменту своя ниша.
    • 0
      Насчет ниши — я в названии статьи использовал слово «адаптивный». В статье, указанной вами, адаптивности нет, поэтому не считаю сравнение сложности и ненужности использования данных фреймворков и простоты метода, приведенного вами, уместным.
    • 0
      Никто не мешает вырезать из стилей неиспользуемые участики.
  • 0
    Еще Gantry gantry-framework.org для Joomla и WordPress
    Вот демо demo.gantry-framework.org/
  • 0
    Спасибо за подборку!
    Я уже почти год использую zurb foundation и нисколько не жалею. В сочетании с moqups получается очень быстрая система прототипирования и черновой верстки. С мокапсом получается эффективно расположить элементы, можно вместе с заказчиком, чтобы он мог сказать, чего он хочет. Потом вручную с учетом норм юзабилити все эти элементы разбиваются на интерфейсы и получатся заготовка для верстки. А дальше, по верстке идет черновая работа. И на чистовик можно от fundation сразу верстать. Смех смехом, 90% конечной верстки для сайта моего отца было сделано за 3 часа. При помощи вот таких инструментов. Правда я до этого идею дизайна вынашивал три месяца, но это уже личные фанаберии
  • 0
    Еще есть Yaml Css Framework
  • 0
    Можете подсказать что нибудь про Nesting Cells? Привык к тому что отсчет количества столбцов идет внутри контейнера.
    К примеру в абстрактном виде:
    div.container12
    div.column3
    div.column9
    div.container8
    div.container4

    Сложно бывает искать во вложенных представлениях где же я поставил лишний столбец и почему текущий блок столбцов поэтому разъезжается.
    P.S. Ищу только разметку, всякие рюшечки и свистелки не нужны
    • 0
      Не верно написал,
      div.container12
      -div.column3
      -div.column9
      --div.container12
      ---div.column8
      ---div.column4
      • 0
        Zurb Foundation смотрели? По этой ссылке примерно то же, что у вас в описании. Чтобы не было свистелок — идем сюда и выбираем только Grid.
  • +1
    А мне Materialize нравится.
    • +1
      <div class="l12 m8 s3"></div>
      

      Очень удобная Grid сетка.
      l — для больших экранов, m — для планшетов, s — для телефонов
  • 0
    SemanticUI?

    Документация http://semantic-ui.com/collections/grid.html на сетки
    Примеры http://semantic-ui.com/examples/grid.html разметки с использованием сеток

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.