От автора: CSS фреймворки это, конечно, хорошо, но… За последние годы мы работали с различными фреймворками. С их помощью мы создавали базовые макеты и темы для своих проектов. Так называемые «макеты» зачастую хорошо детализированы и прилично весят.
Фреймворки созданы, чтобы ускорять процесс разработки, обеспечивая при этом наилучшую совместимость. Основной минус – большой код. Так как фреймворки часто имеют модульную структуру и множество настроек, интеграция может отнять больше времени, чем вы ожидали. Если вы захотите кастомизировать фреймворк или вырезать из него какую-то часть, придется также попотеть.
Кто до сих пор использует bootstrap?
К счастью, множество разработчиков начали писать свои собственные шаблоны. В основе некоторых шаблонов лежат популярные фреймворки, другие написаны с нуля. Но зачастую у них есть одна общая черта. Фреймворки подгружают статический CSS, а для смены атрибутов нужен препроцессор.
Простые grid фреймворки могу быть такими:
CSS фреймворк
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$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; } |
Использование
|
1 2 3 4 5 6 |
<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 фреймворк
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
: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); } |
Использование
|
1 2 3 4 5 6 |
<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. Вот тут нам пригодиться каскадирование.
|
1 2 3 4 5 |
@import "path/to/grid.css"; :root { --gutter: 10; --padding: 10; } |
Вложенные сетки
Примеры выше следуют очень простой логике:
.grid задает внешний элемент;
.column определяет ширину элемента относительно родителя;
.row открывает новую сетку и сбрасывает разделители и padding.
То есть если внутри столбца с шириной 4 у нас расположена сетка, то на самом деле мы разбиваем нашу сетку на 48 столбцов. Зачастую мы хотим далеко не этого. Код ниже может показаться знакомым.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 или очень много кода и настроек.
|
1 2 3 |
.row { --columns: var(--colspan); } |
Теперь можно задать столбцы относительно внешнего элемента .grid, а не родителя.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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. Название – это игра слов.
|
1 2 3 |
Minus minus grid --grid minus-grid |
В моей сетке есть пара дополнительных функций, логика вся та же самая, в том числе и адаптивность. Если интересно, можете поиграться. Просто добавьте этот код в свое демо:
|
1 2 3 4 5 6 |
@import "//cdn.rawgit.com/pixelass/minus-grid/v1.2.0/dist/index.css"; .grid { --column-margin: 5; --column-padding: 5; } |
Заключение
CSS переменные – очень мощный инструмент, предлагающий что-то новое, чего раньше у нас не было. С нетерпением жду, как переменные повлияют на open source проекты и фреймворки. Прежде чем использовать эту технику, проверьте поддержку в браузерах.
Автор: Gregor Adams
Источник: //codepen.io/
Редакция: Команда webformyself.
