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

 

 

 

Style Tiles 

Style Tiles  -  инструмент для создания красивых заголовков, который включает наборы различных шрифтов и стилей.

Responsive Web Design Sketch Sheets
Этот набор поможет вам в планировании изменений различных элементов разных размеров.

Responsive Wireframes

Готовые решения для создания адаптивных сайтов.

Multi-Device Layout Patterns
Статья о шаблонах компоновки.

Simple Device Diagram

Responsive Design with Mockups
Здесь вы найдете библиотеку шаблонов вместе с учебником о создании вайрфпеймов. 

 

Инструменты для адаптивных изображений и текста

Responsive Images  

Adaptive Images

Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.

Seamless Responsive Photo Grid

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

FitText
Данный jQuery-плагин позволит вам изменять шрифт и быть при этом уверенным, что всё останется на своих местах, независимо от устройства или браузера. Таким образом можно достичь масштабируемых заголовков. 

Retina Images

Этот инструмент поможет вам показать 2 бьольших изображения с высоком разрешением, оптимизированными под Retina в адаптивных веб-дизайнах. 

Гибкие сетки и медиа-запросы

Variable Grid System 
Бесплатный генератор адаптивной css-сетки 

Responsive Calculator
С помощью этого калькулятора вы можете легко превратить ваш psd исходник в натуральный шаблон. 

Gridpak 

С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.

Semantic Grid System 

Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.

Columnal CSS Grid System
Эта система сеток  поможет создавать адаптивные макеты.  

Simple Grid

Golden Grid System

Сервис с помощью которого вы можете протестировать ваш сайта используя сетку из 18 столбцов.

1140 CSS Grid

Оптимизирована для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, которая использует Media Queries.

Susy

Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.

Respond.js

Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.

CSS3-Mediaqueries.js

Библиотека css3 mediaqueries.js добавит поддержку CSS3 медиа-запросов в старые броузеры (IE 5+, Firefox 1+, Safari 2).

Adapt.js
Это очень маленький (<1 кб) javascript-файл, который может загружать определенные CSS-файлы в зависимости от ширины веб-страниц. Перед тем, как браузер полностью загрузит страницу, плагин проверяет ширину дисплея и автоматически определяет, какой CSS-файл нужно загрузить.

Categorizr

ProtoFluid
Инструмент для быстрого прототипирования адаптивного дизайна. Вы можете спроектировать CSS для различных популярных размеров экранов, ориентаций и браузеров, будь то телефоны, планшеты, мониторы или телевизоры (720p, 1080p).

Tiny Fluid Grid
Tiny Fluid Grid поможет вам создать свою собственную резиновую сетку из 12, 16 or 24 колонок, задать их максимальную и минимальную ширину и отступ в процентах.

mediaQuery Bookmarklet

 

 

Фреймворки для создания адаптивного тдизайна

Mobile Boilerplate
Вы получите кроссбраузерность для смартфонов и хорошую поддержку для старых BlackBerry, Symbian и IE Mobile.

320 and Up

Инструмент 320 and Up основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.

Gridless

Очень простой и прямолинейный, нет никаких предустановленных систем разметки или не-семантических классов. Является отправной точкой, его необходимо редактировать, настраивать и переписывать для удовлетворения своих требований.

Skeleton

12-ти колоночная разметка, 960px максимум, использует много медиа-запросов. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров

 

Bootstrap

Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

Less Framework 4

Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке. Также имеется генератор CSS.

Inuit.css

Основан на SASS, объектно-ориентированный.

Foundation 3

Flurid – The Fluid CSS Grid Framework

Гибкая верстка, позволяющая быстро располагать элементы на странице, многоуровневые колонки, может быть адаптирована под любой размер.

Адаптивные плагины

Overthrow

Создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах.

Isotope

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

Masonry

Плагин, реализующий на странице эффект движущейся плитки из блоков. Вы меняете размер экрана — блоки заполняют собой все доступное по ширине пространство.

TinyNav.Js 

TinyNav.js -легкий плагин, который позволяет преобразовать большие списки навигации в небольшие выпадающие меню для маленьких экранов. 

FitVids.Js

С помощью этого плагина вы можете делать видео адаптивным.

The Wookmark jQuery plugin

Wookmark — плагин для создания динамичного многоколоночного шаблона.

Тестеры и отладчики

ResizeMyBrowser

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

Responsivepx

C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в медиа запросах для создания адаптивного дизайна.

Responsive Design Testing

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

The Responsinator

The Responsinator покажет как выглядит компоновка вашего адаптивного сайта на популярных устройствах.

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

Screenqueri.es
Бесплатная утилита для тестирования адаптивного дизайна.  Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства  или установить границы окна просмотра.

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

Screenfly
Позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах.

Resizer
Resizer – это очень удобный букмарклет для тестирования адаптивных шаблонов в считанные клики.

Адаптивные слайдеры

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

Zimit Framework

Elastislide
Плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

ResponsiveSlides.Js

Самый простой плагин слайдера, который делает его адаптивным внутри одного контейнера.

 

По материалам: onextrapixel

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

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

• 50 ресурсов для веб-разработчиков за 2012 год 
• 50 полезных плагинов JQuery 2012 года



Комментарии