sgrid_sGrid简介：基于手写笔的Flexbox网格系统

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文件。 在<