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

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

 

 

 

Style Tiles 

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

style-tiles

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

responsive-web-design-sketch-sheets

Responsive Wireframes

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

responsive-wireframes

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

multi-device-layout-patterns

Simple Device Diagram

simple-device-diagram

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

responsive-design-with-mockups

 

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

Responsive Images  

responsive-images

Adaptive Images

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

adaptive-images

Seamless Responsive Photo Grid

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

seamless-responsive-photo-grid

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

fit-text
Retina Images

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

retina-images

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

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

variable-grid-system

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

responsive-calculator

Gridpak 

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

grid-pak

Semantic Grid System 

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

semantic-grid-system

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

columnal-css-grid-system

Simple Grid

simple-grid

Golden Grid System

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

golden-grid-system

1140 CSS Grid

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

1140-css-grid

Susy

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

susy

Respond.js

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

respond-js

CSS3-Mediaqueries.js

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

css3-mediaqueries-js

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

adapt-js

Categorizr

categorizr

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

proto-fluid

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

tiny-fluid-grid

mediaQuery Bookmarklet

 

mediaquery-bookmarklet

 

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

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

mobile-boilerplate

320 and Up

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

320-and-up

Gridless

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

gridless

Skeleton

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

 

skeleton

Bootstrap

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

bootstrap

Less Framework 4

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

less-framework-4

Inuit.css

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

inuit-css

Foundation 3

foundation-3

Flurid – The Fluid CSS Grid Framework

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

flurid

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

Overthrow

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

overthrow

Isotope

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

isotope

Masonry

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

masonry

TinyNav.Js 

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

tiny-nav

FitVids.Js

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

fitvids

The Wookmark jQuery plugin

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

the-wookmark-jquery-plugin

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

ResizeMyBrowser

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

resize-my-browser

Responsivepx

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

responsivepx

Responsive Design Testing

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

responsive-design-testing

The Responsinator

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

the-responsinator

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

responsive-is

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

screenqueri-es

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

aptus

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

screenfly

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

resizer

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

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

blueberry

Zimit Framework

zimit-framework

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

elastislide

ResponsiveSlides.Js

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

responsive-slides

 

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

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