PostCSS Deep Dive: Miscellaneous Goodies

Throughout this series we’ve been through many different categories of PostCSS plugins, offering all kinds of different advantages for your CSS development. But some of the very best PostCSS plugins don’t fit into the categories we’ve covered in our previous series entries.

In this tutorial you’re going to learn about five of these “miscellaneous goodies”. We’ll cover:

Generating grids with Lost
Seeing how your designs look to colorblind people with postcss-colorblind
Converting px units to rem with postcss-pxtorem
Auto-generating an RTL version of your stylesheet with rtlcss
Auto-generating a style guide with postcss-style-guide

Let's begin!

Setup Your Project

As ever, the first thing you’ll need to do is setup your project to use either Gulp or Grunt, depending on your preference. If you don’t already have a preference for one or the other I recommend using Gulp as you’ll need less code to achieve the same ends, so you should find it a bit simpler to work with.

You can read about how to setup Gulp or Grunt projects for PostCSS in the previous tutorials

respectively.

If you don’t want to manually setup your project from scratch though, you can download the source files attached to this tutorial, and extract either the provided Gulp or Grunt starter project into an empty project folder. Then with a terminal or command prompt pointed at the folder run the command npm install.

Install Plugins

Now we’ll need to install five plugins into your project. Whether you’re using Gulp or Grunt, run the following command inside your project folder to install the plugins we’ll be using:

1	npm install lost postcss-colorblind postcss-pxtorem postcss-style-guide --save-dev

As well as these five we’ll also be using rtlcss, but as it works a little differently to other PostCSS plugins we’ll be using it via its corresponding Gulp or Grunt plugins.

If using Gulp, install gulp-rtlcss with the command:

1	npm install gulp-rtlcss gulp-rename --save-dev

And if using Grunt install grunt-rtlcss with the command:

1	npm install grunt-rtlcss --save-dev

Now we’re ready to load the plugins into your project.

Load Plugins via Gulp

If you’re using Gulp, add these variables under the variables already in the file:

var lost = require('lost');
var colorblind = require('postcss-colorblind');
var pxtorem = require('postcss-pxtorem');
var styleGuide = require('postcss-style-guide');

var rtlcss = require('gulp-rtlcss');
var rename = require('gulp-rename');

Now add each of those new variable names into your processors array:

    var processors = [
		lost,
		// colorblind,
		pxtorem,
		styleGuide
	];

Note: colorblind is commented out, which will be explained later.

Do a quick test that everything is working by running the command gulp css then checking that a new “style.css” file has appeared in your project’s “dest” folder.

Load Plugins via Grunt

If you’re using Grunt, update the processors object, which is nested under the options object, to the following:

        processors: [
          require('lost')(),
          // require('postcss-colorblind')(),
          require('postcss-pxtorem')(),
          require('postcss-style-guide')()
        ]

Note: require('postcss-colorblind')(), is commented out, which will be explained later.

Do a quick test that everything is working by running the command grunt postcss then checking that a new “style.css” file has appeared in your project’s “dest” folder.

Generate Grids with Lost

Lost is a completely PostCSS based grid generation system by Cory Simmons, the creator of Jeet, another very successful grid system written in Stylus. It has a long list of impressive features, yet its deployment is very straight forward.

Start by creating a file named “index.html” in your “dest” folder. We’ll be setting up a basic grid layout in this file. Add the following code to it:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="row">
	<div class="main"> 
		<h1>Main Area</h1>
	</div>
	<div class="sidebar">
		<h1>Sidebar</h1>
	</div>
</div>
	
</body>
</html>

Then add this code to your “src/style.css” to setup a basic two column grid layout, with a main area column and sidebar column:

@lost gutter 1.618rem;

.row {
    lost-center: 75rem;
}

.main {
	lost-column: 3/5;
}

.sidebar {
	lost-column: 2/5;
}

Let’s break down what we’ve done here.

First, we’ve use a @lost at-rule to set our own value for one of Lost’s options: gutter size. By default gutters (gaps between columns) are 30px. I always like to use 1.618rem for spacing in designs, so I’ve set that to be the new gutter size with the line @lost gutter 1.618rem;.

Next, we’ve setup a .row class that we’ll wrap around our columns. This only requires using the property lost-center and specifying a width for the row. The plugin will take care of setting a max-width on the class, centering it, and clearing it.

After that, in the .main and .sidebar classes, we’ve created our columns.

Lost doesn’t restrict you to working with a predetermined number of columns like twelve or sixteen; you can have any number of columns you want. Column widths are determined by using the property lost-column and setting a fraction as the value. In our code the .main class uses a setting of 3/5 so it will take up 3 of 5 columns, and the .sidebar uses 2/5 so it will take 2 of 5 columns.

Compile your file and in your “dest/style.css” file you should now see this code:

.row {
    *zoom: 1;
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
}

.row:before {
	content: '';
	display: table;
}

.row:after {
	content: '';
	display: table;
	clear: both;
}

.main {
	width: calc(99.99% * 3/5 - (1.618rem - 1.618rem * 3/5));
}

.main:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.main:last-child {
	margin-right: 0;
}

.main:nth-child(5n) {
	margin-right: 0;
}

.main:nth-child(5n + 1) {
	clear: left;
}

.sidebar {
	width: calc(99.99% * 2/5 - (1.618rem - 1.618rem * 2/5));
}

.sidebar:nth-child(n) {
	float: left;
	margin-right: 1.618rem;
	clear: none;
}

.sidebar:last-child {
	margin-right: 0;
}

.sidebar:nth-child(5n) {
	margin-right: 0;
}

.sidebar:nth-child(5n + 1) {
	clear: left;
}

And when viewed in a browser, your “dest/index.html” file should now present a two column layout like this:

It’s a little hard to see exactly what’s going on with our grid here, which is the reason Lost also provides lost-utility: edit; to highlight your grid for easy visualization during development.

Add this to each of the classes we’ve created so far:

.row {
    lost-center: 75rem;
	lost-utility: edit;
}

.main {
	lost-column: 3/5;
	lost-utility: edit;
}

.sidebar {
	lost-column: 2/5;
	lost-utility: edit;
}

Now when you recompile and refresh your page you should see your grid highlighted like this:

Let’s make that all a little clearer to see again with some extra styling (which will also help us with later sections in this tutorial). Update your “src/style.css” file to the following, adding a couple of extras like padding inside the columns and a few background and text colors:

@lost gutter 1.618rem;

* {
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	font-family: "Open Sans";
}

html {
	padding: 0;
}

body {
	padding: 1.618rem;
	background: #16a085;
}

.row {
	lost-center: 75rem;
}

.main, .sidebar {
	padding: 1.618rem;
	min-height: 500px;
}

.main {
	lost-column: 3/5;
	background: white;
	color: #232323;
}

.sidebar {
	lost-column: 2/5;
	background: #2c3e50;
	color: white;
}

Compile your CSS again and reload your page and you should now have a classic two column layout like this:

What we’ve covered here just skims the surface of what can be done with Lost, so be sure to read about all the rest of the features at: https://github.com/corysimmons/lost

See Through the Eyes of the Colorblind

Color blindness effects a larger portion of your site’s visitors than you might realize. For example, the most common type of color blindness is deuteranomaly, effecting 6% of all males and 0.4% of females. To put that in perspective, it’s estimated IE9 and IE10 combined are used by around 4% of all web traffic. One might suggest that if we can put a significant amount of time into supporting specific browsers, we can put an equal measure of time into supporting people.

The postcss-colorblind plugin by Brian Holt helps immeasurably in assessing how accessible a design is for people with various forms of color blindness, as it allows you to see for yourself how your color schemes would look if you had the same visual perception. It allows you to generate versions of your stylesheet that simulate eight different kinds of color blindness. Let’s see how you can use it.

Add Some Extra Colors

First, we’ll add some extra colors to our design so far to help us more clearly see the effect of the different stylesheets we’re about to generate. We’ll add five “metro style” tiles, by adding the following html below the row we already have in our “dest/index.htm” file:

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

Now add the following code to your “src/style.css” file to style these tiles with five different colors:

.row {
    margin-bottom: 1.618rem;
}

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

.tile:nth-of-type(1) {
	background: #f39c12;
}

.tile:nth-of-type(2) {
	background: #c0392b;
}

.tile:nth-of-type(3) {
	background: #8e44ad;
}

.tile:nth-of-type(4) {
	background: #2980b9;
}

.tile:nth-of-type(5) {
	background: #d35400;
}

After compilation, you should see your file now looks like this in a browser:

Generate Colorblind Simulations

You may have noticed that when we setup our processors array earlier the entry for colorblind was commented out. That’s because as soon as the plugin is active it will apply colorblind simulation to your stylesheet, so you don’t want to turn it on until you’re ready to use it. Uncomment it in the processors array now.

To simulate any of the eight types of colorblindness, pass the option method for this plugin in your Gulpfile or Gruntfile, along with the name of the type of colorblindness you want to check on.

For example, to simulate deuteranomaly set this option:

/* Gulpfile */
colorblind({method: 'deuteranomaly'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'deuteranomaly'})

Now recompile your stylesheet and refresh your page and you will see your design as a person with deuteranomaly does:

You’ll notice the colors look notably different. A person with deuteranomaly sees red and green differently, so while you’ll notice the blue is almost the same, the reds and greens are quite different.

To visualize protanopia set this option:

/* Gulpfile */
colorblind({method: 'protanopia'}),

/* Gruntfile */
require('postcss-colorblind')({method: 'protanopia'})

Recompile your stylesheet and now you’ll see this:

A person with protanopia essentially does not see red at all, and sees green in a different way. You’ll notice again that the strong blues are not too heavily effected, but purple has become pure blue, and the remaining colors have become variations of the same yellowish brownish colors. It has become very difficult to distinguish the red and two orange colored tiles from one another.

This ability to generate all different types of colorblind simulations is incredibly insightful, and helps us to ensure the color schemes we have chosen don’t rely on perception of a particular hue and are thereby accessible to all.

Read more about postcss-colorblind at: https://github.com/btholt/postcss-colorblind

Convert px Units to rem

In almost all designs, there are very good reasons for the rem unit to play a prominent role. However it is difficult to think in rem units, and much easier to think in px units when creating layouts. The postcss-pxtorem plugin helps with this speedbump, by automatically converting px units to rem units.

The plugin uses a white list of properties to which it applies, so by default px units will be converted to rem when used on:

font
font-size
line-height
letter-spacing

You can add extra properties to this white list by setting a prop_white_list option. Update your Gulpfile or Gruntfile to add the width property like so:

/* Gulpfile */
pxtorem({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),
        
/* Gruntfile */
require('postcss-pxtorem')({
	prop_white_list: ['width', 'font', 'font-size', 'line-height', 'letter-spacing']
}),

Now add the following code to your “src/style.css” file so we can test the conversion process:

1	.convert_this {
2	width: 500px;
3	font-size: 18px;
4	}

Compile your file and in your “dest/style.css” file you should now see the resulting rem values:

1	.convert_this {
2	width: 31.25rem;
3	font-size: 1.125rem;
4	}

Read more about postcss-pxtorem at: https://github.com/cuth/postcss-pxtorem

Generate a RTL Version of Your Stylesheet

If you are catering to a global audience, you may need to provide support for scripts that are read from right to left rather than left to right, such as Arabic and Hebrew for example. When the orientation of script is flipped, so too should the layout of your site so the entire design makes sense for those who look at the right side of the screen first.

The rtlcss plugin by Mohammad Younes makes the process of creating a right-to-left layout much easier, as it can automatically scan your stylesheet and convert its orientation, swapping the word “left” for “right” and vice versa.

This plugin actually works a little differently to other PostCSS plugins, in that we can’t add it to our processors array. Instead, during our project setup we installed the Gulp and Grunt plugins for rtlcss, and we’re going to setup separate tasks to execute it.

If using Gulp, add this code to your Gulpfile:

gulp.task('rtl', function () {
    return gulp.src('./dest/style.css')
		.pipe(rtlcss())
		.pipe(rename({ suffix: '-rtl' }))
		.pipe(gulp.dest('./dest'));
});

If using Grunt, add this line after your existing grunt.loadNpmTasks line:

1	grunt.loadNpmTasks('grunt-rtlcss');

Then add a comma , after your postcss task, and paste in this new rtlcss task:

rtlcss: {
	'default':{
		dest   : 'dest/style-rtl.css',
		src    : 'dest/style.css'
	}
}

Now, if using Gulp run the command gulp rtl, and if using Grunt run the command grunt rtlcss to generate a right-to-left stylesheet named “style-rtl.css” in your “dest” folder.

Edit your “dest/index.html” file to load “style-rtl.css” instead of “style.css”, refresh your site, and you should see your layout has been flipped around:

You’ll notice the text is still left aligned, but this can be easily remedied by just adding text-align: left; in your default stylesheet, which rtlcss will convert to text-align: right;.

Read more about rtlcss and its Gulp and Grunt counterparts at:

Generate a Style Guide

The postcss-style-guide plugin is a fantastic tool created by Masaaki Morishita. It allows you to generate a styleguide automatically based on your stylesheet. All you have to do is add some comments to your CSS, and those comments will be parsed as Markdown and used to populate your styleguide.

The first thing we’re going to do is configure a couple of options for our styleguide. We’re going to set the name of our project so it can be displayed in the header of the styleguide, and we’re also going to use a custom theme named 1column.

To install the custom theme we’ll be using into your project, run the command:

1	npm install psg-theme-1column --save-dev

Now update your Gulpfile or Gruntfile to pass a name and theme options as follows:

/* Gulpfile */
styleGuide({
	name: 'Auto Style Guide',
	theme: '1column'
})

/* Gruntfile */
require('postcss-style-guide')({
	name: 'Auto Style Guide',
	theme: '1column'
})

The way postcss-styleguide works is that it will look for your comments in your stylesheet and turn each one it finds into a styleguide entry. It will assume any comment relates to the CSS that follows it, all the way through to another comment or the end of the document.

For this reason, any CSS that you want to showcase in your styleguide should be moved to the bottom of your stylesheet. We’re going to have our colored tiles appear in the styleguide, as well as an h1 element, so we’ll need both of those to be at the end of our document.

Start by moving all the classes that effect our tiles down to the bottom of your stylesheet; that’s the .tile class and the five .tile:nth-of-type() styles. Then also add a little code to control h1 elements so the bottom of your stylesheet looks like this (the .tile:nth-of-type() styles aren’t shown to save space):

h1 { font-size: 42px; }

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

Now we can add in some comments to describe these styles. Any html added in these comments will be rendered as html in the styleguide, and the CSS that follows a comment will appear in a display box.

Add some comments to your stylesheet describing the h1 style and the .tile class, and including some example html, so you end up with the following:

/*
This is the h1 style

<h1>Heading 1</h1>

*/

h1 { font-size: 42px; }

/*
These use the .tile class

<div class="row">
    <div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
	<div class="tile">This is a Tile</div>
</div>

*/

.tile {
	lost-column: 1/5;
	padding: 3.75rem 1.618rem;
	text-align: center;
	font-size: 1.25rem;
	color: white;
}

Now compile your stylesheet, look in your project’s root folder and open the “styleguide.html” file you find there in a browser:

Hey presto, instant styleguide!

At the moment it looks a little funky because it has picked up the green body background color from our stylesheet. What we want is for our content to be on a white background, and we can get the styleguide to pick up some other code from our stylesheet to make this happen.

The central area of this styleguide template uses a section element, so above the comment describing your h1 element, add this code:

1	section {
2	padding: 1rem;
3	background: white;
4	}

Recompile your code, refresh your styleguide, and you’ll see it’s now making use of the styling we just added to section elements and looks like this:

There, much better.

Read more about postcss-style-guide at: https://github.com/morishitter/postcss-style-guide

Let’s Recap

Summing up everything we’ve covered above:

The Lost plugin allows you to create flexible grids with just a few properties, with lots of extra functionality available too should you need it.
The postcss-colorblind plugin lets you see for yourself how your designs look to people with any of eight different types of colorblindness.
The postcss-pxtorem plugin enables you to write code using px units but have them automatically converted to rem units during processing.
The rtlcss plugin automatically generates right-to-left stylesheets by scanning your code for the word “right” and replacing it with “left”, and vice versa.
The postcss-style-guide plugin automatically generates a styleguide, based on comments added to your stylesheet.

Coming Next: Make Your Own Plugin

In the next and final installation of this PostCSS Deep Dive you’ll learn how to unlock one of the biggest advantages that PostCSS offers; that being the ability to use it to create any type of functionality you want.

You’ll learn how to make your own basic plugin, and from that basis hopefully you’ll go on to make many more plugins for whatever need might arise in the future.

I’ll see you in the final tutorial!