CSS Architecture

I’m attempting to compile a comprehensive list of how developers and front-end engineers structure their CSS using the SMACSS (Scalable and Modular Architecture for CSS) approach.

What is SMACSS?

SMACSS stands for Scalable and Modular Architecture for CSS, and is more a style guide than a CSS framework. On a high level SMACSS aims at changing the way we are turning designs into code. Instead of working in a page mentality where you try to turn a single page design into code, SMACSS aims to identify repeating visual patterns. Those patterns are then supposed to be coded into flexible/re-usable modules, wich should be independent as possible from the individual page context. This is not a revolutionary point-of-view for a programmer, but in the web design world this is indeed a newer way of thinking.”

Continue reading “CSS Architecture”

Using Bourbon, Neat, Bitters & Refills

So why am I contemplating using Thoughtbot products when Bootstrap is so popular and much widely used in the web community?

  • Bourbon – “A simple and lightweight mixin library for Sass.”
  • Neat – “A lightweight semantic grid framework for Sass and Bourbon.”
  • Bitters – “Scaffold styles, variables and structure for Bourbon projects.”
  • Refills – “…prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.”

The idea of using clean and semantic markup that is based entirely on Sass mixins was pretty much the key factor which attracted me to try out Bourbon, Neat, Bitters and Refills.

Continue reading “Using Bourbon, Neat, Bitters & Refills”

Semantic classes in Bootstrap

According to Bootstrap, “you can modify the variables to your own custom values, or just use the mixins with their default values.”

Using @extend

An example of writing semantic code using Bootstrap is using @extend:

As written by Brad Borrow in the article Using Sass To Semantically @extend Bootstrap, he says that Bootstrap “makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.”

He goes on to explain what writing semantically means, “HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.”

Continue reading “Semantic classes in Bootstrap”

Features of Compass

“Compass is an open-source CSS Authoring Framework.” – Compass

“Compass can do some really handy tasks like measuring images from the filesystem and writing them into your stylesheets. Asset URL functions are available that make it easy to move assets around in a project or even switch to a content delivery network (CDN) without having to rewrite your stylesheets. Compass can even combine a directory of images into a single sprite image and do the otherwise tedious task of calculating coordinates and writing the spriting CSS for you.” – Sass and Compass in Action (Manning)

Continue reading “Features of Compass”