Middleman Cheat Sheet

From WikiOD

Here is the cheatsheat of Middleman and basic guide on how to use Middleman NB: This is for Middleman 3, not Middleman 4+.

Compass config[edit | edit source]

compass_config do |config|
  config.output_style = :compact

Config[edit | edit source]

# Automatic image dimensions on image_tag helper
activate :automatic_image_sizes

Gems[edit | edit source]

# 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[edit | edit source]

# 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/*"

# 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"

Helpers[edit | edit source]

helpers do
  def some_helper

Directories[edit | edit source]

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

Build-specific configuration[edit | edit source]

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/"