Previously, we had a friendly discussion on what we could use as a responsive layout framework for Drupal.org. Rupl, Banghouse, and myself played around with a lot of the options discussed in that post to work out which would be a good fit for us. Snugug also volunteered to help us out with technical questions and implementation.
We ended up deciding that using a Sass framework solves a lot of our problems, specially Susy. Implementing this framework is no small feat. We wrote a little summary of the Sass, Compass, and Susy implementation.
What is it
- Sass is a CSS Preprocessor designed as a meta-language on top of CSS and used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.
- Compass is both a framework for Sass, providing standard and useful cross-project functionality (such as prefixing CSS3 properties, building and using image sprites, inlining assets, etc…), and a plugin architecture to allow others to build and distribute extension for Sass.
- Susy is a semantic CSS layout framework entirely native to Sass distributed as a Compass extension. Read the documentation
Why use it
As we move towards embracing responsive design, pure separation of content and presentation becomes even more important. Every element on the page could change its layout or styling depending on the context it’s being viewed in. Binding grid-specific html classes and applying the same CSS throughout does not allow us the flexibility that a responsive, mobile-first layout requires. Grid-specific classes also add additional weight to every page when page weight is still very important. CSS is cacheable in the browser, HTML is not.
Sass allows us to abstract complex calculations and perform them when we compile the CSS we use on the site. Column widths can be assigned with simple properties such as span-columns(8) for an area spanning 8 columns in the context of our site’s container or span-columns(3, 8) for an area spanning 3 columns nested within an 8 column wide area. This keeps styling maintainable and accessible. Sass also provides a commenting style (//, inline) that allows us to write complex comments without printing those comments to our CSS, thus reducing our CSS’s file size.
Adopting the power of the Sass preprocessing language and the powerful Susy layout framework will give us the flexibility to easily apply new layouts at different breakpoints. Eventual adoption of Sass for the whole of the Bluecheese theme will make for a more maintainable and readable theme.
A lot of pages on Drupal.org use the current system, which is tied to the markup. In order to leverage the full flexibility of Sass and Susy we have to replace grid-specific classes with semantic classes. This is not necessarily taxing but it is a sizeable chunk of work, and will require a full audit of a large range of pages that are affected.
Sass requires some technical knowledge of the command line interface to install and Compass requires some initial work to leverage. This is a small technical barrier that may prevent some from contributing to the theme. This is outweighed by the increased usability that Sass, Compass, and Susy provide us as we build Bluecheese to be future friendly. There are also some GUIs that ease some of this pain for those unfamiliar with CLI.