Sassy Grids with Susy

This blog post is a long time coming. Any of my web dev friends would be quick to tell you that I’m a bit of a SASS fiend, and that I always try to share the wealth when it comes to a helpful mixin or timesaver. I’m also a bit of a purest when it comes to my web design techniques. I prefer to do things “by hand” and often times find myself trying to reinvent the wheel, even to a fault. It’s not that I actively shun front end frameworks like Bootstrap or Foundation, in fact I fully understand the awesome power and timesaving the frontend framework provides. I just prefer the hard way, and have more fun crafting out my own styles and layouts. That being said I’ve spent hours creating my own modular form styles that might as well have been a 5 minute task of including a CDN link and strapping up my HTML. For quick prototyping these comprehensive frameworks are an obvious path to take, even at the cost of being generic. But if allotted some time, I will choose the path that enhances my vision, and provides the most tangible learning opportunity for furthering my craft.

I think my friend Jesse Shawl put it best . . .

CSS frameworks are to frontend developers as IKEA furniture is to carpenters

My background and strength in object oriented programming has really informed my learning process. I learn by doing. I learn through experimentation, through struggle, through rolling with the punches and breaking through every barrier thrown my way. As I do more and more frontend work I see that this growth philosophy still applies. The declarative nature of writing CSS provides the necessary toughness for me to teach myself, and to improve my craft through constant discovery, and adjustment.

That being said, I would be remiss to not utilize the tools and timesavers that work best for the tasks at hand. I just want a certain level of ownership and customization.

Here comes SUSY . . .

One of the most common and ever-present needs in web layouts is the grid. After writing my own grid system and doing some research, I stumbled upon SUSY. Susy is a grid framework that makes creating custom grids a breeze. Here’s a brief overview of what Susy is all about.

The three tenets of Susy are . . .

  1. Your Markup
  2. Your Design
  3. Your Opinions

I also happen to love their mission statement

In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?

Susy provides that level of customization and ownership I look for in a front-end solution. Simply by using two SASS mixins I can now easily create and apply a customizable responsive-ready grid to my layout without having to pollute class names in my markup.

You apply Susy with the mixins “container” and “span”.

It’s as simple as . . .

body { @include container(80%); } //establish a layout context
nav { @include span(3 of 12); } //layout elements

In the code above span(3 of 12) is setting the column value, and calculating the column width, while the container(80%) is setting up the context for the grid.

Susy also provides easy customization and a variety of options by declaring a grid object. For example . . .

$susy: (
columns: 12,
gutter-position: inside,
math: fluid,
output: float,
flow: rtl,
);

Why Susy?

With Susy you can give your markup whatever classes you like.

It’s maintainable. Thanks to the global grid settings you can change column widths and layout with just a couple lines of SASS, instead of having to rewrite markup.

It’s light and fast. Susy will only output the styles you need for your specific layout, instead of including all of the styles for all of the grids at all of the widths.

It works well with others. I for one use Compass, Susy, and Breakpoint to easily develop responsive grid systems.

Susy is by no means perfect, and has it’s flaws. It requires you to think about math, and doesn’t provide the feedback that traditional column class naming provides. It also has the horribly named mixins “container” and “span” which in an effort to be semantic, actually are just confusing. But if you are like me and just want a highly customizable grid that doesn’t take away your control, Susy is a great tool which I highly recommend checking out.


Conclusion

If you would like to check out some code samples and learn more, visit my relevant GitHub repo, with materials from my 20-minute tutorial and talk about Susy at General Assembly DC, during a two-day UnConf.

If you have any questions or comments reach out on twitter

@citylims

Thanks for reading. Happy coding!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.