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.
    Метки:
    Поделиться публикацией
    Комментарии 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
                    Добавлю еще 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
                                        • +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 разметки с использованием сеток

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