Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

18 апреля 2013 | Опубликовано в css | 5 Комментариев »

С числом увеличения пользователей мобильного интернета  возникает необходимость создания адаптивных сайтов, которые смогут подстраиваться под любой экран. Для упрощения жизни верстальщиков решили решили рассмотреть самые популярные css фреймворки. Они не только помогут сэкономит время, но и сосредоточиться на дизайне и контенте сайта. 

 

Foundation

foundation

Вышла четвертая версия Foundation от компании ZURB. Foundation — css фреймворк с 12-ти колонок для создания прототипов для любых типов устройств. Главное отличие от предыдущей версии заключается в упоре на мобильные телефоны.


Less Framework

less framework

Less Framework представляет собой систему CSSдля проектирования адаптивных веб-сайтов. Он содержит 4 макета и 3 комплекта типографских пресетов, все они основаны на одной сетке.

Golden Grid System

golden grid system

Golden Grid System разделяет экран на 18  колонок, 16 из которых используются для дизайна, а две крайние — внешние границы сетки.

Bootstrap

Bootstrap 

Достаточно популярный фреймворк. Имеет 12-ти колоночную адаптивную сетку, плагины JavaScript и многое другое.

Responsive Grid System

responsive grid system

С помощью Responsive Grid System вы можете достаточно быстро и легко создавать адаптивный дизайн. Это могут быть 12, 16 или 24 столбца.

Skeleton

skeleton

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


Ingrid

Ingrid - легкая  резиновая CSS системы, которая направлена ​​на сведение к минимуму использования классов. Она может легко настраиваться в соответствии с вашими потребностями.

Titan Framework

titan framework

Titan Framework  - новый адаптивный CSS-фреймворк, который был разработан на основе 960 grid system.

 The Goldilocks Approach

Минималистичный фреймворк, который включает css-файлы для определения трех разновидностей медиа-запросов - мультиколоночные, с узкими колонками  и с одной колонкой.

Cascade  

YAML CSS Framework

Все модули фреймворка подготовлены к HTML5 и CSS3. Имеет сетку,  различные формы, элементы навигации и типографики.

Gumby

С помощью фреймворка  Gumby  вы можете настраивать сетку  в соответствии с вашими потребностями. Кроме того, она может быть легко адаптирована к любому размеру экрана. Этот фреймворк также содержит множество готовых стилей и общие элементы интерфейса, такие как формы, кнопки, выпадающие меню и многое другое.

Susy 

 

Если вы используете Django или Rails этот фреймворк во многом вам сможет помочь.

Amazium

amazium

Amazium позволяет достаточно легко выполнять самые сложные и трудоемкие части создания адаптивных веб-сайтов.   С этим фреймворком вы сможете создавать макета также для retina-дисплеев.

 Kube Framework 

 

Минималистичный фреймворк , который включает стили для форм, сеток, кнопок, таблиц, шрифтов и многого.

BluCSS  

320 and Up

css framework for responsive web design

320 and Up адаптивная шаблонная система, которая  содержит пять медиа-запросов, вертикальную сетку, заданные стили типографских пресетов и шаблоны HTML5.

Были использованы материалы: Alfred Winston

Перевод — Дежурка

 

Смотрите также:

 

 




Комментарии

  1. bizon
    Thumb up Thumb down -11

    Комментарий скрыт из-за рейтинга

  2. itshaman
    Thumb up Thumb down +2

    Не совсем понимаю зачем они нужны. Разве не хватает обычных медиа-запросов для создания адаптивной страницы??

    Андрей Ответ:

    Thumb up Thumb down 0

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

    А вот адаптивные фичи в них, полностью согласен, на мой взгляд только для прототипов подходят.

  3. mackay
    Thumb up Thumb down +1

    Kube и bootstrap мои любимые

[an error occurred while processing the directive]


[an error occurred while processing the directive]