Если вы уже являетесь поклонником Sass и Bourbon , вам понравится Neat — легкая семантическая система координат, которая без проблем работает с Bourbon и Sass от тех же людей из Thoughtbot, которые написали Bourbon.
Если вам все это кажется новым, Sass — это препроцессор для CSS, который может значительно улучшить ваш рабочий процесс CSS. Бурбон — это набор миксинов для Sass, который усиливает и расширяет возможности Sass. Если вы не знакомы с Sass и Bourbon, ознакомьтесь с моей предыдущей статьей, в которой описано, как настроить Sass и Bourbon за несколько простых шагов. После того, как вы прошли через это, вы должны быть готовы следовать и узнать все о Neat.
Модульный подход
Одна из целей фреймворка Bourbon — сохранить модульность, чтобы вы не загромождали свой код функциями, которые вы на самом деле не используете. Имея это в виду, создатели Bourbon выпустили свою систему Neat Grid в качестве дополнительного дополнения для Bourbon. Они хотели иметь небольшую семантическую сеточную систему, которая могла бы помочь с большинством распространенных задач макета, не будучи слишком самоуверенным.
Цель состояла в том, чтобы сделать что-то, чем вы могли бы воспользоваться, когда захотите, и это сойдет с вашего пути, когда вы этого не сделаете. Neat может быть включен в проект Bourbon, если вы этого хотите, но если вы его не используете, он ничего не добавит к скомпилированному CSS, который вы в конечном итоге будете обслуживать своим посетителям.
Что такое семантическая решетка?
Semantic — это термин, который часто используется в веб-разработке. Для целей Neat то, что делает эту систему сетки семантической, так это то, что она позволяет вам нацеливать ваши HTML-элементы в соответствии с тем, как они изначально названы, и использовать их так, как они должны были себя вести, поддерживая чистоту разметки.
Быстрый пример может помочь.
Представьте, что вы создаете страницу, которая должна отображать статью с aside внутри section . Вы хотите использовать правильные элементы HTML, и вам не нужно загромождать страницу ненужными классами или обертками. Вы хотите, чтобы сторона оставалась на левой стороне статьи на обычном рабочем столе. Вы знаете, что вам нужна гибкость для представления одних и тех же элементов по-разному на разных устройствах.
Вы начинаете с простого HTML:
<section> <aside> <p>Highlighted information</p> </aside> <article> <p>This is the content of the article</p> </article> </section>в<section> <aside> <p>Highlighted information</p> </aside> <article> <p>This is the content of the article</p> </article> </section>в<section> <aside> <p>Highlighted information</p> </aside> <article> <p>This is the content of the article</p> </article> </section>
Без какого-либо CSS это приведет к тому, что контент будет наверху, сразу же после article . Чтобы презентация использовала сетку, вам нужно нацелить соответствующие элементы с помощью сеточных классов Neat. Вы определяете элемент section как контейнер, а затем устанавливаете количество столбцов (из 12 по умолчанию), которое должно быть выделено для его дочерних элементов ( aside и article ).
@import bourbon/bourbon @import neat/neat section { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); } }
Все это без проблем работает с любым из ваших обычных соглашений Sass и Bourbon, а также со всеми классами и селекторами CSS, которые вы можете использовать. Поэтому, если вы хотите, чтобы это происходило только для элементов section которые имеют определенный класс, Neat выполняет свою работу и уходит с вашего пути. Итак, для следующего HTML:
<section class="article-container"> <aside class="interesting-insight"> <p>Highlighted information</p> </aside> <article class="syndicated-content"> <p>This is the content of the article</p> </article> </section>в<section class="article-container"> <aside class="interesting-insight"> <p>Highlighted information</p> </aside> <article class="syndicated-content"> <p>This is the content of the article</p> </article> </section>
Это аккуратное определение будет работать так, как вы ожидаете (мы будем предполагать, что строки импорта в верхней части файла Sass будут идти вперед):
.article-container { @include outer-container; .interesting-insight { @include span-columns(3); } .syndicated-content { @include span-columns(9); } }
Адаптивные Макеты
Получившаяся страница из приведенных выше примеров будет показывать дополнительное содержимое слева от содержимого article , независимо от того, насколько большим или маленьким будет окно. Но предположим, что вы хотите, чтобы aside всплывала вверх, когда дисплей устройства составляет 500 пикселей или уже.
Это можно сделать, определив переменную $mobile breakpoint в 500px с помощью функции Neat new-breakpoint() . Это даже позволяет вам указать количество столбцов, которые должны представлять всю ширину нового размера экрана для всех элементов в этом контексте:
$mobile: new-breakpoint(max-width 500px 4); section { @include outer-container; aside { @include span-columns(3); @include media($mobile) { @include span-columns(4); } } article { @include span-columns(9); @include media($mobile) { @include span-columns(4); } } }
Теперь aside и article будут сложены и установлены на полную ширину в четыре столбца, чтобы заполнить экран по горизонтали, если размер экрана составляет 500 пикселей или уже. А на больших дисплеях посетитель получит ту же самую параллельную презентацию, что и раньше.
Итак, давайте посмотрим на CSS, который генерируется при компиляции этого базового адаптивного примера:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section { max-width: 68em; margin-left: auto; margin-right: auto; } section:after { content: ""; display: table; clear: both; } section aside { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; } section aside:last-child { margin-right: 0; } @media screen and (max-width: 500px) { section aside { float: left; display: block; margin-right: 7.42297%; width: 100%; } section aside:last-child { margin-right: 0; } } section article { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; } section article:last-child { margin-right: 0; } @media screen and (max-width: 500px) { section article { float: left; display: block; margin-right: 7.42297%; width: 100%; } section article:last-child { margin-right: 0; } }
Есть много лучших практик и приемов CSS, чтобы сделать получившиеся стили надежными. Например, Bourbon и Neat позаботились об очистке разделов, установке стилей отображения таблицы для контейнера и дочерних элементов, обеспечении того, чтобы у элементов last-child не было правильных полей, и даже о расчете основанных на процентах ширины и полей до пяти десятичных знаков. как для маленьких, так и для больших дисплеев на aside и article элементах. Это большое значение для количества прилагаемых усилий.
Приоритет контента
Если вы хотите изменить порядок отображения элементов в определенном представлении без изменения порядка содержимого в вашем HTML, Neat поддерживает удобное и интуитивно понятное позиционирование отрицательной строки. Вы можете перемещать каждый столбец внутри его родительского элемента так же легко, как это:
section { @include outer-container; aside { @include span-columns(3); @include shift(-12); } article { @include span-columns(9); @include shift(3); } }
Теперь элемент article будет слева, а aside справа. И вы можете добавить мобильные стили так же, как мы использовали их ранее, чтобы обеспечить согласованность вашего адаптивного дисплея:
$mobile: new-breakpoint(max-width 500px 4); section { @include outer-container; aside { @include span-columns(3); @include shift(-12); @include media($mobile) { @include span-columns(4); } } article { @include span-columns(9); @include shift(3); @include media($mobile) { @include span-columns(4); } } }
Настройки настройки
Одним из реальных преимуществ Neat является то, что он очень гибок в настройке с помощью встроенных настроек. Neat позволяет передавать свои собственные значения для большинства настроек, которые вы, возможно, захотите установить при разработке своего сайта, а также позволяет использовать практические и разумные значения по умолчанию для таких значений, как количество столбцов и ширина желобов.
Neat предполагает сетку из 12 столбцов по умолчанию, которая является достаточно гибкой для широкого диапазона макетов, но вы можете использовать сетку из 16 столбцов, если это удобнее, просто изменив значение переменной $grid-columns .
$grid-columns: 16; section { @include outer-container; aside { @include span-columns(4); } article { @include span-columns(12); } }
Вложенные подразделы
Neat также позволяет использовать вспомогательные сетки внутри контейнеров в макете. Это может поддерживать гибкие презентации, которые показывают несколько элементов рядом друг с другом, аккуратно расположенных внутри вложенного элемента. Все, что вам нужно сделать, это указать, что столбцы для элементов интерьера должны быть рассчитаны на основе количества столбцов, занятых вложенным родительским элементом.
Например, вот article с тремя вложенными элементами div :
<section> <aside> <p>Highlighted information</p> </aside> <article> <div>This is the first sub-nested element</div> <div>This is the second sub-nested element</div> <div>This is the third sub-nested element</div> </article> </section>в<section> <aside> <p>Highlighted information</p> </aside> <article> <div>This is the first sub-nested element</div> <div>This is the second sub-nested element</div> <div>This is the third sub-nested element</div> </article> </section>в<section> <aside> <p>Highlighted information</p> </aside> <article> <div>This is the first sub-nested element</div> <div>This is the second sub-nested element</div> <div>This is the third sub-nested element</div> </article> </section>
В таком случае вы можете указать в своем коде Neat Sass, что каждый из них должен занимать долю доступных столбцов внутри содержащего элемента:
section { @include outer-container; aside { @include span-columns(3); } article { @include span-columns(9); div { @include span-columns(3 of 9); } } }
А поскольку Bourbon и Neat — это просто усовершенствования Sass, они полностью модифицируемы с использованием стандартных методов разработки Sass.
Настраиваемый и ненавязчивый
Neat достаточно универсален и прост для поддержки большинства стандартных подходов к разработке макетов. Если вы хотите создать макет для мобильных устройств с одним столбцом, который расширяется до двух столбцов на планшете и трех столбцов на рабочем столе, или если вы хотите устранить расстояние между столбцами или поддерживать несколько строк элементов в одном наборе элементы родного брата, аккуратный ты покрыл.
Ознакомьтесь с документацией Neat и просмотрите некоторые примеры на сайте Neat, чтобы получить вдохновение для вашего следующего проекта. С Bourbon и Neat на вершине Sass вы можете сразу же погрузиться и начать играть с вариантами дизайна и макета, зная, что вы не добавляете много лишнего раздувания в свой код или ограничивая свой семантический стиль HTML.