Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Susy is a popular library for Sass for helping with page layout. It is available on CodePen now.
- Choose Sass or SCSS as a preprocessor
- Put
@import susy;(or without semicolon in Sass) at the top of your CSS.
It works with or without Compass.
Susy doesn’t prescribe a layout for you, it’s a tool for building your own layouts. It makes that kind of thing easier, by abstracting away the math for containers and gutters and stuff, and handling any gotchas.
I quite like it. It’s like “the grid I want right now, on-demand.”
Learning Susy
There are a bunch of tutorials out there for Susy (list of them here). Like this video by Micah Godbolt that walks you through the settings:
Here’s the demo from that video:
See the Pen qlFnB by Chris Coyier (@chriscoyier) on CodePen.
The Future?
How would you ever know that CodePen supported Susy if you didn’t just read this blog post? At the time of this writing, you wouldn’t. And that’s not good. Like everything on CodePen, the system will evolve.
We want to start supporting more extensions and libraries (or whatever you want to call them) for preprocessors. We can’t just allow anything, especially ones that run custom server-side code. So we’re thinking we just kinda white-list a bunch of them and make them available.
The trick is they sometimes have dependencies. For example, Neat is cool, but has a Bourbon dependency which is a Sass add-on. Our current dropdown menu solution isn’t going to scale for that kind of thing, so we might end up ditching the dropdowns and having you just @import things as needed (and in the order of what’s needed). Then providing some kind of UI to show you what is available. Probably some of the most popular stuff from here and of course, what y’all tell us you want.