Middleman Bootstrap is my clean project starting point for the Middleman static site renderer. It includes HTML5 Boilerplate, Haml, Sass, Compass, a Mobile-first Responsive Susy grid system, and lots of best practices.
Middleman Bootstrap now comes with a Mobile-first Responsive grid system by default. Inspired by 320 and up and 320+Susy, the basic skeleton for a fully responsive layout is ready for you to use in your projects.
Put your responsive grid declarations in the /stylesheets/grid/media/ partials, and your width-specific styles in the /stylesheets/media/ partials. Remember, it's mobile-first, so your styles cascade up with larger browser widths.
Start by installing Bundler, if you don't already have it:
gem install bundler
Then just download the latest bootstrap source or if you prefer, clone the bootstrap repository down to your local machine:
git clone http://github.com/nathos/middleman-bootstrap.git my_new_project
Finally, do a bundle install to install the required gems -- even Middleman itself!
Use middleman server to do your live development and middleman build to render your static file output to the /build/ directory.
For full Middleman documentation, visit the Middleman website.
Middleman 2.0 now supports project templates. To use Middleman Bootstrap as a template, clone the Git repository into ~/.middleman, like so:
git clone http://github.com/nathos/middleman-bootstrap.git ~/.middleman/mm-bootstrap
then use the new template argument for the middleman init command:
middleman init my_new_project --template=mm-bootstrap
Easy peasy!
The default Haml layout is based on HTML5 Boilerplate, and is fully commented. (Don't worry, those comments aren't rendered out to your build directory)
Susy is the default grid system. However, you can enable the 960.gs grid system by uncommenting the appropriate lines in config.rb and the main screen.css.sass file. The other grid partials (_960gs.sass & _blueprint.sass) include a basic grid setup with comments.
(Note: Blueprint is built into Compass, so you can use its grid system just by uncommenting the appropriate @import line in screen.css.sass.)
I've taken a shine to Resonsive Design and the Susy flexible grid system, so I may deprecate Blueprint & 960.gs in a future version.
Send me a message or submit an issue. Thanks!
Following the lead of HTML5 Boilerplate here...
Major components:
- Modernizr: MIT/BSD license
- jQuery: MIT/GPL license
- Respond.js: MIT/GPL license
- YUI Profiling: BSD license
- HTML5Doctor CSS reset: Public Domain
- CSS Reset Reloaded: Public Domain
- Blueprint CSS: MIT license
- 960.gs: MIT/GPL license
- Susy: MIT license
Everything else:
- The Unlicense (aka: public domain)