html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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.
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

141
    +123 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • quventine
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции