Адаптивный дизайн с каждым днем становится все более популярным. Такие сайты нацелены на широкую аудиторию, поскольку пользователи могут просматривать такие веб-сайты из различных устройств. Сегодня в этой подборке мы будем рассматривать полезные инструменты для создания адаптивных сайтов.
Инструмент для создания красивых заголовков, который включает наборы различных шрифтов и стилей.
Готовые решения для создания адаптивных сайтов.
Статья о шаблонах компоновки.
Здесь вы найдете библиотеку шаблонов вместе с учебником о создании вайрфпеймов.
Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.
Сетка из изображений, которую можно использовать как фоновое изображения и которая подстраивается под размеры экрана монитора.
Данный jQuery-плагин позволит вам изменять шрифт и быть при этом уверенным, что всё останется на своих местах, независимо от устройства или браузера. Таким образом можно достичь масштабируемых заголовков.
Этот инструмент поможет вам показать 2 бьольших изображения с высоком разрешением, оптимизированными под Retina в адаптивных веб-дизайнах.
Бесплатный генератор адаптивной css-сетки
С помощью этого калькулятора вы можете легко превратить ваш psd исходник в натуральный шаблон.
С помощью gridpak можно в несколько кликов сгенерировать модульную сетку и CSS-фреймворк для адаптивного дизайна вашего проекта.
Используется для создания «разумного» шаблона. Она использует такие расширения как LESS, SCSS или Stylus, чтобы сделать ваш сайт более эффективным.
Эта система сеток поможет создавать адаптивные макеты.
Сервис с помощью которого вы можете протестировать ваш сайта используя сетку из 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).
Это очень маленький (> 12 Columns
. Приведенный ниже код представляет собой содержимое раздела Grid >> 12 Columns
:
Container_12 .grid_1 { width:6.333%; } .container_12 .grid_2 { width:14.667%; } .container_12 .grid_3 { width:23.0%; } .container_12 .grid_4 { width:31.333%; } .container_12 .grid_5 { width:39.667%; } .container_12 .grid_6 { width:48.0%; } .container_12 .grid_7 { width:56.333%; } .container_12 .grid_8 { width:64.667%; } .container_12 .grid_9 { width:73.0%; } .container_12 .grid_10 { width:81.333%; } .container_12 .grid_11 { width:89.667%; } .container_12 .grid_12 { width:98.0%; }
container_12 — это главный контейнер. Каждый элемент нашего дизайна должен находиться внутри контейнера с классом container_12 . На основе процентных соотношений устанавливаются классы .grid_1 , .grid_2 … .grid_n . Плавающие сетки строятся с использованием столбцов, которые рассматриваются, как плавающие столбцы. Когда изменяется размер экрана, ширина этих столбцов будет регулироваться пропорционально размерам родительского контейнера.
В нашей сетке есть 12 плавающих столбцов. Рассмотрим, как столбцы располагаются в макете резиновой верстки (пример ):
Код для данного раздела приводится ниже. Для получения дополнительной информации вы можете посмотреть загруженные файлы:
Fluid Grid with Fluid Columns 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2
Каждый набор компонентов содержится внутри элемента с классом container_12 . Внутри контейнера мы можем использовать для создания плавающего столбца с определенной шириной класс grid_n . С помощью класса grid_1 мы можем получить столбец в 1/12 ширины исходной сетки, с помощью grid_2 — в 2/12 .
Вы можете загрузить демо-версию и изменить размер окна браузера, чтобы увидеть сетки с плавающими столбцами в действии.
Вложенные плавающие столбцыЕсли вы используете в html верстку резиновую с помощью CSS-фреймворков , то создавать сетки с плавающими столбцами несложно. Но не все проекты будут настолько простыми, как приведенный выше макет. Возможно, вам потребуется создать столбцы и строки внутри других элементов. Столбцы, содержащиеся в родительском столбце, называются вложенными столбцами. Давайте посмотрим, как создать вложенные плавающие столбцы с помощью файла CSS , который мы сгенерировали ранее.
Посмотреть демо-версию
Приведенный выше макет содержит две строки. Первая строка разделена на две секции из шести столбцов, и каждая из двух секций снова разделена на четыре секции из трех столбцов.
Аналогично вторая строка разделена на три секции из четырех столбцов, и каждая из трех секций также разделена на три секции из четырех столбцов. Таким образом, в сетках создаются вложенные столбцы. Давайте рассмотрим код приведенного выше макета:
Nested Fluid Columns 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 4 4
Сначала мы создаем основные контейнеры и столбцы, как мы это делали в предыдущем разделе. Внутри столбца нам нужно создать еще один контейнер с классом container_12 для вложенных столбцов. Теперь мы получаем еще 12 столбцов внутри основных шести. Затем двенадцать подстолбцов можно разделять по необходимости.
Конструкция в основе плавающей сеткиБольшинство начинающих дизайнеров думает, что использование CSS-фреймворка сделает макет адаптивным. К сожалению, создать резиновую верстку не так просто. Плавающие сетки будут адаптироваться к изменению окна браузера или устройства. Если вы тщательно не спланируете дизайн, у пользователей будут проблемы при просмотре контента на небольших устройствах.
Рассмотрим приведенный ниже экран:
Таким образом, плавающая сетка, рассмотренная в предыдущих разделах, будет отображаться на маленьких экранах. Это только столбцы сетки без соответствующих данных. Даже в этом случае число 1 не отображается надлежащим образом. Когда дело дойдет до вывода контента, это будет полный беспорядок. В этом случае нам нужно настроить ширину столбцов.
Вы можете использовать медиа-запросы CSS , чтобы настроить ширину столбцов для разных размеров экрана в резиновой верстке сайта. В приведенном выше сценарии можно удвоить ширину столбца и получить 6 столбцов вместо 12, чтобы обеспечить лучшую читаемость контента. Поэтому в адаптивных конструкциях не все зависит от плавающей сетки.
Тестирование плавающих сетокТеперь, когда мы рассмотрели основы построения плавающих сеток, перейдем к созданию простой демо-версии с использованием JQuery , чтобы протестировать плавающую сетку на различных размерах экрана. Сначала создадим макет страницы и панель навигации:
Fluid Grid Tester Монитор Планшет альбомная ориентация Планшет портретная ориентация Смартфон альбомная ориентация Смартфон портретная ориентация
Тестовая страница имеет базовый HTML-макет с JQuery . Элемент с ID device_panel будет содержать панель навигации для стандартных устройств: стационарные компьютеры, смартфоны и планшеты. После нажатия на ссылку будет вызываться функция changeGrid с типом устройства в качестве параметра.
В нижней части мы имеем iframe , который будет использоваться для загрузки плавающей сетки резиновой верстки CSS . Она находится в файле media_query.html . Теперь давайте посмотрим на функцию changeGrid .
