Removing Unnecessary CSS with Grunt and UnCSS

tl;dr version


While working on my portfolio I made myself a mental note to go back through the CSS and remove un-used CSS blocks. Since I was using Font Awesome (which is a really great icon font project), I knew I needed to manually remove a ton of styles that weren’t being used in the design. Things like the CSS animation section and all the icons I was not using from the library. As the project kept growing, I started to dread the day I would need to sift through the code and manually delete styles. It was turning into a daunting task.

Then I stumbled upon Addy Osmani’s article about grunt-uncss. The plugin uses PhantomJS to load your webpage and remove un-used CSS. Open Source FTW!

The biggest reduction in file size came from the Font Awesome library and the un-needed sections in the normalize.css file. All of those and a few others are concatenated into my master stylesheet using grunt.

After running the service, the results were a 53% (38kb -> 18kb) reduction in file size and an 18.5% (76ms -> 62ms) faster load time!

Caveats: the service removes CSS that may be needed conditionally. Like form validation styles for IE, or styles added using JavaScript; such as using responsive nav.

To prevent this, I ran uncss and created a new file titled styles-uncss.css. I then ran a diff against the original CSS file and the uncss version. This method allowed me to easily see what was removed. I then added bits back into the master CSS file which were needed that the plugin was not aware were needed.

Building a Responsive Two Column Layout

UPDATE #3: A new article has been added that addresses the layout issue with this solution. Please read about the new version of the codebase if you want to avoid the document flow issues found in this tutorial.

UPDATE #2: Added navigation/menu section to the demos. The GitHub repo and CodePen example has been updated.

UPDATE: Based on numerous comments about how to include a footer in the layout, I have added a footer to all examples with accompanying styles. Thank you everyone for your feedback! The GitHub repo and CodePen example have been updated as well.

tl;dr version

  • Demo
  • CodePen
  • Github Repo
  • Use min-width media queries to progressively enhance the layout of the design.
  • Use “box-sizing: border-box” to calculate borders as part of the total width of an element.
  • Use Scott Jehl’s Respond.js polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • All wireframes were created using Balsamiq Mockups. I highly recommend this tool for making quick wireframes.

Introduction

This tutorial will explain how to create a two column layout with one fixed column and one fluid column. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. We will start with a mobile first view that consists of the columns stacked on top of each other. We will later add media queries to make the columns sit side by side as screen size allows.

I created this tutorial because there are many examples on how to use a grid framework for responsive layouts, but not enough examples on how to create a custom layout that doesn’t need a full blown grid framework. Those frameworks are wonderful and very educational, but typically I don’t need an entire grid framework. I just need a simple flexible layout. I don’t need the overhead of styles that I won’t use and I have no use for a 12 column grid system.

Let’s imagine a layout that has a fixed right column of 300 pixels wide (or 18.75ems, if you are using 16 pixels as your baseline) and a left column that will be fluid. The left column will be for main content. The right column will be used for sidebar content. A place for ads, links, or other ancillary content.

Continue reading

Media Query Management

Responsive web design is arguably the de facto standard in web design today. One of the major principles of RWD is implementing media queries into designs to make them more flexible and more adaptive to the media that renders them. There are many wonderful examples on the web that showcase the power of media queries and how they can facilitate more adaptive designs. The examples are often only a few lines of code. This is great for learning, but those examples do not scale well in a real world project. It’s not always obvious how to organize and maintain your style sheet that includes lots of media quries. Especially if you are relatively new to the field.

An issue that I feel is not discussed enough is how quickly a style sheet can spiral out of control in a real world project. Using large blocks of media queries for the design’s breakpoints will rapidly bloat your CSS and make it increasingly difficult to navigate. Especially after you’ve left the project for awhile and come back to it later.

The following is a scenario that developers often fall into when honing their responsive web design best practices. Especially when learning how to manage media query statements. I hope this article provides you with some insight and prevents you from some of the pitfalls I have fallen into previously.

Continue reading

Media Query Snippet for Sublime Text

Declaring CSS Media Query rules has become standard practice during my recent responsive design projects. But declaring those rules has stunted my coding flow because I can never remember the correct syntax for a media query.

Even though I’ve written out the media query declaration hundreds of times, for some reason I haven’t committed the syntax to memory. I’m always looking back at a previous media query rule and pasting it to a new spot in my CSS file to declare a new breakpoint. This has become tedious because I have to stop my current flow and sift through my CSS document to find a previous media query, copy that rule, scroll back to where I was, and then paste the rule. And I’m still not done. I then need to edit the rule accordingly to change the ems or pixel breakpoint, or change the rule from max-width to min-width, or vice versa. First world problems, I know.

Since I primarily use Sublime Text 2 for editing, I decided to create a snippet that would help with whatever brain damage prevents me from memorizing the media query syntax. Now, all I have to do to create a min-width or a max-width media query is simply type ‘mq’ into Sublime and a contextual menu pops up that allows me to select the snippet (or I can press Tab). Once I’ve selected the snippet, the code is pasted into the editor, and I can type ‘min’ or ‘max’ to create the corresponding rule. I can then tab once more to add a value to my media query. Then tab again to place my cursor inside the newly created rule and start adding CSS rules.

Here is the snippet I have been using regularly. It handles min-width or max-width:

Media Query Snippet


<snippet>
  <content><![CDATA[
@media screen and (${1: max or min}-width: ${2: enter value here}) {
    ${3:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>mq</tabTrigger> 
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Please give the snippet a try and let me know what you think. I hope someone else finds this snippets useful.

You can find this snippet as a Gist as well:

For more information on how to add a snippet to Sublime text, please see the following link:
https://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html

Prepros: Preprocessing Made Easy

Prepros is a tool I’ve been using in my development workflow for awhile now and I wanted to give the developer ( Subash Pathak), the praise he deserves. It’s one of the best tools in my developer toolkit.

Prepros makes it super simple to setup your project with the preprocessing juice it needs. It can do all the heavy lifting for you to preprocess javascript, css, and even images. It compiles LESS, Sass, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown. It also handles JS Concatenation. And it does this on the fly while developing in real time.

Error and success notifications instantly notify you if there is a problem with your latest save when the file is processed. If the is an error, the notification windows tells you the exact line number where the error has occurred. Very handy!

There are also a bunch of features that I haven’t tried yet that look really great. Such as Live Refresh,   Multi Device Refresh, and the built-in Web Server.

All you have to do to get started is drag your project folder onto the Prepros window. The app automagically detects the type of each file in your project. It also lets you toggle the preprocessor settings for each file to allow for maximum customization. You can add as many projects as you like and Prepros will keep track of them for you.

I highly recommend trying it out on your next development project. It is super easy to setup and there are versions for Windows, OSX, and a Chrome Extension.

It is also great for those who aren’t always comfortable using the command line or don’t want to fuss with all the manual setup. Myself included.