Sass in the Real World: book 1 of 4

Assemble the layout

Prior to this process, I started developing at the layout level. Abstracting concepts like modules and elements were extremely difficult to do and typically overlooked. By completing my UI development journey with the layout, we get to take advantage of all of the hard work done so far. Our layout Sass files should contain no more information then is needed to assemble a series of modules and elements. Imagine a sketch with gray boxes in the view, this is the document that creates that structure. Elements are never defined and modules are never engineered here.

I never advocate for sub-directories per layout, as things should never get that complex. At this level, assembling the layout should be taking 100% advantage of the elements and modules already engineered. If you find yourself involved in more complex development at this phase, I would argue that you need to review your work before engaging in more complex levels of code. An ideal file structure would look similar to the following.

|- sass/
|--- layouts/
|----- _home-layout.scss
|----- _marketing-layout.scss
|----- _search-results-layout.scss
|----- _order-summary-layout.scss

Typically I will name a layout Sass file after the semantic meaning of the view. In an MVC app, a great convention is either use the name of the controller or the layout template file and append the word -container or -layout. An example would be _sessions-container.scss or _sessions-layout.scss.

To keep things simple, I would then scope all the presentational Sass in a document by the same name, .sessions-layout {} for example. Using this class name can be achieved by dynamically adding the class to the <body> tag when the view renders or creating multiple layout templates with a static class applied. Use whatever works for you.

Our #1 goal with layout Sass files is to place control of the template UI into the hands of the CSS itself rather then depending on presentational classes in our markup. This becomes even more important when considering mobile/content first and responsive web design strategies.