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


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







«Фрейморк для серьезных веб-разработчиков».

  • Основан на 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.

 
 

+79

 

 
104204
1473
Any1 7,9 G+
 
 
 
 

комментарии (41)

 

   

+3
 

Coder,

31 октября 2012 в 01:14

#  

 
 
960.gs разве адаптивный?
 
 

   

0
 

s2d,

31 октября 2012 в 02:19

#

 

 
 
Нет он не адаптивный конечно же.
 
 

   

0
 

s2d,

31 октября 2012 в 02:40

#

 

 
 
Вообще адаптивность — это одна из самые интересных технологий в этом году, на сайте бутстрапа есть отличная табличка:







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



Было бы неплохо, если появилось бы решение на подобие бутстрепа, только для экранов меньше 480px. Была бы тогда идеальная связка бутстреп для десктопа и что-то еще для мобильников.
 
 

   

+1
 

s2d,

31 октября 2012 в 05:05

#

 

 
 
Не прикрепилась фотка, сорри

 
 

   

+1
 

Any1,

31 октября 2012 в 01:18 (комментарий был изменён)

#  

 
 
Ошибся, с толку сбила ссылка на Adaptive CSS, сам по себе он неадаптивный.

И промахнулся, это ответ на комментарий Coder
 
 

   

–1
 

Lure_of_Chaos,

31 октября 2012 в 01:55

#  

 
 
Спасибо за подборочку, о многих не знал.

Но лично для меня, css и framework до сих пор звучит немного дико. Возможно, я динозавр, но предпочитаю статичные *.css
 
 

   

0
 

denisgorbunov,

12 ноября 2012 в 14:19

#

 

 
 
Так сами-то CSS статичны. LESS не обязателен.
 
 

   

0
 

Lure_of_Chaos,

12 ноября 2012 в 14:28

#

 

 
 
Нет, я использую less, но генерю статичные css на сервере при деплое, без клиентской обработки.
 
 

   

0
 

Makito,

12 ноября 2012 в 14:51

#

 

 
 
Я думаю что так делают все, так как компиляция less на лету на стороне клиента достаточно затратное и не быстрое занятие для браузера.
 
 

   

0
 

valyard,

31 октября 2012 в 02:49

#  

 
 
На каком из них проще сделать стильный сайт с webgl элементами?
 
 

   

–5
 

valyard,

31 октября 2012 в 02:50

#  

 
 
Bootstrap он просто раскручен или он реально не хуже остальных?
 
 

   

+3
 

Any1,

31 октября 2012 в 02:59

#

 

 
 
С одной стороны, Bootstrap действительно у всех на слуху, чуть ли не каждый хотя бы слышал это название, а с другой — это полностью готовый набор для быстрого создания прототипа, который вообще никак не нужно редактировать, а просто установить и использовать «из коробки». Полный набор CSS, JS, готовая сетка, сторонние плагины, а также подробная документация и обилие обучающих видео, в том числе и на railscasts и подобных сайтах сделали его очень известным.

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

   

0
 

valyard,

31 октября 2012 в 03:38

#

 

 
 
А что это за фишка с изменением параметров на специальной странице?

twitter.github.com/bootstrap/customize.html

Каждый раз чтобы изменить какой-нибудь цвет придется идти туда и перекомпиливать все это дело?
 
 

   

+1
 

Any1,

31 октября 2012 в 03:43

#

 

 
 
Ну если нужно просто «изменить какой-нибудь цвет», можно вручную отредактировать соответствующий LESS файл, и не придется никуда идти и ничего компилировать.
 
 

   

0
 

valyard,

31 октября 2012 в 03:47

#

 

 
 
То есть клиент все же грузит .less и на лету компилируется JavaScript'ом уже после загрузки?

LESS, кстати, прикольный. Мне бы такой инструмент лет 5 назад.
 
 

   

+1
 

Any1,

31 октября 2012 в 03:55

#

 

 
 
Два варианта:

1. Клиент грузит LESS и компилирует его в CSS (рекомендуют использовать при разработке);

2. Прекомпиляция исходников, например в Rails, можно заранее скомпилировать исходники и отдавать уже готовый CSS (используется на продакшене, чтобы снизить нагрузку на сервер).
 
 

   

0
 

asavin,

31 октября 2012 в 17:55

#

 

 
 
Компиляция исходников в первую очередь все-таки для клиента делается.
 
 

   

0
 

Any1,

31 октября 2012 в 17:58

#

 

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

   

0
 

ambientos,

31 октября 2012 в 12:57

#

 

 
 
То есть использовать в реальных проектах с готовым дизайном все же не получится? Только в прототипировании?
 
 

   

0
 

tigerforce,

31 октября 2012 в 14:53

#

 

 
 
Бутстрап часто используется в реальных проектах, но обычно они не так уж сильно отходят от стандартного дизайна. Всё же он включает в себя множество компонентов, поэтому для готового дизайна лучше, наверное, использовать более легковесный фреймворк.
 
 

   

+3
 

tigerforce,

31 октября 2012 в 05:23

#  

 
 
Спасибо за подборку.



Ещё несколько:

Kube

inuit.css

HTML KickStart
 
 

   

0
 

Agel_Nash,

31 октября 2012 в 09:34

#

 

 
 
 
 

   

0
 

Any1,

31 октября 2012 в 11:18

#

 

 
 
Спасибо, добавил их в статью.
 
 

   

0
 

illuzii,

31 октября 2012 в 13:39 (комментарий был изменён)

#  

 
 
Добавлю еще www.bootstrapdesigner.com генератор темплейта, шрифты.
 
 

   

0
 

Any1,

31 октября 2012 в 23:13

#

 

 
 
Это все-таки не фреймворк, а инструмент, к тому же платный. Хотя 5 долларов в месяц это почти не деньги, особенно если это требуется для работы, но список, опубликованный мной, состоит из полностью бесплатных фреймворков, и я хотел бы, чтобы он таким и остался.
 
 

   

0
 

reiser,

31 октября 2012 в 13:56

#  

 
 
Не хватает таблички, тяжело сориентироваться 🙂

Думаю стоит доработать вот эту табличку: socialcompare.com/en/comparison/css-grids-amp-responsive-frameworks-comparison
 
 

   

0
 

weiss,

31 октября 2012 в 13:59 (комментарий был изменён)

#  

 
 

none

Логотипа как такового нет



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



 
 

   

0
 

Any1,

31 октября 2012 в 15:47

#

 

 
 
Хм, действительно, не заметил… Добавил в статью, спасибо!
 
 

   

0
 

ivvi,

31 октября 2012 в 19:52

#  

 
 
Colomnal на самом деле называется Columnal.
 
 

   

–4
 

ArtemSmirnov,

31 октября 2012 в 21:15

#

 

 
 
че хател?
 
 

   

+1
 

Any1,

31 октября 2012 в 22:13

#

 

 
 
Просил же, в личку сообщать… Ну да ладно, все равно я неправ, спасибо, исправил.
 
 

   

0
 

joni,

1 ноября 2012 в 00:32

#  

 
 
ещё фреймворки, www.bestwebframeworks.com/compare-web-frameworks/css/ вроде некоторых не было
 
 

   

–1
 

Pruntoff,

1 ноября 2012 в 16:26

#  

 
 
Кстати, я все-таки еще раз скажу, как и везде со всеми фреймворками. Господа, если Вам нужна просто сетка, без всякиой фигни, не грузите свой код ненужными вложениями и мощными фреймворками. Сетки делаются до смешного просто! Вот в этой статье объясняется как это сделать за 5ть минут. Все-таки каждому инструменту своя ниша.
 
 

   

0
 

Any1,

1 ноября 2012 в 18:02

#

 

 
 
Насчет ниши — я в названии статьи использовал слово «адаптивный». В статье, указанной вами, адаптивности нет, поэтому не считаю сравнение сложности и ненужности использования данных фреймворков и простоты метода, приведенного вами, уместным.
 
 

   

0
 

Agel_Nash,

1 ноября 2012 в 19:26

#

 

 
 
Никто не мешает вырезать из стилей неиспользуемые участики.
 
 

   

0
 

fullsize,

8 ноября 2012 в 07:52

#  

 
 
Еще Gantry gantry-framework.org для Joomla и WordPress

Вот демо demo.gantry-framework.org/
 
 

   

0
 

aslanalexander,

14 ноября 2012 в 13:15

#  

 
 
Спасибо за подборку!

Я уже почти год использую zurb foundation и нисколько не жалею. В сочетании с moqups получается очень быстрая система прототипирования и черновой верстки. С мокапсом получается эффективно расположить элементы, можно вместе с заказчиком, чтобы он мог сказать, чего он хочет. Потом вручную с учетом норм юзабилити все эти элементы разбиваются на интерфейсы и получатся заготовка для верстки. А дальше, по верстке идет черновая работа. И на чистовик можно от fundation сразу верстать. Смех смехом, 90% конечной верстки для сайта моего отца было сделано за 3 часа. При помощи вот таких инструментов. Правда я до этого идею дизайна вынашивал три месяца, но это уже личные фанаберии
 
 

   

0
 

Titch,

7 января 2013 в 03:32

#  

 
 
Еще есть Yaml Css Framework
 
 

   

0
 

Actor,

1 июля 2013 в 05:36

#  

 
 
Можете подсказать что нибудь про Nesting Cells? Привык к тому что отсчет количества столбцов идет внутри контейнера.

К примеру в абстрактном виде:

div.container12

div.column3

div.column9

div.container8

div.container4



Сложно бывает искать во вложенных представлениях где же я поставил лишний столбец и почему текущий блок столбцов поэтому разъезжается.

P.S. Ищу только разметку, всякие рюшечки и свистелки не нужны
 
 

   

0
 

Actor,

1 июля 2013 в 05:46

#

 

 
 
Не верно написал,

div.container12

-div.column3

-div.column9

—div.container12

—div.column8

—div.column4
 
 

   

0
 

Any1,

2 июля 2013 в 19:35

#

 

 
 
Zurb Foundation смотрели? По этой ссылке примерно то же, что у вас в описании. Чтобы не было свистелок — идем сюда и выбираем только Grid.
 

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

 
Лучшее за 24 часа
Похожие посты
Вопросы по теме
Что обсуждают?
 
 
 
 
 
 

Все мозги в одном месте
 

Q&A-сервис для разработчиков
 

Заказы для фрилансеров
 

Вакансии для айтишников
 

Уютная и дружелюбная

http://habrahabr.ru/post/156747/

Губарь Маргарита Александровна