The first step was easy—create a repo.
From there, things got substantially more interesting.
Creating a common starting point for every project is more difficult than it may seem. We do a number of different kinds of projects at Sparkbox — Rails applications, ExpressionEngine-based sites, WordPress-based sites, and hybrids of various technologies. We wanted this new repo to be the starting point for the front-end dev on any of these.
Another consideration was the project’s end deliverable. Sometimes our deliverable might simply be HTML/CSS/JS templates, other times it might be the files and repo (build process and all). Ultimately, we didn’t want this starting point to dictate the final technology or deliverable, so the following components were deamed appropriate for all new projects:
- SCSS/Compass for CSS precompilation
- Grunt for build process
Running our build process on top of Ruby and Node allows us to leverage the incredible packaging systems within each technology (Gems and Modules). Our repo contains: a Gemfile, a package.json, a .rvmrc (for Ruby Version Manager), and a config.rb (for Compass). This gives us an easy way to manage what is being installed for each part of the process. It also lets us rest in the knowledge that with simple “
npm install” and “
bundle” commands the project will be up and running.
A Few Details
There are several other incredible features of this new starting point. First, with Grunt’s concat module we can do basic HTML templating. This allows for header and footer files to be shared by all pages, without the need for a specific back-end system to serve these files. Each individual static file is created at build time.
Another big win is the Grunt Modernizr plugin. This plugin combs through your JS and CSS and creates a custom Modernizr build that only tests the features you are testing for in your code; no more extraneous tests and endless box toggling over at modernizr.com.
We’re excited about our new starting point. We feel that it is an incredibly robust starting point for templating, while still providing enough flexibility for templates to be merged into their final home (i.e. Rails app, EE install, or static site). Feel free to clone it down and experience the zen for yourself. We’re pretty proud of it, but we’ll definitely welcome your pull requests.
Tips For Trying It Out
We made a bash function that wraps up all steps needed to get a project up and running into a single command. Feel free to try it out by sourcing it to your bash profile.
We also made a one line faux-installer to automatically add the function to your bash. Simply copy and paste the following into your command line to source the above function automatically:
bash <(curl -sL https://gist.github.com/raw/4673745/init_installer.sh)
(Feel free to read the source first if you are concerned about the script doing malicious things.)
With the function sourced properly, setting up a new project is as easy as typing “
sb_init project_name” into your command line. Enjoy!
Note: At Sparkbox, we use Macs for development. While you can install Ruby and Node on Windows, we have not tried it. Your mileage may vary.