15 CSS фреймворков

В статье даны примеры отзывчивых (адаптивных) CSS-фреймворков, которые можно использовать для разработки сайта на MODX Revolution или другом удобном для вас фреймворке.

Как вы можете заметить все современные CSS-фреймворки разработаны под влиянием других, наиболее популярных CSS-фреймворков, таких как Bootstrap, Foundation и Gumby, и поэтому содержат сразу же много дополнений, включая многоразовые компоненты и виджеты (иконки, модальные окна, пагинацию, хлебные крошки, навигацию...).

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

Вот эти фреймворки:

Новые отзывчивые CSS фреймворки

Girder

Girder CSS фреймворк грид отзывчивый UI набор

Построенный на Sass, Girder — это минималистический грид набор, создающий гибкую вёрстку разделенную на логические секции. Он использует тихие классы (плейсхолдеры) для структурирования содержимого в HTML (для содержания вашей разметки чистой от излишних классов представления) и он может масштабироваться базируясь на нуждах проекта, так как он поддерживает сложные медиа-запросы используя компасс-плагин Breakpoint().

Girder GitHub

Cardinal

Cardinal CSS фреймворк сетка responsive UI kit

Cardinal это маленький мобильный-вначале CSS фреймворк сфокусированный изначально на отзывчивые веб-приложения. Цель Cardinal — сделать легче быстрое прототипирование, построение, масштабирование и поддержку CSS для быстрых веб-приложений. У него нет многих эстетических дизайнерских решений, которые обычно тормозят большие и более сложные CSS фреймворки, оставляя дизайн за вами.

Cardinal GitHub

Typeplate

Typeplate typography CSS фреймворк сетка responsive UI kit

Typeplate — это типографический стартовый набор без множества эстетических дизайнерских элементов, но содержит правильную разметку и общие типографические паттерны.

Typeplate GitHub

Gridism

Gridism CSS framework сетка responsive UI kit

Gridism — это простая CSS сетка, которая идёт в комплекте с паттернами для отзывчивого дизайна.

Gridism GitHub

Furatto

Furatto CSS фреймворк сетка responsive UI kit

Furatto в плоском стиле — это фронт-энд фреймворк для быстрой веб-разработки, создан на основе других фреймворков, таких как: Twitter Bootstrap, Foundation...

Furatto GitHub

PocketGrid

PocketGrid CSS framework сетка responsive UI kit

PocketGrid — это лековесный (0.5kB) чисто CSS отзывчивая грид система, позволяющая неограниченное количество колонок и разрывов. Вместо создания сетки с рядами и колонками, PocketGrid имеет более гибкую систему блоков и блоковых груп. Блоковые групы схожи на колонки, что даёт большую гибкость, чем при использовании традиционных сеток.

PocketGrid GitHub

.Fitgrid

Fitgrid CSS фреймворк сетка responsive UI kit

Разработанный для быстрого прототипирования (но также хорошо показывает себя в продакшн окружении), .Fitgrd — это крепкая основа для дизайнеров, которые не хотят, чтобы их страницы выглядели словно их «бутстрепнули». Сетка разделена на 12 колонок с процентной шириной, каждая колонка имеет 2% отступы (margin) с каждой стороны.

.Fitgrid GitHub

Kraken

Kraken CSS фреймворк сетка responsive UI kit

Kraken — это лековесный, мобильный-вначале набор, который включает только необходимое: CSS сброс для кроссбраузерности; отзывчивый мобильный-вначале грид; хорошо спроектированный, гибкий типографический масштаб; CSS3 кнопки; базовый стиль форм; опциональные аддоны для большей функциональности.

Kraken GitHub

Markup

Markup CSS фреймворк сетка responsive UI kit

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

Markup

Topcoat

Topcoat CSS фреймворк грид отзывчивый UI набор

Topcoat — это опенсорсный фреймворк, с которым легко создавать веб-приложения. Очень быстрый с большим количеством тем, опенсорсные шрифты, в набор входят PSD файлы, множество пополняющихся компонентов, BEM-архитектура (что это такое — 1, 2, 3), иконки!

Topcoat GitHub

Cascade

Cascade CSS фреймворк сетка responsive UI kit

Cascade фреймворк работает, разбивая ваш CSS в отдельные файлы, базируясь на свойствах, чем на селекторах и осуществляя модифицируемый дизайн-паттерн созданный из идей, лежащих в SMACCS и OOCSS.

Cascade GitHub

Responsable

Responsable CSS фреймворк сетка responsive UI kit

Responsable — это отзывчивая грид система, базирующаяся на Semantic.gs и работающая с помощью LESS.

Responsable GitHub

Ratchet

Ratchet CSS фреймворк сетка responsive UI kit

Ratchet — позволяет вам прототипировать мобильные приложения используя простой HTML, CSS и JavaScript компоненты.

Ratchet GitHub

Clank

Clank CSS фреймворк сетка responsive UI kit

Clank — это оперсорсный прототипирующий фреймворк, который помогает вам работать с мобильными приложениями.

Clank GitHub

Responsive Web CSS

Web CSS фреймворк сетка responsive UI kit

Responsive Web CSS поможет вам сверстать ваши веб-страницы в течение минут. Вы можете обозначить целевые устройства и разрешение для отзывчивости и далее легко загрузить каркас сайта.

Responsive Web CSS

Оригинал статьи