The BareBones template is my starting point for new projects. It provides a
great setup for frontend technology and can be plugged in with any backend
quickly. My instructions will be based on a unix operating system as it’s what
- jQuery – Because it’s so useful.
- AngularJS – Because it’s the future of data-driven
- CoffeeScript – Because it makes writing all
- Twitter Bootstrap – For quick scaffolding.
- SASS – Making writing CSS less painful.
- Compass – Making compiling SASS super easy.
- Bourbon – Great mixins for SASS.
- Middleman – Tool to build all files and compile
First off make sure you have ruby installed:
sudo apt-get install ruby-full rubygems1.8
Also make sure you have nodeJS and NPM installed:
sudo apt-get install -y python-software-properties sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs
Ensure you have middleman gem installed:
sudo gem install middleman
Ensure you have bower installed:
sudo npm install -g bower
Setup this repo as a template:
git clone email@example.com:dansackett/barebones ~/.middleman/barebones
Go to your projects directory and create a middleman project:
middleman init PROJECT_NAME --template=barebones
Change into your new project:
Install Bower assets:
You’re good to go!
In some cases I’ve found that the bundler doesn’t properly set middleman up in
the new project. If this is the case follow the instructions and do the
If you are having trouble running
middleman COMMAND try:
bundle exec middleman COMMAND
Working With this Project
Once it’s setup, you’re good to start working. This setup will allow you to
work on a server that live reloads as you make changes to your source files.
To get the server running, do the following:
bundle exec middleman server
This will create a server instance on
http://0.0.0.0:4567/. Navigate to that
URL and you have the website setup properly. You should now edit files in the
source directory. When you are finished editing and want to get the production
files together, do the following:
bundle exec middleman build
This creates your build directory and updates all files for shipping to
Enjoy the streamlined front-end life!