Макет сторінки, створений на чистих CSS змінних

35

Від автора: 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;
}

Використання

Щоб змінити атрибут у цьому фреймворку, нам знадобиться зібрати нову версію стилів. З 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);
}

Використання

Як бачите, colspan я вказав у инлайновых стилях, щоб не вказувати окремий клас. На це є три причини.

инлайновые стилі обмежуються на окремих елементах;

каскадування зруйнує логіку сітки;

немає каскадних класів.

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

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

@import «path/to/grid.css»;
:root {
—gutter: 10;
—padding: 10;
}

Вкладені сітки

Приклади вище слідують дуже простій логіці:

.grid задає зовнішній елемент;

.column визначає ширину елемента щодо батьків;

.row відкриває нову сітку і скидає роздільники і padding.

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

12 columns
6 columns
6 columns
3 columns
3 columns

Може бути, ви погодитеся, що тут виникнуть проблеми з макетом, і реального вирішення цієї проблеми немає. Ми прийняли цю проблему і навчилися використовувати сітки в свою користь.

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

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

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

12 columns
6 columns
6 columns
3 columns
3 columns

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 проекти і фреймворки. Перш ніж використовувати цю техніку, перевірте підтримку в браузерах.