Back to Blog

Starter Code and Rapid Prototyping

Author

In the last six months I’ve become obsessed with my own development workflow. I’ve been attempting to optimize the tools I use, slim down the number of tools in my kit, and build repositories of starter code. The goal with my starter code is simple: start writing as fast as possible. To that end, I’ve developed a variety of starter kits using different code frameworks and with varying degrees of complexity to suit their individual tasks. All of them are available on GitHub for personal use, and I’d love some development contributions from the community.

Static Prototyping Framework

Kit 1: Static Site Starter

This is my basic starter kit for quick and simple projects. It’s HTML and file structure are based on the HTML5 Boilerplate project, so I know the basic templates are rock solid. I’ve also included a subset of the CSS from the Twitter Bootstrap project. This includes their reset CSS and a slimmed down version of their typography system that’s easy to build on top off. I’ve also built the file structure and CSS to take advantage of the SASS preprocessing language, and included a subset of Bootstrap’s variable system to aid in development. The Bootstrap framework is built using LESS, but I prefer SASS, so I’ve used John W. Long’s port of Bootstrap to SASS to make my own life easier. Finally, I’ve included thoughtbot’s Bourbon SASS mixins to make the use of CSS3 properties easier.

The goal with these tools is simple: I want solid starter code, streamlined development and the ability to clone files and start writing immediately. I began this kit when I realized that I was performing the same tasks whenever I started a new project. On several occasions I had ideas that I wanted to get working on, only to get sidetracked by all the tasks of setting up my code base. By the time I got through those repetitive tasks, all of my inspiration and motivation had disappeared. Now I can avoid that issue and start working whenever ideas hit me.

Kit 2: Static Prototyping Framework

This kit came from an early version of the Static Site Starter. The initial version included all of Bootstrap’s CSS and JavaScript files, along with a few other goodies. Eventually, I discovered that the first thing I’d do when I started a new project was delete most of the files. So, I split the project in two. Static Site Starter became my quick project kit, and Static Prototyping Framework became my more complicated setup for rapid prototyping uses. It includes the full SASS port of Bootstrap’s CSS and Javascript so that a developer has access to common UI elements. I’ve also refigured the file structure to take advantage of Jekyll. Jekyll is a static site generator built for maintaining blogs without the need to use a CMS. I take advantage of it for two key behaviors. The first is its ability to use includes in HTML files so I don’t have to repeat code. The second is its generation of a folder containing all the normal static files a simple site needs, so I can run my sites on a normal LAMP stack instead of a server that runs Jekyll, which is pretty rare outside of GitHub Pages. I’m not even using Jekyll for its intended purpose, but it’s one of the most important tools in my kit because it keeps me from having to copy/paste common code elements, such as navigation, headers and footers and it still generates the code that most of the static web runs on.

Kit 3: PHP Prototyping Kit

This kit is more of an experiment than something I actually use, but it’s worth mentioning because a lot of people probably already use PHP in the way I’ve used it here. This kit is almost exactly like the Static Prototyping Framework, but I’ve replicated the Jekyll functionality that I use most with PHP includes. It still allows you to write code without repeating yourself, but it doesn’t output static files at the end. The advantage is that more people are aware of PHP than Jekyll, so it allows some developers to get set up and running with a language they’re already comfortable with.

Also, it’s acronym is PPK, which is the chosen firearm of James Bond. I thought that was kinda cool.

Kit 4: Foundation Prototyping Framework

Finally, this kit is exactly like the Static Prototyping Framework, but it’s built using the CSS and JavaScript from the Foundation Framework by Zurb instead of Twitter’s Bootstrap. I wanted to give their framework a try because there’s a lot less styling than Bootstrap. Instead of overwriting existing styles and creating clunky, inefficient CSS you can build on top of very simple starter styles. Foundation and Bootstrap are both very nice, but Foundation has a much slimmer footprint, and I find that it encourages designs that don’t look like they were built on a CSS framework. Foundation currently runs on standard CSS, so I wrote a SASS version for this kit, restructured the files to fit my workflow more cleanly, and included a variation on the variables from Bootstrap to make quick style changes easier. The result is a kit that I think fits the purpose of the Foundation Framework even more cleanly than the original project does.

Wrapping It All Up

All of these projects have been open-sourced on GitHub for the use of anyone who’s interested. There’s no need to include an attribution or credit. Just use them wisely and make some great things! And if you’re interested in open source, check out some of these other Fresh Tilled Soil projects:

Author Steve Hickey

More posts from this author

How we work Process

Product Hero Talin Wadsworth