The front-end team here at Code School has numerous projects happening on any given day, and over the years, we’ve found tools that work best for us. And one of those tools is Middleman — a remarkable framework for building static websites. Here’s just some of what it can do:

• Set up a project’s starting files and directories
• Compile languages like Haml, Sass, and CoffeeScript
• Trigger page refresh in development via LiveReload
• Add vendor prefixes to CSS via Autoprefixer
• Integrate with Bower to manage dependencies

Middleman offers so much convenience and ease of use that we jump at every opportunity to work with it. More often than not, these opportunities come in the form of prototypes and small websites. So today I want to share with you how Middleman helps us with each of these 2 use cases.

1. Prototypes

We often have a different goal with each prototype we create. Sometimes, we’re struggling with implementing a complex design pattern in the production codebase, and want to tackle the problem in a smaller environment. Other times, we’re collaborating with other members of the team, and designing in the browser is the most effective way to communicate.

No matter the reason behind a prototype, Middleman has everything we need to jump right into code. Like I mentioned earlier, this includes support for tools like Autoprefixer, LiveReload, and various preprocessors, but there are also a ton of extensions and project templates that are built by the community. These tools streamline the development process immensely and allow our team to iterate on designs very quickly in the browser. In a matter of minutes, we’re able to create a new project (usually via our Middleman starter kit, Baseman), start up a local server, write some markup and styles, and then see any changes updated instantly in the browser.

Perhaps my favorite thing about prototyping with Middleman is the set of helpersit has for generating placeholder content. We tend to use a lot of lorem ipsum text and placeholder images when implementing a user interface, and Middleman offers a convenient syntax for doing just that.

Using Haml, here’s how we’d write some quick markup for a blog post full of placeholder text and images:

Pretty intuitive, right? But what’s coolest here is that Middleman generates completely different placeholder text each time the page is refreshed. Instead of using lorem ipsum pasted in from the web, Middleman allows us to work with dynamic content when prototyping an interface. This means we’re able to discover problems with design patterns early on, and then iterate to improve them.

2. Small Websites

The biggest selling point of static site generators tends to be their ability to compile entire websites from only local files. These projects don’t require any backend development, and usually only need 1 or 2 developers to build out. For example, blogs, brochures, and documentation are all perfect candidates for using a static site generator — and Middleman is our favorite tool of the bunch.

Why? Middleman has everything we need to make building small websites as simple as possible. Here’s even more of what it can do:

• Minify HTML, CSS, and JavaScript
• Optimize both raster and vector images
• Append hash strings to static assets, which prevents browser caching

We have a few open-source Middleman websites across the web if you’re interested in checking them out. Over on GitHub, we have the source code for the MVCSS documentation, which contains the Middleman application we built to explain our CSS architecture. At Code School, we also co-host Design Orlando, a monthly design-related meetup in Orlando, Florida, and its site is written entirely in Middleman as well.

On the front-end development team at Code School, Middleman continues to be one of our favorite tools for web development — and it’s definitely our static site generator of choice. We think Middleman’s simple to set up and even simpler to use, so give it a try if you haven’t already.