Any website, even a simple landing page for lead-generation, has a lot of code underneath. The developers at Digital Telepathy (DT) use a specific method when building small, one-off projects: boilerplates. These speed-up the project initiation process, and create cohesion among our team allowing for faster iterations and greater “feature sharing” between our projects. Our Grunt boilerplates are available for download at Github, and we encourage you to go get them.

Our boilerplates are useful for any team that needs to spool up a new digital property leveraging modern web technologies. Boilerplates, which are like a template for code, create a wow-level experience for our clients. And they could help your next project, too. The issue is, many development teams don’t use boilerplates either because they (a) don’t know how, or (b) they don’t know they exist. True story.

Since our team has started to employ these boilerplates, we’ve seen less friction around setting-up, working with and handing-off projects. Boilerplates are saving us time and reinforcing best practices. This process improvement helps us to go from inception to strong, steady momentum. Immediately. Boilerplates save us hours, even days, off some projects.

Getting Started with Boilerplates

Here’s a video showing how to set up the boilerplate for the first time, and some of the benefits to using it.

Start out by downloading the chosen boilerplate from Github. Once that’s done, navigate to the project directory and run an installation command. This downloads and installs (if necessary) all of the required helpers. After everything is installed, you just need to run a single command and Grunt will start processing the CSS, concatenating the JavaScript, and reloading the browser when necessary.

This is by far the quickest and most robust way that we have found to start development on a single-page site or a site with a few pages.

Why Off-The-Shelf Code is Useful

All of the developers on our team are familiar with our Boilerplates. Currently, we use the aforementioned Grunt boilerplate (Less and Sass versions), and a “Middleman” project boilerplate. I’m sure that we’ll be publishing more boilerplates/starter projects in the future as we create other reusable pieces of code.

The file structure and naming conventions become standard.
Even though all teams should have documentation stating best practices and naming conventions, it’s easy to let this rule slip. If you’ve got your own boilerplate (or someone else’s) then there are already files and folders named appropriately; and Bootstrap or whatever framework is in use is installed correctly from the start.

Recurring issues are taken care of right out of the box.
No one will get to the IE8 testing stage only to realize there are missing shims/polyfills. If the boilerplate supports IE8, then it’s in there already, right?

Project handoff is simpler.
If a project needs to be handed-off, you can simply say, “This project uses our grunt-sass boilerplate.” If your teammate is up-to-speed on the boilerplates, then they already have an idea of how the JavaScript, Sass and live reloading works. The learning curve is all but eliminated.

Process improvement.
Our craft of Betterment ripples through everything we do. If a developer finds something that causes friction in a project setup procedure or while working on a build, then it’s voiced. If it can be fixed by adjusting the boilerplate then we are positioned to make it better for every future iteration. Once it’s added to the boilerplate, it will simply become part of the process and won’t have to be fussed over again.

Note: We have used LiveReload in the past, but have been experimenting with a different tool called BrowserSync. They are both great and get the job done. BrowserSync is more feature rich, and we have a branch of our boilerplate that uses BrowserSync as an alternative to LiveReload.

The Tools

The tools used are NodeJS, Grunt, Sass or Less and Bootstrap.

  1. NodeJS
    Node JS is the platform that Grunt runs on and is essentially the core of the build system.
  2. Grunt
    Grunt is a task-runner that relies on Node.js. It allows you to run a simple command and start a scripted build process where files are watched, processed, and concatenated. When the files are processed, the browser is notified and the pages reload or update.
  3. Sass/Less
    Use your CSS preprocessor of choice. DT has created versions of our Grunt boilerplate for Less and Sass. The Less version is simpler to use because it does not require Ruby. If you’re on Windows, this will be the version for you.
  4. CoffeeScript (Optional)
    With CoffeeScript, you write a more beautiful and concise version of JavaScript that is then compiled into regular JavaScript. There are less errors plus it’s more readable and maintainable. If you’ve been looking for an excuse to try CoffeeScript in one of your projects, then do it now. CoffeeScript support is added as a completely optional part of the build process. Here’s an example of how much more beautiful and concise CoffeeScript can be.
  5. Bootstrap
    Our Grunt Boilerplate uses Bootstrap 3 as a starting point, and it’s installed the right way. The bootstrap folder can be replaced with newer versions of Bootstrap 3.x  and the variables are all setup to be overridden, and not altered directly.
  6. Additional Scripts for Wide Browser Support
    Because a few extra shims and polyfills are included by default in this boilerplate, it supports a wide range of browsers. If you build something with this as a starting point, you can expect it to work in older versions of Internet Explorer (8 and higher) as well as all of the other modern browsers.

Leave the Molasses in the Kitchen

The concept of a development boilerplate can be useful to any company with multiple developers. Aligning on a set of default technical frameworks can help to onboard new employees or contractors—greatly reducing the learning curve and preventing the slow-as-molasses “momentum” that one-offs can be plagued with.

If you’re looking for a way to speed up your next web development project: try our boilerplate. It may not be the perfect fix for everyone, and, sure, it isn’t the right fix for large-scale site builds, but it’s got a lot of potential for one-offs. And even greater benefits for your team’s collaborative efforts.

Have questions? Have ideas about other cool dev tricks-of-the-trade? Hit us up in the comments, we’re listening.

  • Mason Lawlor

    Hey Jamie, great concept for novice developers to start using. One thing I thought worth bringing up is the fact that- word on the street is that Bootstrap is switching to Sass with BS4, so I made the jump from Less. Also, recently switched from grunt to gulp because I think the tides are shifting that way as well. Would love to hear others opinions on the matter.

    • jamie3d

      Hey Mason, thanks for the feedback! At DT, we are sampling a lot of technologies to see what works best. We’ve got a few projects built on Gulp and Sass, some with Grunt and Sass, and others with Less. It’s interesting to hear that BS4 may switch to Sass. I think we’re waiting to see what Grunt does in the next major rev before switching to Gulp.

      Again, thanks for the comment!

  • Nice introduction to the modern web development, Jamie. To take this further you can build a custom Yeoman generator. It’s more flexible as it allows you to build different types of projects (Sass vs. Less, etc.) from one code base.

    For inspiration you can check our generator here –

    • jamie3d

      Very cool! Thanks for sharing. This is definitely the next step in this type of process.

  • Great article, how about gulp? I think grunt was the best automation tool, but now gulp make the race.

    • jamie3d

      Yup, they are all options. For us, Grunt was the first and still does the job for now.

  • Craig Wilcox

    This is just what’s needed – and exactly no more – for someone trying to get up and running with Bootstrap with SASS. For a novice, having too much is worse. Much appreciated!

  • Boilerplates, huh, yeah this could be pain, thank you for nice article and tools.

    • You’re welcome! We try to make ourselves useful 😉