I'm running a marathon for charity!   Donate Here.

My New Responsive Design Workflow - Custom Boilerplates and Grid Systems

August 15, 2013
4 minute read

Lately, I have been struggling with starting projects and keeping them organized and clean. I have tried using other people's grid systems, boilerplates, and starter files - only to find myself modifying them to no end. For example - I'll start off with Bootstrap using their grid system and a few buttons and alerts. But I soon realize that I don't like their typography. So I edit that. Then I realize I don't like the padding, margins, and fixed width and height on a few of their input elements. So I edit those. And the list goes on... By the time I end up with a finished product, I would have been better off just writing all the CSS from scratch.

Front End Web Developent Frameworks

What's even more frustrating is that sometimes I'll use something like Bootstrap only to end up having about 1000 lines of additional code that just sits in the stylesheet and adds unnecessary weight to the page. I'll either be too lazy to remove it or it's so intertwined with the other code that I don't feel like rooting out what I don't need. Sure I can create a custom build of bootstrap - but it's just not the same.

I have also gotten stuck in the same situation when building custom WordPress themes. I'd usually start off with a starter theme like _s (which is probably the best one I have found), then end up modifying it to no end. I DO realize that this is the point of a starter theme - it's just a place to start - it's not meant to be your final theme. But again, I find myself wasting a lot of time building in the same functions over and over again that could easily be reused for future themes. This time wasted on repetitive actions could definitely be better spent on building out new functionality, problem solving, or getting creative with designs. The point is - time is money, and I hate wasting money.

So I finally come to the point where I created a boilerplate of my own - a set of files for quickly prototyping single page HTML websites. It includes a mobile-first responsive grid system (which by the way is a fun exercise to create yourself), a reset from Normalize.css, and some other common CSS patterns that I typically use. It also sets the typography to how I usually like it for responsive website. It's easy for me to modify and best of all, it saves me a bunch of time! I can quickly get a prototype together in a flat HTML file and easily create a mock-up in the browser. This has proven to really get my projects started faster and even speeds up my WordPress theme development. It lets me build something that the client can see and feel right away. Instead of trying to explain a flat PSD to the client, they can actually see some movement.

I frequently make changes to this boilerplate when building new projects too. If there is something I am working on a in a project that I know I will use in another project - I just add it to the master files, then push it to Github. Easy as that - it takes a few minutes to stop what I am working on and add it to the master files - but in the long run it saves a lot of time.

I've also done the same thing with a WordPress stater theme. It's more work than creating a simple set of HTML, CSS, and JS files, but it definitely saves time in the long run. And I keep adding to the master files as I go along. This makes each new project I work on that much faster.

Of course, there will always be a time when certain modifications won't justify using my starter theme, but for the most part it serves it's purpose - it starts my project on a faster path than just creating it from scratch.

So my advice? Start your own boilerplate and scratch using everyone else's. Use your favorite elements from other systems out there and roll it into your own unique system. Here are just a few fun front-end projects that you can pull elements from when deciding how to build your own: