Home > css > Introducing sGrid: A Stylus-based Flexbox Grid System

Introducing sGrid: A Stylus-based Flexbox Grid System

December 2Hits:1

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:

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:

@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:

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.

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:

<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:

.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:

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

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:

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

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

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:

  • 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:

  • i / cols – fraction, so cell(1, 2) is half of the container
  • align – you can vertically align specific cells using the values ‘top’, ‘bottom’, or ‘center’
  • g – gutter

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

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

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.

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.

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:

<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:

.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.

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:

<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:

@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.

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

See the Pen sGrid – Changing cell alignment by SitePoint (@SitePoint) on 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.

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.

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.

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.

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.

Related Articles

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    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 an

  • Rasterizing vectors in SAGA via saga_cmd - how to set the exact cellsize, extent (basicly grid system) based on other grid?August 28

    I'm doing some batch analysis using SAGA's saga_cmd. Basicaly I have a lot of grids and shapes (mainly generated in SAGA by vectorization of raster classifiaction results). Now I'm trying to make thing's the other way: I want to run saga_cmd grid_gri

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • How 3 Modern Tools are Using Flexbox Grids

    How 3 Modern Tools are Using Flexbox GridsJune 16

    There are plenty of valuable resources (articles, tutorials, and online tools) discussing the flexbox layout module. Flexbox has gained so much traction that more and more grids and frameworks are supporting this powerful layout feature. In this arti

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • DesignFestival: Designing for the Web: Templates and Grid SystemsDecember 13

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size , we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues a

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

  • How does the grid system work for a full width page?August 25

    How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)? For example, take a look on these websites: http://vevo.com (Note: this

  • Adding custom layout to Omega child theme breaks grid systemSeptember 10

    I'm trying to create an new responsive layout in an Omega child theme. To do this I copied the grids variable from alpha.info into MYTHEME.info and added my layout (called 'narrower') based on the existing pattern: grids[alpha_default][name] = Defaul

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Grid system building methodology for webSeptember 18

    For a long time now, I have been using premade grid systems, like foundation grid for instance, which consists a grid of 12 70px columns, and 30 px gutters. But as my design passion seeks the best possible harmony and proportions, I'd like to build m

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • Grid system for mobile app mockups?February 10

    1) For native mobile apps (iOS7, Android etc.), do you guys do mockups using the grid system too? Like maybe, 4-column grid layout for mobile apps? I heard of the grid system being used for responsive websites but don't seem to hear much of it being

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Simple mobile-first/responsive Grid System (w/ IE8 Support)March 18

    I now use a grid system similar to that of the one created by André Luís located here: http://andr3.net/blog/post/142 and evolved by Lea Verou located here: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Made my first g

  • Build an XML-Based Content Management System with PHPJuly 9

    Like most developers, you've probably heard a great deal about XML and content management systems. It's likely, however, that you've only been exposed to theoretical discussions that haven't been grounded in practical knowledge. This step-by-step tut

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.680 s.