When I was a child, I was fascinated by the PBS show The Woodwright’s Shop. If you haven’t seen the show, the host Roy Underhill makes amazing projects out of wood using manual hand tools. A significant portion of the show featured Mr. Underhill crafting his own tool to aid him in upcoming projects. For some reason, the tool making was my favorite part of the show.

As a front end developer I have used plenty of boilerplates and frameworks in my work. If you have ever used one you know that they come with advantages and disadvantages.  Recently, I was inspired to build my own toolkit to replace *off the shelf* web boilerplates. The results are a better understanding of the code, and ultimately, a cleaner finished product.

The Woodwright’s Shop was full of wonderful tools, both custom-made and hand-me-downs. The shop’s collection could not be purchased at the local Home Depot. it was collected and crafted over time — job by job as the need grew.

This was the idea for my toolkit: Don’t sweat its feature list, build and collect tools as you make projects.

The starting point

We all have tools we already use for each project, so the first step is organizing them all into one place. Thankfully with the advent of SASS and static-site generators (we currently use Middlemen) adding tools to my kit has never been easier. I can keep my tools isolated in individual SASS and Middleman files allowing me to add and delete as needed.  Any site-specific styles are isolated and the toolkit is never altered directly.

The foundation

I would recommend starting with smaller pre-built tools that you are familiar with.

Here is my starting point:

• A CSS reset ( I like Normalize )
• A Grid, nothing fancy, I like to keep it light so I can add features in the future.
• Typographical base styles (Gridlover is a great way to start)

From this point, add the basics of a web page that you know you will need in most projects.  During the development of your next project, you may, for example, build a better contact form or drop down navigation. New  tools like these can be altered or added to the kit as you go and slowly it will grow.

 The benefits

The end goal for my toolkit was to jump start a project at its beginning. Eventually I was able to quickly and easily develop fully-responsive wireframes for internal (or client) review before full production began. Because these wireframes were built in my own code, and not with an *out of the box* solution, this code was not thrown away and was used in the final production of the site.

Building your own tools and toolkit takes time, and will never be complete. With this frame of mind, your tools can evolve with the web and help you produce better products —  to ultimately better serve your clients.