Установка и применение вёрстки 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
Используется простейший способ создания макета вёрстки, Вы можете вносить изменения в поле редактора, нажмите на кнопку выполнения чтобы увидеть результат.