Bedrock Mini

For a lot of our projects we use a custom static site generator called Bedrock. It allows us to build large and complex prototypes, with tons of different pages, navigation between different states etc. It also contains quite a bit of functionality to provide documentation and component style guides.

On the other side of the prototyping spectrum is CodePen, which is a very lightweight tool that we often use test interaction ideas using HTML, CSS and Javascript. You can just create a new pen and start coding, right in the browser.

A Codepen looks a bit like this (try clicking the buttons):

See the Pen Native style screens transitions demo by Johan Ronsse (@wolfr) on CodePen.

I love Codepen, but it has its limitations. Sometimes you want to bring your code to your local development environment – but you don’t want to use a “heavy” prototyping setup like Bedrock.

For this situation I put together Bedrock Mini. Basically it is a Gulp workflow to compile Jade-based templates and SCSS. It contains BrowserSync and autoprefixer as well.

Bedrock Mini is open source and can be found on Github.