Go to main content
  • Johan Ronsse

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.

Johan Ronsse

About the author

Johan Ronsse is an interface designer who is trying to find the balance between aesthetics and usability. He tweets as @wolfr_2.

Subscribe to our newsletter

Receive blog highlights and fresh insights into UX/UI and front-end development.

Leave a comment

Your email address will not be published. Required fields are marked *