cheatsheets/middleman.md

---
title: Middleman 3
category: JavaScript libraries
tags: [Archived]
archived: This guide is for Middleman v3.
---

### About

**NB:** This is for Middleman 3, not Middleman 4+.

### Compass config

    compass_config do |config|
      config.output_style = :compact
    end

### Config

    # Automatic image dimensions on image_tag helper
    activate :automatic_image_sizes

### Gems

    # Susy grids in Compass
    # First: gem install compass-susy-plugin
    require 'susy'

    # CodeRay syntax highlighting in Haml
    # First: gem install haml-coderay
    require 'haml-coderay'

    # CoffeeScript filters in Haml
    # First: gem install coffee-filter
    require 'coffee-filter'


### Page command

    # With no layout
    page "/path/to/file.html", :layout => false

    # With alternative layout
    page "/path/to/file.html", :layout => :otherlayout

    # A path which all have the same layout
    with_layout :admin do
      page "/admin/*"
    end

    # Proxy (fake) files
    page "/this-page-has-no-template.html", :proxy => "/template-file.html" do
      @which_fake_page = "Rendering a fake page with a variable"
    end

### Helpers

    helpers do
      def some_helper
        "Helping"
      end
    end

### Directories

    set :css_dir, "alternative_css_directory"
    set :js_dir, "alternative_js_directory"
    set :images_dir, "alternative_image_directory"

# Build-specific configuration

    configure :build do
      activate :minify_css
      activate :minify_javascript

      # Enable cache buster
      activate :cache_buster

      # Use relative URLs
      activate :relative_assets

      # Compress PNGs after build
      # First: gem install middleman-smusher
      # require "middleman-smusher"
      activate :smusher

      # Or use a different image path
      set :http_path, "/Content/images/"
    end