Если вы используете Sass, наслаждаетесь использованием Bourbon и хотели бы использовать интеллектуальную сеточную инфраструктуру для облегченных макетов, Neat вполне может стать вашим надежным компаньоном в обозримом будущем. В этой короткой вводной части я предоставлю вам несколько разумных причин, чтобы дать возможность этой неорганизованной решетке.
Добро пожаловать в ваш новый любимый инструмент
Bourbon Neat был задуман Редой Лемеден и является частью фантастического номера Bourbon . Это легкая, отзывчивая сеточная структура, построенная на основе Sass и Bourbon. Сам проект поддерживается Thinkbot, и его дизайнеры позаботятся об этом.
Слово о каркасе
Прежде чем мы что-то установим, позвольте мне дать вам пару веских причин, чтобы разобраться в этом. Существует бесчисленное множество фреймворков, которые обещают обеспечить стабильную основу для разработки ваших проектов. И большинство из них, безусловно, так или иначе преуспевают. Но в какой степени? Спроси себя:
- Сможете ли вы (легко) переключать фреймворки в будущем?
- Есть ли у вас проблемы с загромождением разметки?
- Подходит ли для масштабирования проектов?
- Это смешно по размеру?
- Это идет с крутой кривой обучения?
- Это дает вашим сайтам общий вид?
Если ответы на любые из перечисленных выше вопросов звучат как тревожные звонки, я просто хочу заверить вас, что таких головных болей легко избежать в наши дни. Очень редко можно встретить проект, который уравновешивает свои выгоды так же хорошо, как Bourbon Neat (или просто «Neat» для краткости). Почему так? Вот несколько веских причин:
- Это супер легкий
- Это будущее
- Это легко использовать
- Это отзывчиво
- Это семантика
- Это масштабируемо
- Это элегантно
Бурбон также стремится предоставить вам варианты, а не ответы. Что мне особенно нравится, так это то, что это не фабрика для общих, предопределенных стилей. Таким образом, он помогает дизайнерам принимать собственные дизайнерские решения, не мешая им.
А теперь слово о семантике
Это важный вопрос, но я сделаю его коротким: уродливые классы презентаций и дополнительные пустые div-обертки, которые вы часто находите в интерфейсных библиотеках, являются призраками из прошлого (по крайней мере, они должны быть призраками). Аккуратный играет важную роль в преодолении этих чертовски семантических привычек. Это поможет вам написать чистую, ненавязчивую разметку, и все ваши стили сетки будут четко разделены в ваших таблицах стилей с помощью миксинов.
Что в коробке?
Зачем вообще заниматься сеткой? Что ж, дизайн — это отношения, а отношения могут быть сложными. Сетки облегчают их, помогая вам связать структуры более осмысленным и организованным способом. Они упрощают, уменьшают и стабилизируют — по сути, они помогают обрезать жир из дизайна. Нит добивается этого всего четырнадцатью миксинами.
reset-layout-direction-
direction-context -
shift-in-context -
display-context -
outer-container -
span-columns -
reset-display -
fill-parent -
reset-all -
omega -
media -
shift -
pad -
row
… одна функция для установки точек останова ..
-
new-breakpoint
… И двенадцать переменных для настроек:
-
default-layout-direction -
visual-grid-opacity -
border-box-sizing -
visual-grid-index -
disable-warnings -
visual-grid-color -
default-feature -
grids-columns -
max-width -
visual-grid -
column -
gutter
Бум, вот и все! Довольно сдержанный, но он дает вам много лошадиных сил!
Адаптивные Сетки
Изменения и потребность в гибкости являются постоянными потребностями будущего. Включение медиазапросов должно быть плавным и легко управляемым, но они могут быстро превратиться в беспорядок, если с ними не будут обращаться осторожно.
Bourbon Neat поощряет СУХОЙ подход к обработке точек останова с помощью функции «новая точка останова». Сохраняйте точки останова в переменных и используйте их везде, где вам нужно. Изменить кучу медиазапросов в одном месте сложно.
Чтобы быть более конкретным, позвольте мне привести вам пример. Вот случайный фрагмент Sass, использующий функцию «new-breakpoint» для медиа-запросов:
|
01
02
03
04
05
06
07
08
09
10
11
|
$mobile: new-breakpoint(max-width 500px 4)
.sidebar
+span-columns(3)
+media($mobile)
+span-columns(1)
.content
+span-columns(9)
+media($mobile)
+span-columns(3)
|
На данный момент не слишком заботьтесь о миксинах, используемых в этом примере. В следующих уроках я углублюсь в детали этого. Что должно быть очевидно в этом примере, так это простота использования, если вы решите изменить медиа-запросы. Благодаря использованию переменных Sass и этой функции у вас будет одно непротиворечивое, авторитетное место для изменения и настройки адаптивного макета, не затрагивая каждый элемент в отдельности.
Установка
Теперь, когда вы знаете, во что вы ввязываетесь, давайте установим эту красоту:
Примечание: перед началом работы вам потребуется установить Sass .)
Шаг 1: Установите Бурбон
Взгляните на мой урок о Бурбоне, если вам нужно выполнить этот шаг.
Шаг 2: Установите аккуратный драгоценный камень
Это делается через RubyGems , вот так:
|
1
|
gem install neat
|
Шаг 3: Установите аккуратно
С помощью командной строки перейдите в каталог Sass по вашему выбору, затем выполните:
|
1
|
neat install
|
Это установит все необходимые миксины, настройки и функции в выбранный вами каталог.
Шаг 4: импортируйте аккуратно в свою простую таблицу стилей
|
1
2
3
|
@import ‘bourbon/bourbon’
@import ‘grid-settings’
@import ‘neat/neat’
|
Примечание: здесь важен порядок импорта. Поскольку Neat был построен поверх Бурбона, вам нужно сначала импортировать Бурбон. То же самое относится и к grid-settings .
Установка с помощью Rails
Шаг 1:
Если вы хотите использовать Neat с Rails, вам нужно добавить:
|
1
|
gem neat
|
в ваш Gemfile.
Шаг 2:
Затем запустите:
|
1
|
bundle install
|
в вашем терминале.
Шаг 3:
В «application.sass» вам нужно добавить:
|
1
2
3
|
@import ‘bourbon’
@import ‘grid-settings’
@import ‘neat’
|
и ты в порядке. Помните, что @import не очень хорошо работает с директивами Sprockets, и поэтому вам нужно будет удалить их ссылки. В «application.sass» необходимо указать «require», «require_tree» и «require_self».
Аккуратный CLI
И последнее, но не менее важное: умные ребята из сайта Thinkbot предоставили нам приятный интерфейс командной строки . Он поставляется с тремя понятными командами:
|
1
2
3
4
5
|
neat install
neat update
neat remove
|
Закрытие $ 0,02
Используя интеллектуальные инструменты, подобные этим, работать с сеткой очень приятно. Этот фреймворк отлично справляется с планированием счастья для разработчиков (долгосрочных и краткосрочных).
В следующем уроке мы подробнее рассмотрим, как использовать Neat.
