Skip to content
A basic starter for creating responsive prototypes with Middleman
CSS Ruby HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

The Purpose of this Kit

First of all, I took an immense amount of inspiration from Thoughtbot's Middleman Template. The purpose of this template is to provide a starting point for responsive web prototypes. It can certainly be used for other purposes too, and Middleman is fairly extensible. This comes with Bourbon/Neat/Bitters/Sass/Livereload, however with no structure defined, you are feel free to use those opinionated libraries as much or as little as you'd like.

Before starting

Middleman is fairly friendly to non-professional developers, but not necessarily to complete beginners. You will need basic familiarity with Git, the command line, and standard web development markup. To configure the app, you will need at least some knowledge of the Ruby asset pipeline (very similar to Rails). If this has enough features out of the box, you might be able to get away with little to no exposure.

Here are some recommended resources to get acquainted with some of the above:

Getting Middleman and this app set up

Probably the biggest pain in getting Middleman up and going is just getting your environment up and running. Below are some steps aimed at individuals starting from scratch.

  1. Make sure xcode command line is installed by running xcode-select --install
  2. Install homebrew by running - /usr/bin/ruby -e "$(curl -fsSL"
  3. Install RVM to manage Ruby versions
  4. run brew install gpg
  5. run curl -L | bash -s stable --autolibs=enabled --ruby
  6. run rvm list to see what Rubies are installed. This starter template will be running Ruby 2.4.0. If it's not in the list, run rvm install 2.4.0. If it is, you can start using that version by running rvm use 2.4.0. You can also set it as the default by running rvm --default 2.4.0

Now let's get Middleman set up!

  • run gem install middleman

Now let's clone this repo!

  1. Open up iTerm and cd into the folder where you want to keep this directory. It's worth noting that I've had trouble in the past with keeping these projects within Dropbox folders
  2. Run git clone
  3. cd into the directory and feel free to change the name of the folder/project
  4. Run bundle install - this could take a while if you haven't run Rails or Middleman apps in the past
  5. Once your bundle is successfully installed, you can start running the app on your local machine by running middleman server or just middleman
  6. You're now ready to develop locally, with all the niceties of ERB, SASS, Bourbon, Neat, Bitters, livereload, and more if you'd like!
You can’t perform that action at this time.