Адаптивная вёрстка · RGS

Скриншот адаптивной вёрстки RGS

Адаптивная вёрстка - Responsive Grid System создаёт интуитивный макет, который разделяется на столбцы, способный создавать 12, 16 и 24 горизонтальных колонок, располагающихся вертикально при переходе на малые разрешения.

Установка и применение вёрстки RGS

Существует 3 варианта построения адаптивного шаблона используя бесплатную вёрстку RGS, разделяющую блоки на двенадцать, шестнадцать и двадцать четыре независимых друг от друга колонки. Вы можете подключить один из файлов стилей и скрипт управления в зону <head> страниц с адаптивной вёрсткой.

Подключение вёрстки RGS

Если Ваш макет будет состоять из 12 горизонтальных секций, подключите файл responsive.gs.12col.css для 16 responsive.gs.16col.css и файл стилей responsive.gs.24col.css для формирования 24 колоночной сетки, файлы подключаются в style.css через свойство @import url("responsive.gs.12col.css");. Дополнительно, для браузеров IE6 и IE7 нужно подключить файл boxsizing.htc, для корректной работы свойства CSS со значением box-sizing: border-box; и прописать его установочный путь в файле responsive.gs.12-16-24col.css используя свойство behavior: url(boxsizing.htc);. Файл сброса reset.css подключен через свойство @import url("reset.css"); в файле style.css.

<link rel="stylesheet" media="all" href="//atmpl.ru/design/responsive-grid/2014/rgs/style.css" />
<script src="//atmpl.ru/design/responsive-grid/2014/rgs/respond.min.js"></script>

Служебные классы вёрстки RGS

Применение классов зависит от цели дизайна шаблона, используйте по необходимости в отдельности, или комбинируйте по нескольку классов одновременно.

class="container"
Основной класс в вёрстке страницы, содержит блоки разметки и устанавливает общую ширину макета.
class="row"
Устанавливает ширину блока в состояние 100% ширины.
class="row gutters"
Создаёт разделение блоков.
class="col span_ЧИСЛО"
Определяет ширину блока исходя из совокупности 12, 16 и 24 возможных комбинаций.
class="clr"
Метод clearfix разделяющий плавающих потомков.

Пример применения вёрстки RGS

Используется простейший способ создания макета вёрстки, Вы можете вносить изменения в поле редактора, нажмите на кнопку выполнения чтобы увидеть результат.

Скачать файлы вёрстки RGS

Скачать вёрстку

Рейтинг: 4.7/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-11-2014 Михаил Меренков aTmpl © 1086 0 адаптивная вёрстка, responsive grid