В статье даны примеры отзывчивых (адаптивных) CSS-фреймворков, которые можно использовать для разработки сайта на MODX Revolution или другом удобном для вас фреймворке.
Как вы можете заметить все современные CSS-фреймворки разработаны под влиянием других, наиболее популярных CSS-фреймворков, таких как Bootstrap, Foundation и Gumby, и поэтому содержат сразу же много дополнений, включая многоразовые компоненты и виджеты (иконки, модальные окна, пагинацию, хлебные крошки, навигацию…).
Конечно же, не все из них таковы, некоторые просто содержат базис, от которого можно оттолкнуться при создании своих стилей.
Вот эти фреймворки:
Новые отзывчивые CSS фреймворки
Girder
Построенный на Sass, Girder — это минималистический грид набор, создающий гибкую вёрстку разделенную на логические секции. Он использует тихие классы (плейсхолдеры) для структурирования содержимого в HTML (для содержания вашей разметки чистой от излишних классов представления) и он может масштабироваться базируясь на нуждах проекта, так как он поддерживает сложные медиа-запросы используя компасс-плагин Breakpoint().
Cardinal
Cardinal это маленький мобильный-вначале CSS фреймворк сфокусированный изначально на отзывчивые веб-приложения. Цель Cardinal — сделать легче быстрое прототипирование, построение, масштабирование и поддержку CSS для быстрых веб-приложений. У него нет многих эстетических дизайнерских решений, которые обычно тормозят большие и более сложные CSS фреймворки, оставляя дизайн за вами.
Typeplate
Typeplate — это типографический стартовый набор без множества эстетических дизайнерских элементов, но содержит правильную разметку и общие типографические паттерны.
Gridism
Gridism — это простая CSS сетка, которая идёт в комплекте с паттернами для отзывчивого дизайна.
Furatto
Furatto в плоском стиле — это фронт-энд фреймворк для быстрой веб-разработки, создан на основе других фреймворков, таких как: Twitter Bootstrap, Foundation…
PocketGrid
PocketGrid — это лековесный (0.5kB) чисто CSS отзывчивая грид система, позволяющая неограниченное количество колонок и разрывов. Вместо создания сетки с рядами и колонками, PocketGrid имеет более гибкую систему блоков и блоковых груп. Блоковые групы схожи на колонки, что даёт большую гибкость, чем при использовании традиционных сеток.
.Fitgrid
Разработанный для быстрого прототипирования (но также хорошо показывает себя в продакшн окружении), .Fitgrd — это крепкая основа для дизайнеров, которые не хотят, чтобы их страницы выглядели словно их «бутстрепнули». Сетка разделена на 12 колонок с процентной шириной, каждая колонка имеет 2% отступы (margin) с каждой стороны.
[[$googleAdsenceResponsive?]]
Kraken
Kraken — это лековесный, мобильный-вначале набор, который включает только необходимое: CSS сброс для кроссбраузерности; отзывчивый мобильный-вначале грид; хорошо спроектированный, гибкий типографический масштаб; CSS3 кнопки; базовый стиль форм; опциональные аддоны для большей функциональности.
Markup
Markup — это простая коллекция вёрстки, виджетов, UI стилей и других компонентов, которые вы можете использовать в ваший проектах с целью кодить быстро и эффективно.
Topcoat
Topcoat — это опенсорсный фреймворк, с которым легко создавать веб-приложения. Очень быстрый с большим количеством тем, опенсорсные шрифты, в набор входят PSD файлы, множество пополняющихся компонентов, BEM-архитектура (что это такое — 1, 2, 3), иконки!
Cascade
Cascade фреймворк работает, разбивая ваш CSS в отдельные файлы, базируясь на свойствах, чем на селекторах и осуществляя модифицируемый дизайн-паттерн созданный из идей, лежащих в SMACCS и OOCSS.
Responsable
Responsable — это отзывчивая грид система, базирующаяся на Semantic.gs и работающая с помощью LESS.
Ratchet
Ratchet — позволяет вам прототипировать мобильные приложения используя простой HTML, CSS и JavaScript компоненты.
Clank
Clank — это оперсорсный прототипирующий фреймворк, который помогает вам работать с мобильными приложениями.
Responsive Web CSS
Responsive Web CSS поможет вам сверстать ваши веб-страницы в течение минут. Вы можете обозначить целевые устройства и разрешение для отзывчивости и далее легко загрузить каркас сайта.