Using Susy is pretty straightforward. Essentially it is a mixin scheme that applies a specified amount of columns to an element based on the total columns available. For example, in our Susy implementation from the previous article we specified a 12 column layout:
Without Sussy, to execute a flexible grid we use percentages in our CSS like so:
(See "Use Case Practice Problem".)
With Susy, instead of using percentages directly you specify the number of columns (out of the total columns available) that you would like an element to span through the Susy mixin
+span-columns(6 omega, 12)
Since we set the total number of columns in our Susy grid to 12, for the two elements we are targeting we need only set the total number of columns each element will span out of the available 12 columns in the grid, i.e.
+span-columns(6, 12) (half of the available columns).
NOTE: The "omega" in
.right-side denotes that the element will be the last column in the grid and therefore will not have a gutter (right margin).
With this information Susy calculates the percentages for you (or em's or px's if you would like) and produces the following CSS:
NOTE: You may have noticed the
max-with: 59em property in
.container. The reason this is generated by Susy is to constrain the maximum width in the largest of screens, while maintaining flexibility within this limit. Doing so ensures that pages do not completely span the widths of very large screens and thereby reduce readability. This setting, and many more, can be overridden in Susy quite easily.
That's it! A super simple example of basic Susy usage. In the next article I will explore Sussy breakpoints, my favorite feature of Sussy.
Want to know when the next article is published? Subscribe here. Thanks for reading!