Шаблонов: 22,048     Фрилансеров: 2,646     Веб-студий: 199
Статьи Новости Реклама на сайте Форум
Помогаем продавать
и покупать готовый дизайн
Каталог шаблонов Каталог продавцов Продающие страницы Подписка на новые шаблоны

Какой фрэймворк стоит выбрать для адаптивного веб-дизайна?

24 декабря 2012     Комментарии
Какой фрэймворк стоит выбрать для адаптивного веб-дизайна?

Многое, с чем приходится сталкиваться при разработке адаптивного веб-сайта, кажется утомительным и занимает много времени. Но, к счастью, этот процесс можно ускорить и упростить при помощи фрэймворков, основ для создания шаблонов. Они все имеют  готовую сетку, разметку и блоки media query, так что вы легко сможете добавить свой собственный дизайн и разметку.

Вот список  самых популярных шаблонов для веб-дизайна.

 

Bootstrap

Bootstrap - проект от разработчиков Twitter, можно назвать самым популярным фрэймворком в мире. Набор инструментов Bootstrap настолько велик, что его можно без проблем использовать для любого оригинального сайта.

 

Foundation

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

 

Skeleton

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

 

Golden Grid System

Если вас увлекает работа с сеткой, то вам должен понравится Golden Grid System. Изначально сетка состоит из 16 четких колонок с резиновыми пропорциональными отступами между ними. Но, в зависимости от размеров экрана, разметка может уменьшаться до 8 колонок для планшетов и 4 - для мобильных телефонов.

 

320 and Up

Любителям прогрессивных идей в веб-дизайне стоит присмотреться к шаблонам 320 and up. Этот фрэймворк служит для разметок на небольших экранах, которые можно увеличить до десктопов. Создатели следуют принципу: «сначала контент, и только потом разметка».

 

Less Framework

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

 

1140px CSS Grid System

Адаптивный веб-дизайн подходит не только для экранов с небольшим разрешением, но и для стандартных десктопов. 1140px CSS Grid System предлагает шаблоны для 1280-пиксельных экранов и прекрасно масштабирует картинку для девайсов поменьше.

 

Frameless

Честно говоря, не стоило включать Frameless в список, его вообще нельзя назвать адаптивным в полном смысле слова, да и фрэймворком тоже. Но интересна сама идея: если вам не нравятся резиновые сетки, то с помощью Frameless можно придумать бесконечно много разных разметок, добавляя новые колонки. При этом, если колонки будут выходить за пределы вида, то разметка будет перестраиваться и скрывать их.

 

Wirefy

Иногда бывает сложно убедить клиента в преимуществах адаптивного веб-проекта. В этом случае советуем посетить Wirefy, платформу для создания адаптивных шаблонов структурных схем-таблиц. Здесь вы можете легко показать вариант разметки сайта с использованием различных слайдшоу, галлерей, меню и форм.

 

Gumby Framework

Если вы новичок в адаптивном веб-дизайне, то специально для вас - фрэймворк Gumby Framework. В нем нетрудно разобраться, и кроме того, вместе с сеткой вы получите PSD-файл и сможете создавать ваш дизайн в привычной для себя форме.

 

Автор: Chris Spooner
Оригинал статьи: http://line25.com/articles/which-responsive-frameworks-are-designers-using

Комментарии (0)

Комментариев пока нет. Вы будете первым!

Как продать дизайн?

Наши и другие рекомендации по разработке дизайна и дальнейшей публикации на сайте
Продаём фирменный стиль. Основные аспекты. Хочу продать логотип. Как это сделать? Как продать дизайн сайта
 
Место сдаётся
1$ за 1000 показов
20$ в неделю
1000x90
Advertising


Вход в кабинет