波旁威士忌整洁：语义，非调理，响应式网格

如果您使用Sass，喜欢使用Bourbon，并且希望将智能网格框架用于轻型布局，那么Neat很有可能在可预见的将来成为您值得信赖的伴侣。 在这个简短的介绍文章中，我将为您提供一些明智的理由，让您轻松了解这个没有主观的网格框架。

欢迎使用您的新收藏夹工具

Bourbon Neat由Reda Lemeden构思，是梦幻般的Bourbon套房的一部分。 这是一个轻量级的响应式网格框架，建立在Sass和Bourbon之上。 该项目本身得到了Thoughtbot的支持，他们的设计师对此进行了照顾。

关于框架的话

在安装任何东西之前，让我给您几个很好的理由来研究它。 有无数的框架有望为开发设计提供稳定的框架。 当然，其中大多数肯定以一种或另一种方式成功。 但是到什么程度呢？ 问你自己：

• 您将来可以（轻松）切换框架吗？
• 它会使您的标记混乱吗？
• 是否适合扩展项目？
• 大小可笑吗？
• 它具有陡峭的学习曲线吗？
• 它给您的网站一个通用的外观吗？

如果上述任何问题的答案都在敲响警钟，我只想向您保证，这些头痛现在很容易避免。 碰到一个平衡收益和波旁威士忌整洁（或者简称为“整洁”）的项目的情况很少。 为什么这样？ 这里有两个很好的理由：

• 超轻巧
• 面向未来
• 容易使用
• React灵敏
• 这是语义
• 可扩展
• 雅致

波旁威士忌还旨在为您提供选择，而不是答案。 我特别喜欢的是它不是通用的预定义样式的工厂。 这样一来，就可以帮助设计师自己进行设计决策，而不会造成阻碍。

现在谈谈语义学

这是一个重要的问题，但我将简短地说：在前端库中经常发现的难看的表示类和其他空包装div是过去的鬼魂（至少它们应该是鬼魂）。 整洁在摆脱这些陈旧的语义习惯方面起着重要作用。 它可以帮助您编写简洁，醒目的标记，并通过mixin在样式表中清晰地分隔所有网格样式。

盒子里装了什么？

为什么要处理网格框架呢？ 好吧，设计是关于关系的，关系可能很难。 网格通过帮助您以更有意义和更有条理的方式将结构绑定在一起，使网格变得更容易。 它们简化，减少和稳定化-本质上，它们有助于减少设计中的脂肪。 Neat仅用14个mixin即可实现这一目标。

• 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

oom，就是这样！ 相当低调，但它为您提供了强大的功能！

响应式网格

变化和对灵活性的需求是持续面向未来的必需品。 合并媒体查询应该是平稳且易于管理的，但是如果不谨慎处理，它们很快就会变成一团糟。

Bourbon Neat鼓励通过DRY方法的“新断点”功能来处理断点。 将断点保存在变量中，然后在需要时重新使用它们。 在一个地方更改一堆媒体查询很难被克服。

更具体地说，让我给你一个例子。 这是一个使用“ new-breakpoint”功能进行媒体查询的随机Sass代码段：

$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)

现在，不要太在意本示例中使用的mixin。 在接下来的教程中，我将更深入地探讨这一点。 但是，在此示例中应该清楚的是，如果您决定更改媒体查询，则易于使用。 通过使用Sass变量和此函数，您将有一个一致，权威的位置来更改和调整响应式布局，而无需单独触摸每个元素。

安装

现在，您知道自己正在进入什么领域，让我们安装这个美丽的东西：

注意：开始之前，您需要安装Sass 。）

步骤1：安装波旁威士忌

如果您需要执行此步骤，请看一下有关波旁威士忌的教程 。

步骤2：安装Neat gem

这是通过RubyGems完成的，就像这样：

gem install neat

步骤3：安装整洁

通过命令行 ，转到您选择的Sass目录，然后运行：

neat install

这将在您指定的目录中安装所有必需的mixin，设置和功能。

步骤4：将整洁的导入到Sass样式表中

@import 'bourbon/bourbon'
@import 'grid-settings'
@import 'neat/neat'

注意：此处的导入顺序很重要。 由于Neat是建立在Bourbon之上的，因此您需要先导入Bourbon。 grid-settings 。

使用Rails安装

第1步：

如果要将Neat与Rails结合使用，则需要添加：

gem neat

到您的Gemfile。

第2步：

然后运行：

bundle install

在您的终端中。

第三步：

然后，在“ application.sass”中，您需要添加：

@import 'bourbon'
@import 'grid-settings'
@import 'neat'

而且你很好。 不过请记住，@ @import与Sprockets指令的配合不好，因此您需要删除它们的引用。 在“ application.sass”中，需要“ require”，“ require_tree”和“ require_self”。

整洁的CLI

最后但并非最不重要的一点是，Thoughtbot的优秀人才为我们提供了一个不错的命令行界面 。 它带有三个不言自明的命令：

neat install

neat update

neat remove

收盘价$ 0.02

使用这样的智能工具，使用网格是一件令人愉快的事情。 该框架在计划开发人员的幸福感（长期和短期）方面做得很好。

在下一个教程中，我们将对如何使用Neat进行更深入，更技术性的研究。

翻译自: https://webdesign.tutsplus.com/articles/bourbon-neat-semantic-unopinionated-responsive-grids--cms-24853