Creating reusable CSS components with a Sass Mini-Framework

We build a lot of websites, and it’s helpful to have some pre-built code snippets. CSS/Sass frameworks are pretty common (Bootstrap and Foundation are two common examples), but usually we only make use of a few components provided in the the framework, which makes the rest of the framework – and the setup involved – unnecessary for us.

Over time, we’re putting together a leaner approach focused more on modular components. This allows us to include (or not) various small helpers in our code to speed up the development process. In this post I’d like to share some of these CSS/Sass components in case you’d like to borrow them!

To date, we have six main components in our base styles:

  • Grid
  • Breakpoints
  • Clearfix
  • Buttons
  • Typography styles
  • WordPress styles

To use these, simply include them in your Sass project and use as specified.

Grid

This is where we started. This mixin provides a flexbox-based system useful for laying out different pieces of a website into columns and grids. I originally posted it on my website and then to Github. I’m not going to go too in-depth here because the mixin is well documented on Github (see link below).

The concept is simple, but a bit different than your traditional 12-column grid. In this system, you decide on the fly how many columns to have in your grid:

[row] { @include _fg(6); } // six columns

At this point, each child will use 1/6 of the available width of the container (with gutters in between). Want a particular child to use more – like 2/3 of the available width? Here’s how to do that:

.box { @include _fg_width(2/3); }

This will push subsequent items further out of the way, so they’ll wrap differently.

Breakpoints

Breakpoints are easy to write, but even easier if we can write them in shorthand using Sass. We prefer mobile-first development, in which our CSS code looks something like this:

Thus, we’re using only min-width media queries, so as the screen gets bigger, it inherits styles from the smaller sizes.

The mixin _fg_breakpoint allows you to specify any given pixel width for the media query:

Mixin Code

Example Usage

The following code would produce output like the mobile-first example above:

Clearfix

We always need a standard clearfix! Here’s a simple mixin that does it:

Mixin Code

Example Usage

A clearfix is generally applied to a parent element, whose children are floats. We want the parent element’s height to expand to the height of its tallest child, and for subsequent elements to display below.

Buttons

When we style a link as a button, we want it to display as inline-block and have a certain standardized color, padding, border style, and hover styles. Here’s how we get that:

Mixin Code

Example Usage

Given the above HTML markup, we would turn that link into a button like this:

Typography Styles

This is a set of typography styles that helps us standardize font sizes, etc. These styles look good and minimize the amount of tweaking we need to make typography look right on a given website. These build on the base reset styles provided by Normalize CSS (https://necolas.github.io/normalize.css/).

CSS/Sass Typography Styles

WordPress

Lastly, we do a lot of WordPress work, and it’s helpful to have some components in WordPress styled automatically – at least as a starting point.

CSS/Sass WordPress Styles