Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Система сеток с использованием Less

Некоторое время назад я уже писал про основы LESS. В этой записи пойдет речь о конкретном примере использования технологии с целью упрощения верстки проектов.

На данный момент для верстальщиков существует немалое количество CSS-библиотек, упрощающих процесс верстки. Самым популярным является всем известный фреймворк от создателей Twitter — Bootstrap.
Также всплывают в памяти Foundation framework от Mozilla и 960 Grid System.

Все они очень крутые, но, как правило, очень тяжелые для средне нагруженного проекта и содержат много лишних элементов.

Поэтому я решил написать свою систему сеток, чем-то похожую на 960 Grid System, но намного проще.

Как использовать?

Лучше всего изначально скомпилировать CSS из LESS, заранее указав необходимую ширину контейнера в переменной @desktop и желаемый отступ @margin. После этого, полученный файл стилей можно минимизировать, например, онлайн-сервисом CSS Compressor.

Теперь подключаем в <head> файл:

<link rel="stylesheet" href="grid.css"/>

Дополнительные стили

  1. .module блок с отступами
  2. .alpha и .beta нужны для обнуления отступов с левой и правой стороны блока соответственно
  3. .clear переход на новую строку

Пример блока

<div class="cell-1-2"><div class="alpha module">1/2</div></div>
<div class="cell-1-2"><div class="beta module">1/2</div></div>
<div class="clear"></div>

Вы скажете, что верстку можно было бы оптимизировать, используя всего один div с классами .cell-*-* и .module. И вы будете правы. Используя свойство CSS3 box-sizing, можно добиться уменьшения элементов в верстке. Правда, в таком случае этот модный вариант сломается в старых браузерах, которые не поддерживают CSS3.
В моем случае элементов на странице будет чуть больше, но это гарантирует кроссбраузерность, что немаловажно для моих проектов.

Код

Ниже приведены примеры html-страницы с сеткой и LESS-файл с сеткой.

Ещё