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

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.