50 полезных адаптивных инструментов веб-дизайна для дизайнеров
За последние несколько дней мы показали вам одни из лучших адаптивных тем WordPress и Joomla, которые вы можете загрузить и использовать на своем сайте. Сегодня мы собираемся дать вам инструменты. Мы рассматриваем фреймворки, сервисы и скрипты для скачивания, и мы думаем, что они окажут большую помощь, когда дело доходит до адаптивной веб-разработки..
Чтобы упростить просмотр всего списка инструментов, мы разбили их на следующие разделы:
- Сетка и Каркасы
- Эскиз листы и каркасы
- JavaScript & JQuery плагины
- Тестирование и предварительный просмотр
- Слайдеры
- другие
Сетка и Каркасы
[Вернуться к началу]
Columnal
Columnal - это проект Pulp + Pixels, который был заимствован из cssgrid.net, а некоторые примеры кода взяты из 960.gs. Columnal очень помогает вам в адаптивном веб-дизайне, делая гибкие сетки для динамического изменения при изменении размера окна браузера..
остов
Skeleton - это простой и мощный CSS-фреймворк, который в основном нравится разработчикам и дизайнерам за его простоту и эффективность. Здесь нет ничего сложного с Javascript, только хороший и чистый CSS с чистой документацией.
LessFramework 4
Less Framework - это более или менее платформа, во имя ее создателя. Это адаптивная сеточная система CSS, основанная на использовании встроенных медиазапросов CSS, которая значительно упрощает разработку адаптивных веб-сайтов..
Семантическая Сетка
Semantic Grid System используется для разработки адаптивных макетов сетки. Он использует предварительно обработанные расширения CSS, такие как LESS, SCSS или Stylus, чтобы обеспечить максимальную эффективность. Вы можете выбрать ширину столбца и желоба, выбрать количество столбцов и переключаться между пикселями и процентами.
Золотая сетка
Golden Grid System - это система с жидкой сеткой, которая служит отправной точкой вашего адаптивного веб-дизайна. Это позволяет веб-сайту отображать красивые страницы размером от 240 до 2560 пикселей..
320 и выше
320 и выше - это шаблон CSS медиа-запросов, который служит стартовым шаблоном для вашего адаптивного дизайна. Это следует полностью противоположному подходу, чем несколько других доступных шаблонов.
Inuit.css
Inuit.css - это фреймворк CSS, который чрезвычайно прост в использовании даже для новичков. Он имеет минималистский подход, поэтому вам нужно иметь дело только с необходимыми вещами, но при необходимости его можно расширить с помощью нескольких доступных плагинов..
бессеточного
Gridless - это шаблон для создания адаптивных и кроссбраузерных веб-сайтов с красивой типографикой. Этот инструмент ориентирован на прогрессивное развитие проекта, и он служит отправной точкой любого дизайна.
1140 CSS Grid
1140 CSS Grid - это отличная система CSS-сетки, разработанная дизайнером из Мельбурна Энди Тейлором, которая позволяет вашему дизайну идеально вписаться в 1140 пикселей для больших мониторов, а гибкий дизайн легко адаптируется к другим меньшим разрешениям с минимальными затратами труда..
1KBCSSGrid
CSS Grid размером 1 КБ, разработанный Тайлером Тейтом, является простым и легким генератором CSS Grid. Это позволит вам установить количество столбцов, ширину столбцов и ширину желоба, и вы можете получить загружаемый CSS для сетки ваших сайтов..
начальная загрузка
Bootstrap, созданный и поддерживаемый Марком Отто и Джейкобом Торнтоном в Twitter, представляет собой превосходный набор элементов пользовательского интерфейса, макетов и инструментов javascript, которые можно бесплатно загрузить и использовать в своих проектах веб-дизайна..
Жидкий калькулятор сетки
Этот простой инструмент поможет вам быстро освоить CSS вашего веб-дизайна..
Жидкостные Сетки
Fluid Grid - это простая, но полезная инфраструктура Fluid Grid, которая создает адаптивные макеты на основе 6, 7, 8, 9, 10, 12 или 16 столбцов..
Flurid
Flurid - это простой и очень полезный кросс-браузерный CSS-фреймворк с 16 столбцами. Более того, он не скрывает пиксели в полях.
Gridset
Gridset - это инструмент для создания сеток любого типа, таких как столбчатые, асимметричные, фиксированные, пропорции, составные, адаптивные и другие. Этот инструмент от Mark Boulton все еще находится в бета-версии, но оказывается многообещающим. И я уже упоминал, использовать его так же просто, как встраивание ссылки.
Gridpak
Gridpak - это интерактивный генератор сетки, в котором можно изменить количество столбцов, отступов и желобов, а также добавить собственные точки останова. CSS генерируется инструментом и готов к загрузке. Он также предоставляет шаблоны сетки PNG, которые можно использовать для целей проектирования в Photoshop..
SimpleGrid
SimpleGrid, разработанный Michael Kuhn, представляет собой очень простую и понятную структуру CSS для создания бесконечных макетов на основе сетки. По умолчанию SimpleGrid подготовлен для 4 различных диапазонов размеров экрана.
Сюзи
Сьюзи от Oddbird, в действии похожа на семантическую сетку. Он не использует никакой дополнительной разметки или каких-либо других специальных классов, но предназначен только для пользователей Saas и его расширения Compass..
Крошечная Жидкая Сетка
Tiny Fluid Grid - это замечательное веб-приложение, которое может помочь вам определить систему сетки вашего сайта в интерактивном режиме. Вы можете установить количество столбцов, процент желоба, минимальную и максимальную ширину макета вашего сайта, и можете получить для него загружаемый CSS.
Система переменной сетки
Система Variable Grid разработана и разработана SprySoft и основана на 960 Grid System. Это позволяет разработчикам и дизайнерам сгенерировать пользовательскую сетку и затем загрузить сопровождающий файл CSS на основе этой сетки..
Эскиз листы и каркасы
[Вернуться к началу]
Адаптивные листы эскиза веб-дизайна
Этот инструмент полезен для определения местоположения различных элементов в макете вашего сайта на разных устройствах. С помощью этого устройства вы можете составить представление о том, где разместить необходимые элементы сайта для разных размеров экрана и разрешений..
Адаптивные Каркасы
Responsive Wireframes - экспериментальный инструмент, созданный Джеймсом Меллерсом из Adobe. Он построен только на HTML и CSS (изображения и JS не использовались), которые вы можете использовать для визуализации того, как ваш адаптивный дизайн будет выглядеть в реальных браузерах различных настольных компьютеров и мобильных устройств..
StyleTiles
Style Tiles дает вам возможность выработать представление о том, как будет выглядеть веб-сайт, независимо от сложных стилей, которые вступают в игру. Это дает вам возможность идеально адаптивного рабочего процесса проектирования, а также возможность интегрировать отзывы клиентов.
JavaScript & JQuery плагины
[Вернуться к началу]
Adapt.Js
Adapt.js - это решение Javascript и отличная альтернатива медиазапросам CSS. Использование подхода @media является хорошей практикой, но это работает не для всех браузеров. Натан Смит, создатель 960 Grid System, выпустил Adapt.js, очень легкую библиотеку JavaScript, чтобы решить эту проблему.
Изотоп
Isotope - удивительный плагин jQuery, который оказывается очень полезным при разработке адаптивного дизайна. Это не только помогает переставить элементы страницы при изменении размера окна браузера или уменьшении размера экрана, но также помогает отфильтровать эти элементы.
Кирпичная кладка
Masonry - отличный плагин jQuery, который используется для создания динамических и адаптивных макетов. Этот плагин помогает упорядочить элементы в вашем адаптивном дизайне, чтобы они лучше подходили к открытым местам на сетке..
Respond.js
Respond.js - это быстрый и легкий скрипт (уменьшенный до 3 Кб и сжатый по 1 Кб), основной целью которого является создание адаптивного веб-дизайна для тех, кто не поддерживает CSS3 Media Queries, например браузеры IE.
TinyNav.js
TinyNav.js - это небольшой и легкий плагин jQuery, всего 362 байта, который преобразует большие навигационные списки в маленькие выпадающие меню для небольших экранов..
Wookmark JQuery плагин
Wookmark - это плагин jQuery, который определяет размер окна браузера и автоматически размещает элементы страницы в столбцы. Вы также можете увидеть предварительный просмотр в нижней части самой страницы.
Тестирование и предварительный просмотр
[Вернуться к началу]
ProtoFluid
ProtoFluid - это инструмент для создания прототипов, основанный на веб-технологиях, который позволяет тестировать прототипы веб-сайтов на экранах различных размеров и разрешений. Просто введите URL-адрес, выберите устройство (или любые другие размеры) и нажмите кнопку запуска. Так как это веб-инструмент, он также позволяет вам использовать другие расширения, такие как FireBug.
Responsive.Is
Responsive.Is создан TypeCast - еще одним инструментом эмулятора браузера, который вы можете использовать для тестирования адаптивного дизайна. Просто введите URL-адрес, и он автоматически изменит свой размер в зависимости от выбранного устройства.
Responsivepx.Com
ResponsivePx - это замечательный инструмент для тестирования вашего адаптивного дизайна сайта. Главной особенностью, которая отличает его от других, является его способность изменять размер сайта пиксель за пикселем. Эта потрясающая функция позволит вам определить точки останова, а также протестировать, как медиа-запросы CSS работают на вашем сайте..
Отзывчивый инструмент для тестирования веб-дизайна
Потрясающий инструмент для тестирования, который позволяет вам одновременно просматривать на одном экране свой адаптивный веб-сайт с экранами разных размеров при создании или дизайне. Мне нравится этот инструмент в основном потому, что он показывает все разрешения экрана рядом, что облегчает отладку.
ReView.Js
ReView - это динамическая система просмотра, разработанная на чистом JavaScript, которая дает вам фантастический опыт просмотра для вашего адаптивного веб-дизайна..
Screenfly
Screenfly от QuirkTools, это удивительный инструмент, который позволит вам просматривать ваш отзывчивый веб-сайт на различных устройствах: настольных компьютерах, планшетах, мобильных устройствах и телевизорах. Он также имеет опции для включения или отключения прокрутки или даже для поворота дисплея.
Screenqueri.es
Screenqueri.es - инструмент тестирования адаптивного дизайна, идеально подходящий для пикселей. Просто введите любой адрес веб-сайта, который вы хотите проверить, и этот инструмент покажет веб-сайт в различных размерах экрана в зависимости от устройства. Вы также можете вручную изменить размер пикселя за пикселем, чтобы определить точки останова.
Ответчик
Протестируйте свой сайт на различных устройствах от iPhone и iPad, до Kindle и на Android на Responsinator. Он также показывает ваш сайт как в портретном и ландшафтном режиме. Мне больше нравится этот инструмент из-за контуров устройств, отображаемых на странице, что придает больше значения всему процессу.
Слайдеры
[Вернуться к началу]
черника
Blueberry - это фантастический слайдер изображений jQuery с открытым исходным кодом, который специально разработан для плавных или адаптивных макетов..
Elastislide
Хотите карусель, которая будет автоматически приспосабливаться к размеру экрана, когда размер окна браузера изменяется или когда вы находитесь на меньшем экране? Elastislide - наиболее подходящий плагин jQuery для ваших нужд.
Отзывчивый слайдер CSS3
Это чисто адаптивный слайдер CSS3, который может легко адаптироваться к любому размеру экрана и разрешению экрана. Хорошая вещь об этом слайдере состоит в том, что стрелки входят в коробку, когда размер экрана устройства достаточно мал. JavaScript не требуется.
ResponsiveSlides.Js
ResponsiveSlides.Js - это очень простой и чрезвычайно легкий (всего 1 КБ) плагин jQuery, который создает адаптивный слайдер с использованием неупорядоченных списков. Он работает в широком диапазоне браузеров, в том числе в IE6 и более поздних версиях..
другие
[Вернуться к началу]
Адаптивные изображения
Adaptive Images - это онлайн-инструмент для адаптивного веб-дизайна, который определяет размер экрана посетителей и создает, кэширует и доставляет масштабированные изображения в зависимости от размера экрана и разрешения..
FitText.Js
FitText.js - это небольшой инструмент javascript, который позволяет автоматически изменять размер текста и заголовков при изменении размера окна браузера. Больше не нужно беспокоиться о несоответствии размера текста с этим инструментом на борту.
FitVid.Js
Хотите изменить масштаб встроенного видео, когда размер окна браузера изменяется или устройство имеет меньшее разрешение? FitVid.Js может помочь вам достичь этого. Это легкий, простой и легкий в использовании плагин jQuery, используемый для достижения встроенных видео с изменяемой шириной.
Сетчатки Изображения
Retina Images - это отличное решение для JavaScript, которое автоматически подает в 2 раза большие изображения высокого разрешения при просмотре на дисплее Retina. Все, что вам нужно сделать, это поместить версию с высоким разрешением для каждого отдельного изображения, и оно будет управлять остальными.
Бесшовные Отзывчивый Фотосетка
Бесшовная Отзывчивая Фотосетка отображает изображения в браузере по краям без каких-либо промежутков между изображениями. Фотографии выложены плиткой, и они текут слева направо по всей странице в столбцах. Количество столбцов корректируется соответственно при изменении размера окна браузера.
SlabText
SlabText - это плагин или инструмент jQuery от Brian McAllister, основанный на алгоритме slabText, который разбивает заголовки на строки перед изменением размера каждой строки, чтобы заполнить доступное пространство. Это очень похоже на плагин FitText.Js в действии.
Zurb - ResponsiveTables
Задумывались ли вы, как работать с таблицами больших данных в адаптивном дизайне? Zurb, CSS / JS комбо дает вам ответ; он берет таблицы данных и модифицирует их так, чтобы они не нарушали адаптивный макет на устройствах с меньшим экраном.
Categorizr
Категоризр - это очень маленький PHP-скрипт, предоставляющий вашим посетителям более целенаправленный веб-опыт. Это поможет вам создать дизайн устройства для планшета, телевизора, мобильного или настольного компьютера..
Media Query Bookmarklet
Media Query Bookmarklet показывает, какой размер имеет текущий видовой экран и какой медиа-запрос был запущен для него.
Отзывчивый калькулятор
Responsive Calculator - очень простой онлайн-инструмент, который может помочь вам превратить пиксели в проценты при разработке адаптивного веб-сайта..
На следующей неделе
На второй неделе этой серии мы будем обучать вас учебникам, которые действительно помогут вам освоить адаптивный веб-дизайн (RWD)..
Не пропустите.
