Grid systems are a fundamental part of design. They help create layouts, that follow conventions created by nature or man. However, in web design they used to be difficult to set up. Some years ago, people started creating so-called grid systems, pieces of CSS that could be used to create layouts that follow pre-defined grids.

Web, Library, Sass

This actually started out as a simple experiment on CodePen. When I realised that people were interested in it, I tried to flesh out the code a bit and make it more flexible. Over the next weeks I created a proper demo page and documentation.

Things I've learned

Putting the project on GitHub was the next step. It was an interesting process, with people helping me out with some bugs and requesting interesting new features. SSGS' moderate success got me interested in using GitHub more seriously and to start contributing to other open-source projects.

Technologies I've used

It's a relatively simple project. The biggest part of it is the SCSS code. Version 1 didn't rely on many features of SCSS and could've been implemented in basic CSS as well.

However, version 2 took things a step further. I started using loops, conditionals, extends, etc. and while the codebase turned more and more complex, SSGS became more and more powerful. In fact, I'm using a slightly modified version of SSGS on this site.

Open Source, Design, Development
HTML, Sass, Git, GitHub Pages

If you enjoyed reading this case study you might want to share it on Twitter, on Facebook, or on Pinboard. You should also take a look at the project's website, if you haven't already. For comments and questions, contact me through e-mail.