Система сеток с использованием LESS
Некоторое время назад я уже писал про основы LESS. В этой записи пойдет речь о конкретном примере использования технологии с целью упрощения верстки проектов.
На данный момент для верстальщиков существует немалое количество CSS-библиотек, упрощающих процесс верстки. Самым популярным является всем известный фреймворк от создателей Twitter — Bootstrap. Также всплывают в памяти Foundation framework от Mozilla и 960 Grid System.
Все они очень крутые, но, как правило, очень тяжелые для средне нагруженного проекта и содержат много лишних элементов.
Поэтому я решил написать свою систему сеток, чем-то похожую на 960 Grid System, но намного проще.
Как использовать?
Лучше всего изначально скомпилировать CSS из LESS, заранее указав необходимую ширину контейнера в переменной @desktop и желаемый отступ @margin. После этого, полученный файл стилей можно минимизировать, например, онлайн-сервисом CSS Compressor.
Теперь подключаем в <head> файл:
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"grid.css"</span><span class="nt">/></span>Дополнительные стили
.moduleблок с отступами.alphaи.betaнужны для обнуления отступов с левой и правой стороны блока соответственно.clearпереход на новую строку
Пример блока
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cell-1-2"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"alpha module"</span><span class="nt">></span>1/2<span class="nt"></div></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"cell-1-2"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"beta module"</span><span class="nt">></span>1/2<span class="nt"></div></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"clear"</span><span class="nt">></div></span>Вы скажете, что верстку можно было бы оптимизировать, используя всего один div с классами .cell-*-* и .module. И вы будете правы. Используя свойство CSS3 box-sizing, можно добиться уменьшения элементов в верстке. Правда, в таком случае этот модный вариант сломается в старых браузерах, которые не поддерживают CSS3.
В моем случае элементов на странице будет чуть больше, но это гарантирует кроссбраузерность, что немаловажно для моих проектов.
Код
Ниже приведены примеры html-страницы с сеткой и LESS-файл с сеткой.