Система сеток с использованием 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"/>Дополнительные стили
.moduleблок с отступами.alphaи.betaнужны для обнуления отступов с левой и правой стороны блока соответственно.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-файл с сеткой.