Introducing sGrid: A Stylus-based Flexbox Grid System

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.

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.

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.

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.

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.

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.

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.

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

[code language="bash"]
npm install -g s-grid autoprefixer-stylus
[/code]

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

[code language="css"]
@import 's-grid-settings'
@import 's-grid-functions'
@import 's-grid-classes'
[/code]

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:

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

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.

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.

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.

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.

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:

Continue reading %Introducing sGrid: A Stylus-based Flexbox Grid System%

by Julian Ćwirko via SitePoint