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.
- See complete usage on Github: https://github.com/aaronjamesyoung/simplest-flexbox-grid
- See full code on Github: https://github.com/aaronjamesyoung/simplest-flexbox-grid/blob/master/_fg_grid.scss
- See a demo on Codepen: https://codepen.io/aaronjamesyoung/pen/yezKpj
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.