Пропорциональная модульная сетка

При работе над адаптивным дизайном всегда возникает вопрос с гибкими сетками. Очевидно, что если размер экрана становится больше, шаблон должен изменяться. Как это сделать наилучшим образом?

 

Проблема

Множество решений, используемых на текущий момент, содержат громоздкий код для переопределения свойств CSS в точках излома. Особенно актуальным такой подход становится при использовании полей, выраженных в процентах – 10% для мобильного устройства существенно меньше, чем  10% для монитора. Вложенные колонки также трудно реализовать, так как придется провести ряд вычислений чтобы выровнять поля. Процесс несколько упрощается при использовании препроцессора Less и Sass, которые делают вычисления для вас, но использование цифр может утомить.

 

Решение

Воспользуемся свойством CSS box-sizing для решения, которое позволит использовать фиксированные поля (ems/rems) вместе с резиновыми колонками. Расстояние между колонками будет оставаться идентичным точке излома в соответствии с базой font-size.

Колонки, которые определяются пропорционально (например, одна вторая, две третьих) могут использоваться столько раз, сколько нужно, даже для вложенных схем.

 

Как работает решение

В решении нет класса class="first" для добавления  к колонке, так как поле для первой колонки имеет отрицательное значение:

.grid-wrap {    
    margin-left: -3em; /* такое же как и поле */
    overflow: hidden;
    clear: both; }
   
.grid-col {
    float: left;
    padding-left: 3em; /* поле между двумя колонками */
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; }

Классы, которые используются для каждой колонки для определения пропорций, устанавливаются для каждой точки излома:

<div class="grid-wrap">
    <div class="grid-col bp1-col-one-half bp2-col-two-thirds">
        <p>Колонка 1</p>
    </div>
    <div class="grid-col bp1-col-one-half bp2-col-one-third">
        <p>Колонка 2</p>
    </div>
</div>

В данном примере каждая колонка grid-col начинает использоваться как единственная колонка. Класс bp1-col-one-half означает, что колонка становится половинкой в точке излома 1. Класс bp2-col-two-thirds означает, что колонка станет шириной две трети в точке излома 2. И так далее.

Все просто, одна система модульной сетки, один набор классов для всех случаев!

bp2-col просто префикс в точке излома. Можно использовать что угодно, но номер точки излома более нагляден для разработчика, чем имя устройства, например tablet-col.

Internet Explorer

Очевидно, что IE8 и старше не поддерживает @media, а IE7 и старше не поддерживает box-sizing. Но в комплект исходников входит специальная таблица стилей для IE, в которой повторяется содержание медиа запросов (для IE8) и немного модифицируется сетка для IE7 и страше. Оба варианта имеют фиксированную ширину 960px, так как браузеры используются на десктопах.

 

Что включено в пример

Пример состоит из шести частей с разной конфигурацией сетки, включая блочный вариант и маленькие поля (только добавление одного класса к .grid-wrap). Файлы SASS облегчают компиляцию вашей собственной сетки с помощью изменения одного макроса для точки излома.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/6GnOFEyrl0Y/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Пропорциональная модульная сетка | | 2012-09-04 14:09:28 | | Статьи Web-мастеру | | При работе над адаптивным дизайном всегда возникает вопрос с гибкими сетками. Очевидно, что если размер экрана становится больше, шаблон должен изменяться. Как это сделать наилучшим образом | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: