Содержание
Адаптивный дизайн с каждым днем становится все более популярным. Такие сайты нацелены на широкую аудиторию, поскольку пользователи могут просматривать такие веб-сайты из различных устройств. Сегодня в этой подборке мы будем рассматривать полезные инструменты для создания адаптивный сайтов.
Style Tiles — инструмент для создания красивых заголовков, который включает наборы различных шрифтов и стилей.
Responsive Web Design Sketch Sheets
Этот набор поможет вам в планировании изменений различных элементов разных размеров.
Готовые решения для создания адаптивных сайтов.
Multi-Device Layout Patterns
Статья о шаблонах компоновки.
Responsive Design with Mockups
Здесь вы найдете библиотеку шаблонов вместе с учебником о создании вайрфпеймов.
Инструменты для адаптивных изображений и текста
Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.
Seamless Responsive Photo Grid
Сетка из изображений, которую можно использовать как фоновое изображения и которая подстраивается под размеры экрана монитора.
FitText
Данный jQuery-плагин позволит вам изменять шрифт и быть при этом уверенным, что всё останется на своих местах, независимо от устройства или браузера. Таким образом можно достичь масштабируемых заголовков.
Этот инструмент поможет вам показать 2 бьольших изображения с высоком разрешением, оптимизированными под Retina в адаптивных веб-дизайнах.
Гибкие сетки и медиа-запросы
Variable Grid System
Бесплатный генератор адаптивной css-сетки
Responsive Calculator
С помощью этого калькулятора вы можете легко превратить ваш psd исходник в натуральный шаблон.
С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.
Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.
Columnal CSS Grid System
Эта система сеток поможет создавать адаптивные макеты.
Сервис с помощью которого вы можете протестировать ваш сайта используя сетку из 18 столбцов.
Оптимизирована для работы на экранах от размера мобильных устройств до мониторов 1280px в ширину. Это простая и гибкая сетка, которая использует Media Queries.
Очень простой процесс установки и настройки, изменяемая ширина колонок и отступов, любое количество колонок. Также есть возможность перехода на 1140px разметку.
Это быстрый и малый по объему Polyfill (фрагмент кода, добавляющий неподдерживаемый браузером функционал) создан Scott Jehl для поддержки свойств min-width и max-width из CSS3 Media Queries в IE6-IE8 и выше.
Библиотека css3 mediaqueries.js добавит поддержку CSS3 медиа-запросов в старые броузеры (IE 5+, Firefox 1+, Safari 2).
Adapt.js
Это очень маленький (<1 кб) javascript-файл, который может загружать определенные CSS-файлы в зависимости от ширины веб-страниц. Перед тем, как браузер полностью загрузит страницу, плагин проверяет ширину дисплея и автоматически определяет, какой CSS-файл нужно загрузить.
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 основан на принципе mobile first (сначала мобильные устройства), при котором дизайн создается сначала для экранов мобильных устройств, а затем расширяется для планшетов, настольных ПК и больших экранов. Он хорошо работает как в качестве дополнения к HTML5 boilerplate, так и отдельно.
Очень простой и прямолинейный, нет никаких предустановленных систем разметки или не-семантических классов. Является отправной точкой, его необходимо редактировать, настраивать и переписывать для удовлетворения своих требований.
12-ти колоночная разметка, 960px максимум, использует много медиа-запросов. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильные версии браузеров
Это интерфейсный набор инструментов для быстрой разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.
Less Framework 4 содержит 4 верстки и три набора типографики, все это основано на одной сетке. Также имеется генератор CSS.
Inuit.css
Основан на SASS, объектно-ориентированный.
Flurid – The Fluid CSS Grid Framework
Гибкая верстка, позволяющая быстро располагать элементы на странице, многоуровневые колонки, может быть адаптирована под любой размер.
Адаптивные плагины
Overthrow
Создание надежного метода безопасного использования CSS overflow в адаптивных дизайнах, поддержка polyfill в неродных средах.
Плагин Isotope позволяет менять всю сетку размещения блоков на странице в зависимости от разрешения экрана. Это плагин содержит возможности фильтрации и сортировки, которые позволят вам обеспечить расположение элементов на вашем сайте в соответствии с собственными пожеланиями. Перемещение блоков при изменении ширины страницы сопровождается приятной анимацией.
Плагин, реализующий на странице эффект движущейся плитки из блоков. Вы меняете размер экрана — блоки заполняют собой все доступное по ширине пространство.
TinyNav.js -легкий плагин, который позволяет преобразовать большие списки навигации в небольшие выпадающие меню для маленьких экранов.
С помощью этого плагина вы можете делать видео адаптивным.
Wookmark — плагин для создания динамичного многоколоночного шаблона.
Тестеры и отладчики
Помогает изменять размер окно браузера. Вам просто нужно будет кликнуть на указатель размера, в котором вы хотели бы увидеть свой сайт.
C помощью Responsivepx можно не только проверить свой сайт (даже локально), но и получить рекомендации, которые можно использовать в медиа запросах для создания адаптивного дизайна.
Этот инструмент предназначен для всех, кому нужен быстрый и простой способ проверить созданный сайт при различной ширине экрана. Проверить сайт можно как онлайн, так и скачав код с Github.
The Responsinator покажет как выглядит компоновка вашего адаптивного сайта на популярных устройствах.
Responsive.is
Нужно просто ввести адрес вашего сайта и посмотреть, как он будет отображаться на различных устройствах.
Screenqueri.es
Бесплатная утилита для тестирования адаптивного дизайна. Для проверки шаблона нужно ввести URL сайта , выбрать тип мобильного устройства или установить границы окна просмотра.
Aptus
С помощью этого инструмента вы можете легко просматривать, изменять и делать скриншот вашего адаптивного сайта.
Screenfly
Позволит посмотреть, как примерно выглядит ваш сайт на популярных устройствах.
Resizer
Resizer – это очень удобный букмарклет для тестирования адаптивных шаблонов в считанные клики.
Адаптивные слайдеры
Blueberry
Плагин Blueberry организует приятную и лаконичную галерею изображений, которая подстраивается под размеры родительского элемента.
Elastislide
Плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.
Самый простой плагин слайдера, который делает его адаптивным внутри одного контейнера.
По материалам: onextrapixel
Перевод — Дежурка
