Саша Бизиков

В Москве на самоизоляции

Система сеток с использованием 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-файл с сеткой.

,

Веду аудиодневник с наблюдениями на темы дизайна, саморазвития и в целом, отношения к жизни.

В третьем сезоне учусь рассказывать истории, разбираюсь в том, что такое счастье и ищу умиротворения. Когда сам не могу разобраться в теме, то зову эксперта. Подписывайтесь на подкаст, чтобы не пропустить новые выпуски.

Нет комментариев

Написать комментарий

Ещё заметки

Прошёл курс «iOS-программирование для дизайнеров»

С 4 по 13 июля я проходил «iOS-программирование для дизайнеров» — это курс для дизайнеров, которые хотят разобраться в том, из чего состоит разработка мобильного приложения для айфона. В заметке рассказываю, чему научился.

Правильный перенос сайта Вордпрес на новый домен

Рассказываю как правильно перенести сайт на WordPress на новый домен с помощью Search Replace DB.

Перенос записей в WordPress

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Двухфакторная аутентификация в WordPress

Если у вас есть сайт или блог на WordPress, то его можно обезопасить от взлома. Один из таких способов повышения безопасности сайта — настройка двухфакторной аутентификации.

Что выбрать: Jekyll или WordPress?

Целый год мой блог работал на Jekyll и размещался на GitHub. Месяц назад вернулся обратно к WordPress и в заметке расскажу почему.

IBM Process Designer 8.5: чтение и запись данных в Coach View

Показать скрытые файлы в Mac OS X

Как перевести тему WordPress на русский язык

В большинстве тем для WordPress присутствует папка languages, которая позволяет перевести на необходимый язык весь её интерфейс. Перевод заключается в редактировании .po-файла. В заметке рассказываю как перевести тему WordPress на русский язык.

Оптимизация сайта: включаем gzip-сжатие

Меняем фон верхней панели браузера

Страница в Sharepoint 2013 c областями для веб-частей

Мне тут по работе довелось верстать под Sharepoint 2013. Многие вещи оказались для меня далеко не тривиальными. Поэтому свой опыт хочу задокументировать в виде статьи, где опишу процесс создания .aspx-страницы с зонами для вставки веб-частей.

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin.

Полезные ресурсы по Sharepoint

В этой заметке собирал ссылки на различные статьи, видео с конференций, тренинги и туториалы по брендингу Sharepoint.

Работаем с куками через JavaScript

Рассказываю как записывать и считывать значения из куки.

Что такое LESS и как его использовать

Коротко рассказываю о том, что такое LESS и как его использовать.

Бесплатный хостинг на Гитхаб

Перенос Вордпрес на новый домен

Описываю как правильно выполнить перенос сайта на WordPress.

Установка и настройка Git

Описываю по шагам как установить Git к себе на компьютер.

Отключить топик-ссылки и фотосеты в LiveStreet

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

Настройка виртуального сервера для работы с LiveStreet

Мне необходимо было перейти на выделенный сервер, где будет работать сайт на LiveStreet. Настраивал сервер впервые, узнал много нового. В заметке опишу основные этапы настройки.

Настройка файла .htaccess после установки LiveStreet

Решение ошибки когда главная страница работает, а при переходе на любую другую — получаю 404 ошибку.