Макет страницы, созданный на чистых CSS переменных

Макет страницы, созданный на чистых CSS переменных

От автора: CSS фреймворки это, конечно, хорошо, но… За последние годы мы работали с различными фреймворками. С их помощью мы создавали базовые макеты и темы для своих проектов. Так называемые «макеты» зачастую хорошо детализированы и прилично весят.

Фреймворки созданы, чтобы ускорять процесс разработки, обеспечивая при этом наилучшую совместимость. Основной минус – большой код. Так как фреймворки часто имеют модульную структуру и множество настроек, интеграция может отнять больше времени, чем вы ожидали. Если вы захотите кастомизировать фреймворк или вырезать из него какую-то часть, придется также попотеть.

Кто до сих пор использует bootstrap?

К счастью, множество разработчиков начали писать свои собственные шаблоны. В основе некоторых шаблонов лежат популярные фреймворки, другие написаны с нуля. Но зачастую у них есть одна общая черта. Фреймворки подгружают статический CSS, а для смены атрибутов нужен препроцессор.

Простые grid фреймворки могу быть такими:

CSS фреймворк

$columns: 12;
$gutter: 12px;
$padding: 10px;

.column {
  flex-basis: calc(100% / #{$columns});
  margin: 0 $gutter;
  padding: 0 $padding;

  @for $i from 2 through 12 {
    &._#{$i} {
      flex-basis: calc(100% / #{$columns * $i});
    }
  }
}

.grid, .row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0 ($padding + $gutter) * -2;
}

Использование

<div class="grid">
  <div class="column _4"></div>
  <div class="column _4"></div>
  <div class="column _2"></div>
  <div class="column _2"></div>
</div>

Чтобы изменить атрибут в этом фреймворке, нам понадобится скомпилировать новую версию стилей. С CSS переменными нам не придется этого делать, и можно удалить большую часть кода.

Давайте разберем что-нибудь похожее, но с CSS переменными.

CSS фреймворк

:root {
  --columns: 12;
  --gutter: 12;
  --padding: 10;
}

.column {
  --colspan: 1;
  flex-basis: calc(100% / var(--columns) * var(--colspan));
  margin: 0 calc(var(--gutter) * 1px);
  padding: 0 calc(var(--padding) * 1px);
}

.grid, .row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0 calc((var(--gutter) + var(--padding)) * -1px);
}

Использование

<div class="grid">
  <div class="column" style="--colspan: 4"></div>
  <div class="column" style="--colspan: 4"></div>
  <div class="column" style="--colspan: 2"></div>
  <div class="column" style="--colspan: 2"></div>
</div>

Как видите, colspan я указал в инлайновых стилях, чтобы не указывать отдельный класс. На это есть три причины.

инлайновые стили ограничиваются на отдельных элементах;

каскадирование разрушит логику сетки;

нет каскадных классов.

Пишем легковесный grid фреймворк

Давайте подумаем, как можно улучшить код сверху. Логика как в SCSS, так и в CSS версии одна и та же, но чистый CSS не требует повторной компиляции. Обычные стили можно просто импортировать и переписать переменные в :root. Вот тут нам пригодиться каскадирование.

@import "path/to/grid.css";
:root {
  --gutter: 10;
  --padding: 10;
}

Вложенные сетки

Примеры выше следуют очень простой логике:

.grid задает внешний элемент;

.column определяет ширину элемента относительно родителя;

.row открывает новую сетку и сбрасывает разделители и padding.

То есть если внутри столбца с шириной 4 у нас расположена сетка, то на самом деле мы разбиваем нашу сетку на 48 столбцов. Зачастую мы хотим далеко не этого. Код ниже может показаться знакомым.

<div class="grid">
  <div class="column _12"> 12 columns </div>
  <div class="column _6"> 6 columns</div>
  <div class="column _6">
    <div class="row">
      <div class="column _12"> 6 columns</div>
      <div class="column _6"> 3 columns</div>
      <div class="column _6"> 3 columns</div>
    </div>
  </div>
</div>

Может быть, вы согласитесь, что тут возникнут проблемы с макетом, и реального решения этой проблемы нет. Мы приняли эту проблему и научились использовать сетки в свою пользу.

Тут нам очень сильно могут помочь CSS переменные. Добавив всего одну строку CSS, можно задать максимальное количество столбцов. Обычно для этого нужен JS или очень много кода и настроек.

.row {
  --columns: var(--colspan);
}

Теперь можно задать столбцы относительно внешнего элемента .grid, а не родителя.

<div class="grid">
  <div class="column" style="--colspan: 12"> 12 columns </div>
  <div class="column" style="--colspan: 6"> 6 columns</div>
  <div class="column" style="--colspan: 6">
    <div class="row">
      <div class="column" style="--colspan: 6"> 6 columns</div>
      <div class="column" style="--colspan: 3"> 3 columns</div>
      <div class="column" style="--colspan: 3"> 3 columns</div>
    </div>
  </div>
</div>

Minus minus grid

Не так давно я написал очень похожую сетку, скачать ее можно на github и npm. Название – это игра слов.

Minus minus grid
--grid
minus-grid

В моей сетке есть пара дополнительных функций, логика вся та же самая, в том числе и адаптивность. Если интересно, можете поиграться. Просто добавьте этот код в свое демо:

@import "https://cdn.rawgit.com/pixelass/minus-grid/v1.2.0/dist/index.css";

.grid {
  --column-margin: 5;
  --column-padding: 5;
}

Заключение

CSS переменные – очень мощный инструмент, предлагающий что-то новое, чего раньше у нас не было. С нетерпением жду, как переменные повлияют на open source проекты и фреймворки. Прежде чем использовать эту технику, проверьте поддержку в браузерах.

Автор: Gregor Adams

Источник: http://codepen.io/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree