sgrid

sgrid

After reading the title of this post, you might ask: Why another grid system? This is a good question.

阅读这篇文章的标题后，您可能会问：为什么要使用另一个网格系统？ 这是一个很好的问题。

Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that’s similar? The short and best answer is because this tool does one thing and only one thing – it is responsible for building flexbox grids with a semantic approach with only the Stylus preprocessor.

基本上有很多网格，其中许多也是flexbox网格。 那么，为什么还要构建另一个类似的工具？ 简短而最佳的答案是，因为该工具只能做一件事，而且只能做一件事–它仅使用Stylus预处理程序就可以使用语义方法来构建Flexbox网格。

This is exactly what I needed. It’s a clean and light tool without any dependencies so you can use it with many other JavaScript tools and frameworks. What is also important is that it’s a standard npm package, which is essential for me because I usually work in the JavaScript stack. I’m sure you’ll find it useful in your Stylus workflow as well.

这正是我所需要的。 这是一个干净轻巧的工具，没有任何依赖关系，因此您可以将其与许多其他JavaScript工具和框架一起使用。 同样重要的是，这是一个标准的npm软件包，这对我来说非常重要，因为我通常在JavaScript堆栈中工作。 我相信您在Stylus工作流程中也会发现它很有用。

什么是sGrid？ (What is sGrid?)

sGrid is a flexbox grid system for Stylus. It is based on only 3 .styl files, one of which is optional. It’s all wrapped in one simple and small npm package.

sGrid是用于Stylus的flexbox网格系统。 它仅基于3个.styl文件，其中之一是可选的。 它们全部包装在一个简单而小的npm软件包中 。

This is a standard npm package so you can use it with whatever you like – with the command line, with a Grunt or Gulp build stack, or even with the Meteor JavaScript platform. It’s up to you, it all depends on your workflow of choice.

这是一个标准的npm软件包，因此您可以将其与命令行，Grunt或Gulp构建堆栈甚至Meteor JavaScript平台配合使用 。 取决于您，这完全取决于您选择的工作流程。

使用sGrid启动示例项目 (Starting a Sample Project with sGrid)

To introduce sGrid, let’s start with a simple and basic example. We’ll need the .html file and .styl file. I’ll assume that you have Stylus installed. If not, you should install it globally with npm install -g stylus in your terminal.

为了介绍sGrid，让我们从一个简单的基本示例开始。 我们需要.html文件和.styl文件。 我假设您已经安装了Stylus。 如果没有，则应在终端中使用npm install -g stylus进行全局npm install -g stylus 。

First, let’s create a folder and name it s-grid. Inside we’ll create the index.html file and the main.styl file. Our index.html file will start with a basic HTML template with a link to main.css, our CSS file. To compile the main.css file, we need to create the main.styl file. Let’s create it in the same folder. For now it can be empty.

首先，让我们创建一个文件夹并将其命名为s-grid 。 在内部，我们将创建index.html文件和main.styl文件。 我们的index.html文件将从一个基本HTML模板开始，该模板带有一个指向我们CSS文件main.css的链接。 要编译main.css文件，我们需要创建main.styl文件。 让我们在同一文件夹中创建它。 现在它可以是空的。

Next we need to install sGrid itself and we also need to install the autoprefixer-stylus plugin. This is because we need some flexbox-based vendor prefixes in our main.css file.

接下来，我们需要安装sGrid本身，还需要安装autoprefixer-stylus插件。 这是因为我们在main.css文件中需要一些基于flexbox的供应商前缀。

To do this, we’ll enter the following in our terminal:

为此，我们将在终端中输入以下内容：

npm install -g s-grid autoprefixer-stylus

After everything is installed, we can import the sGrid files into the main.styl file. Just open main.styl and paste the following code:

安装完所有内容后，我们可以将sGrid文件导入到main.styl文件中。 只需打开main.styl并粘贴以下代码：

@import 's-grid-settings' @import 's-grid-functions' @import 's-grid-classes'

We’ll save the file and from the s-grid directory we can run our Stylus watch command. After that there should be a main.css file created. Inside the s-grid folder, run:

我们将保存文件，并从s-grid目录中运行Stylus watch命令。 之后，应该创建一个main.css文件。 在s-grid文件夹中，运行：

stylus -u s-grid -u autoprefixer-stylus --with "{ browsers: ['last 2 versions'] }" -w main.styl

With this, we’ve told Stylus that it should watch the main.styl file, recompile the main.css file, and it should use Autoprefixer only for the last 2 versions of browsers. Of course it should also use s-grid.

有了这个，我们告诉Stylus应该监视main.styl文件，重新编译main.css文件，并且它应该仅对最后两个版本的浏览器使用Autoprefixer。 当然也应该使用s-grid。

That last command is a somewhat long one but this is only for demo purposes. Normally you’ll use some Node app workflow or some build system for this sort of thing. You can check out the options in the sGrid docs.

最后一个命令有点长，但这仅用于演示目的。 通常，您将使用某些Node应用程序工作流或某些构建系统来进行此类操作。 您可以在sGrid文档中查看选项。

As you can see, the main.css file is prepared and it is filled in with some CSS. This is because we have imported s-grid-classes, which is a ready-to-use set of responsive classes. This import is optional. When you comment it out or remove it from the main.styl file, you’ll see that main.css is empty. This is good because we won’t be able to use helper classes but we can still prepare our own classes using sGrid functions. So why do we need these classes? They’re useful in fast prototyping are similar to the ones in Bootstrap and Foundation, so developers who are familiar with those libraries will be accustomed to them from the start. Of course you don’t need to use them; in fact, it is even better not to.

如您所见，main.css文件已经准备好，并填充了一些CSS。 这是因为我们已经导入了s-grid-classes ，它是一组易于使用的响应类。 此导入是可选的。 当您注释掉它或从main.styl文件中删除它时，您会看到main.css为空。 这很好，因为我们将无法使用帮助器类，但仍可以使用sGrid函数准备自己的类。 那么为什么我们需要这些课程呢？ 它们在快速原型设计中很有用，与Bootstrap和Foundation中的类似，因此熟悉这些库的开发人员将从一开始就习惯于它们。 当然，您不需要使用它们。 实际上，最好不要这样做。

使用sGrid构建布局 (Building a Layout with sGrid)

To create some examples that use sGrid, we’ll write the same code using only sGrid functions (semantic approach) and also using helper classes. So we won’t comment out or remove the s-grid-classes import from our main.styl file.

为了创建一些使用sGrid的示例，我们将仅使用sGrid函数(语义方法)并使用辅助类来编写相同的代码。 因此，我们不会注释掉或从main.styl文件中删除s-grid-classes导入。

Let’s focus on some basic structure. For this example we want to have a simple centered container with a max width of 500px. Inside we want two equal, but responsive, columns. In the index.html file in the body tag, paste the following code:

让我们关注一些基本结构。 对于此示例，我们希望有一个最大宽度为500px的简单居中容器。 在内部，我们需要两个相等但响应Swift的列。 在body标记的index.html文件中，粘贴以下代码：

<div class="my-grid"> <div class="my-cell">First cell</div> <div class="my-cell">Second cell</div> </div>

Let’s also add some styling. In the main.style file, after the sGrid imports, we can add the following Stylus code:

我们还添加一些样式。 在main.style文件中，导入main.style之后，我们可以添加以下手写笔代码：

.my-grid background-color #E9E9EA margin-top rem-calc(100) center(500) grid() .my-cell stack() padding rem-calc(10) background-color #D5D5D7 @media screen and (min-width: rem-calc(breakpoints[md])) cell(1, 2)

If you’re still watching the main.styl file, your main.css file should update and you will be able to open the index.html file in your browser. You should see something similar to the CodePen demo below:

如果您仍在观看main.styl文件，则main.css文件应该会更新，您将能够在浏览器中打开index.html文件。 您应该在下面看到类似于CodePen演示的内容：

See the Pen A Simple Two-column Grid with sGrid by SitePoint (@SitePoint) on CodePen.

见笔与sGrid一个简单的两列网格由SitePoint( @SitePoint上) CodePen 。

sGrid的功能 (sGrid’s Functions)

As you can see in the demo, I’ve used some Stylus functions that are declared in the s-grid-functions file. Let’s take a look at these functions:

如您在演示中所见，我使用了一些在s-grid-functions文件中声明的Stylus函数。 让我们看一下这些功能：

center() This function is responsible for centering the main container. You can pass the width as an attribute. You can pass it in px (with or without the suffix).

center()此函数负责使主容器居中。 您可以将宽度作为属性传递。 您可以以px(带或不带后缀)传递它。

rem() This function will calculate rem units from pixels that you pass in. It’s based on a base-font-size variable in the s-grid-settings.styl file. Of course you can overwrite it in your main.styl file; just place it after the s-grid-settings import and before the s-grid-functions import

rem()此函数将根据传入的像素计算rem单位。它基于s-grid-settings.styl文件中的base-font-size变量。 当然，您可以在main.styl文件中覆盖它； 只需将其放置在s-grid-settings导入之后和s-grid-functions导入之前

grid(direction = 'row', cells-align = 'top', justify = '') This is the main sGrid function. It should be applied to the main grid wrapper. You can pass to it many attributes such as:

grid(direction ='row'，cells-align ='top'，justify ='')这是主要的sGrid函数。 它应该应用于主网格包装。 您可以将许多属性传递给它，例如：

direction:

方向：

‘row’ (default) – cell direction left to right

“行”(默认)–单元格方向从左到右 ‘row-reverse’ – cell direction right to left

'行反转'–单元格方向从右到左 ‘column’ – cell direction top to bottom

“列” –单元格方向从上到下 ‘column-reverse’ – cell direction bottom to top

“列反转” –单元格方向从下到上

cells-align (works only with ‘row’ and ‘row-reverse’)

单元格对齐(仅适用于“行”和“行反转”)

‘top’

'最佳' ‘bottom’

'底部' ‘center’

'中央' ‘stretch’

'伸展'

justify

证明

‘start’ – justify all content left or top

'开始'–证明所有内容在左或在上 ‘end’ – justify all content right or bottom

'结束'–证明所有内容正确或正确 ‘center’ – justify all content center

“中心” –证明所有内容中心

cell(i = 1, cols = columns, align = '', g = gutter) This is the main sGrid function to be applied to all cells in the grid. You can pass to it attributes such as:

cell(i = 1，cols =列，align =''，g =装订线)这是要应用于网格中所有单元格的主要sGrid函数。 您可以将以下属性传递给它：

i / cols – fraction, so cell(1, 2) is half of the container

i / cols –分数，因此cell(1, 2)是容器的一半

align – you can vertically align specific cells using the values ‘top’, ‘bottom’, or ‘center’

align –您可以使用“ top”，“ bottom”或“ center”值垂直对齐特定单元格 g – gutter

g –天沟

stack() This is a stacking function. It’s a wrapper for cell(1, 1) to achieve a full width cell.

stack()这是一个堆栈函数。 它是cell(1, 1)的包装cell(1, 1)以实现全宽单元格。

As mentioned, you can find more details and usage examples in the sGrid docs.

如前所述，您可以在sGrid docs中找到更多详细信息和用法示例。

sGrid的响应功能 (sGrid’s Responsive Features)

When you view the compiled CSS in the CodePen demo, you’ll notice the use of media queries. This is a mobile first approach. When the viewport is larger than the breakpoints[md] variable, there will be two columns/cells. Otherwise it’s two rows, one after the other.

在CodePen演示中查看已编译CSS时，您会注意到媒体查询的使用。 这是一种移动优先的方法。 当视口大于breakpoints[md]变量时，将有两列/单元格。 否则是两行，一个接一个。

So what exactly is breakpoints[md]? This is a global variable that comes from the s-grid-settings file, inside which default breakpoints are defined, and which you can overwrite.

那么breakpoints[md]到底是什么？ 这是来自s-grid-settings文件的全局变量，该文件中定义了默认断点，并且可以覆盖该断点。

使用sGrid的帮助器类 (Using sGrid’s Helper Classes)

Let’s see how we can build the same example using sGrid’s helper classes. If we need to use helper classes, we can replace the body code in the index.html file with something like the following:

让我们看看如何使用sGrid的帮助器类构建相同的示例。 如果需要使用帮助器类，则可以使用以下内容替换index.html文件中的主体代码：

<div class="my-grid s-grid-top"> <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6"> First cell </div> <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6"> Second cell </div> </div>

And in the main.styl file we can use only the center() function. All the other stuff we added can be deleted. So the final code will be:

在main.styl文件中，我们只能使用center()函数。 我们添加的所有其他内容都可以删除。 所以最终的代码将是：

.my-grid background-color #E9E9EA margin-top rem-calc(100) center(500) .my-cell padding rem-calc(10) background-color #D5D5D7

As you can see with this approach, we have a much more complex HTML structure, but we don’t have to use functions in the Stylus file. The effect is the same in both cases, which you can confirm by opening your index.html file in the browser.

如您所见，这种方法具有更复杂HTML结构，但不必在Stylus文件中使用函数。 在两种情况下，效果都是相同的，您可以通过在浏览器中打开index.html文件来确认。

We could also write it in a different way. We can use the block grid style here. Instead of using helper classes for single cells we could do this globally like the following:

我们也可以用其他方式编写它。 我们可以在此处使用块网格样式。 不必为单个单元格使用帮助程序类，我们可以像下面这样全局地执行此操作：

<div class="my-grid s-grid-top s-grid-sm-12 s-grid-md-6"> <div class="s-grid-cell my-cell">First cell</div> <div class="s-grid-cell my-cell">Second cell</div> </div>

The effect is the same here. Check out the docs for more info on the helper classes.

这里的效果是一样的。 查看文档以获取有关帮助程序类的更多信息。

更改单元格的垂直对齐方式 (Changing Vertical Alignment of Cells)

The next example will demonstrate how easily we can change the vertical alignment of cells. Let’s prepare our index.html and main.styl file. The body of our index.html file should look as follows:

下一个示例将演示我们如何轻松地更改单元格的垂直对齐方式。 让我们准备一下index.html和main.styl文件。 我们的index.html文件的body应如下所示：

<div class="my-grid"> <div class="label"> <strong>Vertical Top</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 top"> Second cell </div> </div> <div class="my-grid"> <div class="label"> <strong>Vertical Center</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 middle"> Second cell </div> </div> <div class="my-grid"> <div class="label"> <strong>Vertical Bottom</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 bottom"> Second cell </div> </div>

And our main.styl file will have the following code:

我们的main.styl文件将具有以下代码：

@import 's-grid-settings' @import 's-grid-functions' @import 's-grid-classes' .my-grid background-color #E9E9EA margin-top rem-calc(100) center(500) grid() .label stack() text-align center .my-cell-1, .my-cell-2 stack() padding rem-calc(10) background-color #D5D5D7 @media screen and (min-width: rem-calc(breakpoints[md])) .my-cell-1 height rem-calc(300) cell(2, 3) .my-cell-2 &.top cell(1, 3, align: 'top') &.middle cell(1, 3, align: 'center') &.bottom cell(1, 3, align: 'bottom')

Now when we recompile our main.css file and run index.html in the browser, we can see how the second cell is aligned in all three cases. Basically you use the align attribute in the cell() function. You’ll notice that the first cell is also wider. This is because we have set it to 2/3 and the second one to 1/3. The first one has the static height declared just for demo purposes.

现在，当我们重新编译main.css文件并在浏览器中运行index.html时，我们可以看到在所有三种情况下第二个单元格如何对齐。 基本上，您可以在cell()函数中使用align属性。 您会注意到第一个单元格也更宽。 这是因为我们将其设置为2/3，将第二个设置为1/3。 第一个具有声明为演示目的的静态高度。

You can play around with this example on CodePen in the demo below:

您可以在下面的演示中在CodePen上使用此示例：

See the Pen sGrid – Changing cell alignment by SitePoint (@SitePoint) on CodePen.

见笔sGrid -更改单元格对齐方式由SitePoint( @SitePoint上) CodePen 。

And just for good measure, here is another layout example using sGrid: This is a one-page layout with full-screen cover. Take a look at the responsiveness too.

出于很好的考虑，这是另一个使用sGrid的布局示例： 这是具有全屏封面的一页布局 。 看看响应速度。

何时不使用sGrid (When Not to Use sGrid)

sGrid is not for every use case and sometimes it’s faster and better to use standard native flexbox implementation. sGrid is a tool that provides a quick way to create responsive grids, but many custom use cases could be achieved in a couple of lines without sGrid and only with flexbox. Of course, sGrid is useful if you’re not as familiar with flexbox yet because it provides a handy abstraction on top of flexbox.

sGrid并非适用于所有用例，有时使用标准的本机flexbox实现会更快更好。 sGrid是提供快速创建响应式网格的工具，但是在没有sGrid且仅通过flexbox的情况下，可以通过几行实现许多自定义用例。 当然，如果您还不熟悉flexbox，则sGrid很有用，因为它在flexbox之上提供了方便的抽象。

You should also remember about browser support. Flexbox is supported by the newest browsers, so if you want to support older versions of IE, you shouldn’t use sGrid. Also, there are problems with flexbox on IE11, which can be fixed. Philip Walton’s flexbox bugs repo is useful for understanding its problems.

您还应该记住有关浏览器的支持。 最新的浏览器支持Flexbox，因此，如果要支持IE的较早版本，则不应使用sGrid。 另外，IE11上的flexbox也存在问题，可以解决。 菲利普·沃尔顿(Philip Walton)的flexbox bug回购对于理解其问题很有用。

最后的话 (Final Words)

I hope you’ll find sGrid useful. This is, of course, only an introduction. You can find sGrid in some cool tools like React boilerplate, Grunt boilerplate with Assemble, and other tasks. Also there is a Meteor package.

我希望您会发现sGrid有用。 当然，这只是介绍。 您可以在一些很酷的工具中找到sGrid，例如React样板 ，带有Assemble的Grunt样板和其他任务。 还有一个流星包 。

I’m open to your ideas so let me know in the comments what you think. This grid system probably can’t solve all flexbox use cases, but I think this it’s a good, fast, and light solution when using Stylus and you don’t want to dig into flexbox too much and don’t need to support old browsers. I’m sure you’ll find it to be a useful tool for mobile hybrid apps and also for fast prototyping.

我愿意接受您的想法，因此请在评论中让我知道您的想法。 这个网格系统可能无法解决所有的flexbox用例，但是我认为这在使用Stylus时是一个很好，快速且轻便的解决方案，并且您不想过多地研究flexbox并且不需要支持旧的浏览器。 我相信您会发现它对于移动混合应用程序和快速原型制作都是有用的工具。

翻译自: https://www.sitepoint.com/introducing-sgrid-a-stylus-based-flexbox-grid-system/

sgrid

相关资源：Grid-EYE文档