- PVSM.RU - https://www.pvsm.ru -
Заметил, в последнее время на любое упоминание Twitter Bootstrap, минимум один человек отмечает, что «слишком много его стало». Большинство все устраивает, но некоторым он уже приелся и они хотят чего-то нового. Поэтому решил написать статью со сборником css-фреймворков, думаю каждый сможет найти что-нибудь для себя. Заодно сделаем интернет разнообразнее.
Извиняюсь перед теми, кто его ненавидит, но все-таки в этом списке нельзя его не упомянуть.
Очень распространенный и широко используемый фреймворк, про который написано уже множество статей, поэтому просто кратко перечислю его особенности:
На основании этого можно сказать, что Bootstrap — это все-в-одном, который удовлетворит любые потребности разработчика, благодаря чему он и является таким популярным.
Разработчик утверждает, что это не фреймворк, и не набор заготовок, и говорит, что это быстрый и простой способ создать адаптивный веб-сайт.
На официальном сайте выделены следующие достоинства:
Разметка и ничего лишнего.
Разметка 1140px, рассчитана под 1280px-мониторы. На мониторах с меньшим разрешением она становится резиновой и адаптируется под ширину окна браузера. После определенной точки она использует медиа-запросы для передачи мобильной версии, которая складывает колонки в стопку, так что информация сохраняет свой смысл.
Если вы разрабатываете сайты с шириной страницы 1140 пикселей, вероятно, это то, что вам нужно.
Также уже не раз здесь упоминался, поэтому сразу описание:
Не нашел ни одного упоминания на хабре, хотя может быть у меня поломался поиск…
Ищете адаптивный дизайн, но ненавидите резиновые разметки? Думаю, это вам подойдет. Суть такова: создаете много повторяющихся колонок с фиксированной шириной, центруете их по окну, и все! Адаптируется не по пикселям, а по колонкам. Те колонки, которые выходят за пределы вида, скрываются, и разметка перестраивается. Официальный сайт этого фреймворка адаптируется под разрешения 320, 480, 600, 900 и 1900 пикселей.
Имеются шаблоны на LESS, SCSS, база HTML, шаблон для Photoshop.
Достаточно интересная идея, рекомендую хотя бы зайти и посмотреть как оно выглядит.
«Фреймворк, с которым вы уже знакомы». По наполнению напоминает Bootstrap.
HTML5 и CSS3 шаблон для создания адаптивных, кроссбраузерных веб-сайтов с отличной типографикой.
Полная поддержка Ruby on Rails, требует установки гема «compass». Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.
«Хорошая начало для дизайна, в котором разрешение устройства убирается из уравнения».
На официальном сайте есть примеры всех трех типов отображения дизайна при помощи медиа-запросов.
Разработчик этого фрейморка использовал css-свойство box-sizing, чтобы создать решение, позволяющее использовать фиксированные отступы между колонками (em/rem) и резиновые колонки. Расстояние между колонками будет оставаться одинаковым на всех брейкпоинтах, связанное с базовым font-size.
Колонки определяются пропорциями, например одна вторая, одна третья, и могут быть использованы сколько угодно раз, даже внутри другой колонки. Также имеется поддержка IE8, и немного другая разметка для IE7 и ниже. Написан на SASS.
Также недавно упоминался на хабре, заявляет о себе как о наиболее продвинутом адаптивном фреймворке для фронт-энда.
GGS разделяет экран на 18 четных колонок. Крайние колонки являются гранями, остается 16 колонок для дизайна. Колонки могут комбинироваться, образуя 8-колоночную разметку для планшетов, или 4-колоночную для телефонов. Благодаря такому решению, GGS покрывает разрешения от 240px до 2560px.
Это скорее не фреймворк, а инструмент для генерации шаблонов, использующих HTML5, CSS3 и jQuery.
Поддерживает 4 размера экранов: до 720, больше 720, больше 985, и больше 1235px
Посетитель получает верстку, настроенную именно под его размер экрана
Не требуется использовать классы .first и .last
Простые, насколько возможно, классы и разметка
Для владельцев нетбуков — нужно прокрутить вниз, я и сам сразу не понял куда попал.
320 and Up — легкий, простой в использовании адаптивный шаблон для веб-дизайна. Сменил свой принцип с «сначала дизайн для маленьких экранов» на «сначала контент, потом разметка».
HTML5 и CSS3 набор для разработки, который предоставляет фундамент для быстрой разработки дизайна веб-сайта. Фреймворк был построен с соблюдением типографических стандартов, и комбинирует принципы верстки резиновыми колонками, основной версткой и адаптивным дизайном «сначала для мобильных устройств».
Colomnal — это «ремикс» нескольких других разметок. Резиновая метка взята от 1140 CSS Grid, дополнительные функции взяты с 960 Grid System. Ширина 1140px, резиновая, поэтому будет соответствовать ширине большинства браузеров.
Ingrid — это легкая резиновая система CSS-разметки, цель которой — уменьшить необходимость в использовании классов или индивидуальных типов. Благодаря этому она становится менее навязчивой и ее проще перестраивать для адаптивной верстки. Также это расширяемая система, которую легко настраивать под собственные цели.
YAMB — это набор инструментов для веб-дизайнеров, позволяющий стоить адаптивные веб-сайты быстрее. Веб-сайты на YAMB будут оптимизированы для экранов шириной от 320 до бесконечности.
Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке.
Разновидности версток: стандартная, для планшеров, для мобильных устройств и широкая для мобильных устройств
Каждая верстка основана на колонках шириной 68px и 24px-отступах. Изменяется только количество колонок и ширина внешних отступов.
Минимальный, но в то же время достаточный адаптивный фреймворк.
Логотипа как такового нет, проект размещен на гитхабе.
«Фрейморк для серьезных веб-разработчиков».
HTML KickStart — это набор HTML5, CSS, JS (jQuery) файлов, дающих базовый дизайн для сайтов, освобождающий разработчика от дизайнерской работы.
Для того, чтобы создать сайт, не обязательно иметь дело со сложными движками и их административными панелями. «Simpliste» — это очень простой в использовании HTML-шаблон для проектов, в которых требуется создать одну или пару страниц с несложной структурой. Если вы хотите создать простую информационную страницу, причем чем меньше кода нужно писать, а килобайтов загружать, тем лучше, то «Simpliste» как раз то, что вам нужно.
Статья на Хабре: Simpliste [36]
Фреймворк, поддерживающий 12-ти и 16-колоночную сетку шириной 960px.
PS. Если найдете ошибки или неправильное применение терминологии — пишите, пожалуйста, в ЛС, исправлю.
UPD: Отметил насчет 960.gs, добавил еще три адаптивных.
UPD2: Добавлены 4 фреймворка от tigerforce [30] и Agel_Nash [34].
Автор: Any1
Источник [38]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/18502
Ссылки в тексте:
[1] Twitter Bootstrap: http://twitter.github.com/bootstrap/
[2] Responsive Grid System: http://www.responsivegridsystem.com/
[3] 1140 CSS Grid: http://cssgrid.net/
[4] Skeleton: http://www.getskeleton.com/
[5] The Semantic Grid: http://semantic.gs/
[6] Stylus: http://learnboost.github.com/stylus/
[7] Frameless Grid: http://framelessgrid.com/
[8] Gumby Framework: http://www.gumbyframework.com/
[9] Gridless: http://thatcoolguy.github.com/gridless-boilerplate/
[10] Адаптивные разметки для Compass (SUSY): http://susy.oddbird.net/
[11] The Goldilocks Approach: http://goldilocksapproach.com/
[12] Proportional Grids: http://builtbyboon.com/blog/proportional-grids
[13] Foundation 3: http://foundation.zurb.com/
[14] Amazium: http://www.amazium.co.uk/
[15] Golden Grid System: http://goldengridsystem.com/
[16] Initializr: http://www.initializr.com/
[17] Simple Grid: http://simplegrid.info/
[18] Stack Layout: http://www.stacklayout.com/index.html
[19] 320 and Up: http://stuffandnonsense.co.uk/projects/320andup/
[20] Modernizr: http://modernizr.com/
[21] Selectivizr: http://selectivizr.com/
[22] Fliud Baseline Grid: http://fluidbaselinegrid.com/
[23] Colomnal: http://www.columnal.com/
[24] Ingrid Framwork: http://piira.se/projects/ingrid/
[25] Yet Another Mobile Boilerplate: http://www.prowebdesign.ro/yamb/
[26] Less Framework 4: http://lessframework.com/
[27] ResponsiveAeon: http://www.newaeonweb.com.br/responsiveaeon/
[28] Titan Framework: http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs
[29] Gridiculous: http://gridiculo.us/
[30] tigerforce: http://habrahabr.ru/users/tigerforce/
[31] Kube: http://imperavi.com/kube/
[32] inuit.css: https://github.com/csswizardry/inuit.css
[33] HTML KickStart: http://99lime.com/
[34] Agel_Nash: http://habrahabr.ru/users/agel_nash/
[35] Simpliste: http://cssr.ru/simpliste/ru.html
[36] Simpliste: http://habrahabr.ru/post/136424/
[37] 960 Grid System: http://960.gs/
[38] Источник: http://habrahabr.ru/post/156747/
Нажмите здесь для печати.