Многое, с чем приходится сталкиваться при разработке адаптивного веб-сайта, кажется утомительным и занимает много времени. Но, к счастью, этот процесс можно ускорить и упростить при помощи фрэймворков, основ для создания шаблонов. Они все имеют готовую сетку, разметку и блоки 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
Оригинал статьи:
Добавить комментарий