Minimill Project Template

Published on November 01, 2015.

When Jeff Hilnbrand and I started Minimill, we thought that one of our biggest comptetitive advantages over other design agencies could be our design and development speed. We work very well together and communicate well. But we also needed first-class tools to design and develop rapid iterations together.

When it comes to software engineering, fast usually means sloppy. But not always. In an effort to automate all of the best practices that I like to employ in websites, I built the Minimill Project Template, a static site generator powered by Gulp.

The installation is just three commands, and then the project template will:

• Use Handlebars.js to keep our HTML organized into templates and partials.
• Use SCSS to keep our CSS organized into logical components.
• Use Autoprefixer to automatically insert browser prefixes where necessary to handle cross browser compatibility.
• Use Browsersync to automatically launch a development version of our website, reload the page whenever we change the HTML, and inject changes to CSS, JavaScript, and images with needing to reload.
• Use HTML Minifier, CSSNano, UglifyJS, and ImageMin to compress and optimize our HTML, CSS, JavaScript, and images, respectively.
• Use SCSS-Lint, JSHint, and JSCS to perform linting and style checking on our SCSS and JavaScript files.

All with the command:

gulp serve

The result is that it's really easy to get started on a new project. Just clone the repo, make a few modifications, and I can jump right into implementing pages.