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

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

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

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

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

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

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

CSS фреймворк

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

CSS фреймворк

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

Minus minus grid

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

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

Заключение

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

Автор: Gregor Adams

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree