CSS-фреймворки для адаптивного дизайна
18 апреля 2013 | Опубликовано в css | 5 Комментариев »
С числом увеличения пользователей мобильного интернета возникает необходимость создания адаптивных сайтов, которые смогут подстраиваться под любой экран. Для упрощения жизни верстальщиков решили решили рассмотреть самые популярные css фреймворки. Они не только помогут сэкономит время, но и сосредоточиться на дизайне и контенте сайта.
Вышла четвертая версия Foundation от компании ZURB. Foundation — css фреймворк с 12-ти колонок для создания прототипов для любых типов устройств. Главное отличие от предыдущей версии заключается в упоре на мобильные телефоны.
Less Framework представляет собой систему CSSдля проектирования адаптивных веб-сайтов. Он содержит 4 макета и 3 комплекта типографских пресетов, все они основаны на одной сетке.
Golden Grid System разделяет экран на 18 колонок, 16 из которых используются для дизайна, а две крайние — внешние границы сетки.
Достаточно популярный фреймворк. Имеет 12-ти колоночную адаптивную сетку, плагины JavaScript и многое другое.
С помощью Responsive Grid System вы можете достаточно быстро и легко создавать адаптивный дизайн. Это могут быть 12, 16 или 24 столбца.
Skeleton был одним из самых ранних и лучших адаптивных CSS — фреймворков, что позволяет разрабатывать привлекательные веб-сайты любого размера — будь то экран ноутбука или iPhone. Фреймворк достаточно прост в использовании.
Ingrid - легкая резиновая CSS системы, которая направлена на сведение к минимуму использования классов. Она может легко настраиваться в соответствии с вашими потребностями.
Titan Framework - новый адаптивный CSS-фреймворк, который был разработан на основе 960 grid system.
Минималистичный фреймворк, который включает css-файлы для определения трех разновидностей медиа-запросов - мультиколоночные, с узкими колонками и с одной колонкой.
Все модули фреймворка подготовлены к HTML5 и CSS3. Имеет сетку, различные формы, элементы навигации и типографики.
С помощью фреймворка Gumby вы можете настраивать сетку в соответствии с вашими потребностями. Кроме того, она может быть легко адаптирована к любому размеру экрана. Этот фреймворк также содержит множество готовых стилей и общие элементы интерфейса, такие как формы, кнопки, выпадающие меню и многое другое.
Если вы используете Django или Rails этот фреймворк во многом вам сможет помочь.
Amazium позволяет достаточно легко выполнять самые сложные и трудоемкие части создания адаптивных веб-сайтов. С этим фреймворком вы сможете создавать макета также для retina-дисплеев.
Минималистичный фреймворк , который включает стили для форм, сеток, кнопок, таблиц, шрифтов и многого.
320 and Up адаптивная шаблонная система, которая содержит пять медиа-запросов, вертикальную сетку, заданные стили типографских пресетов и шаблоны HTML5.
Были использованы материалы: Alfred Winston
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
18 апреля 2013 в 17:46
Комментарий скрыт из-за рейтинга
Ответить
20 апреля 2013 в 19:46
Не совсем понимаю зачем они нужны. Разве не хватает обычных медиа-запросов для создания адаптивной страницы??
Ответить
мая 12, 2013 at 10:23 пп
Сами фреймвворки очень полезны. К примеру тот же бутстрап использую теперь всегда, конечно не весь, а только необходимые модули. Главное хорошо ознакомиться с тем что внутри, что-бы можно было отредактировать под нужды проекта, а не строить поверх огород из правок.
А вот адаптивные фичи в них, полностью согласен, на мой взгляд только для прототипов подходят.
Ответить
8 июня 2013 в 11:08
Kube и bootstrap мои любимые
Ответить