Slim - Docs

Slim Docs

Install:

$ gem install slim

In your Gemfile (Rails)

gem 'slim'

Options:

Set one of the below options like so:


        Slim::Engine.set_default_options :pretty => true

Type	Name	Default	Purpose
String	:file	nil	Name of parsed file, set automatically by Slim::Template
Integer	:tabsize	4	Number of whitespaces per tab (used by the parser)
String	:encoding	"utf-8"	Set encoding of template
String	:default_tag	"div"	Default tag to be used if tag name is omitted
Hash	:shortcut	{'.' => 'class', ...}	Attribute shortcuts
String list	:enable_engines	All enabled	List of enabled embedded engines (whitelist)
String list	:disable_engines	None disabled	List of disabled embedded engines (blacklist)
Boolean	:sections	false	Enable sections mode (logic-less)
String	:dictionary	"self"	Name of dictionary variable in sections mode
Symbol	:dictionary_access	:wrapped	Access mode of dictionary variable (:wrapped, :symbol, :string)
Boolean	:disable_capture	false (true in Rails)	Disable capturing in blocks (blocks write to the default buffer
Boolean	:disable_escape	false	Disable automatic escaping of strings
Boolean	:use_html_safe	false (true in Rails)	Use String#html_safe? from ActiveSupport (Works together with :disable_escape)
Symbol	:format	:xhtml	HTML output format
String	:attr_wrapper	'"'	Character to wrap attributes in html (can be ' or ")
Hash	:attr_delimiter	{'class' => ' '}	Joining character used if multiple html attributes are supplied (e.g. id1_id2)
Boolean	:sort_attrs	true	Sort attributes by name
Boolean	:remove_empty_attrs	true	Remove attributes with empty value
Boolean	:pretty	false	Pretty html indenting (This is slower!)
String	:indent	' '	Indentation string
Boolean	:streaming	false (true in Rails > 3.1)	Enable output streaming
Class	:generator	ArrayBuffer/RailsOutputBuffer	Temple code generator (default generator generates array buffer)

doctype declarations:


/ XHTML DOCTYPES 

doctype html
  <!DOCTYPE html>

doctype 5
  <!DOCTYPE html>

doctype 1.1
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

doctype mobile
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

doctype basic
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/ HTML 4 DOCTYPES

doctype strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

doctype frameset
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

doctype transitional
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

HTML Comments

/! This is an HTML Comment
   Which you can nest if you'd like for multiline comments.

HTML Conditional Comments

/[ if lt IE 9 ]
   link href='/styles/iefix.css' media='screen' rel='stylesheet' type='text/css'

Static content on same line:

h1 This is my header

Nest static content:

h1
  | This is my header

Single apostrophe can be used in place of pipe if you want to ensure that a single whitespace is appended.

' This is a link to
    a href='http://ruby-lang.org' Ruby

Nest static content over multiple lines:

p
  | I have a lot to say ..
    Too much for one line
    And so on...

The space after the pipe becomes your left margin. Any additional leading spaces will be carried over.

Dynamic Content

h1 = page_header

Can also nest the call.

h1
  = page_header

Using Rails capture.

= capture :javascript do
  alert('Hello');

Control logic (as you would expect):

- if logged_in?
  li = link_to("Logout", logout_path)
- else
  li = link_to("Login", login_path)

Attribute shortcuts

The expected id ('#') and class ('.') shortcuts:

#myid.myclass.myclass2 My example

<div id="myid" class="myclass myclass2">My example</div>

The splat shortcut allows you turn a hash in to attribute/value pairs

/ splat turns a hash into attribute/value pairs
.card*{'data-url'=>place_path(place), 'data-id'=>place.id} = place.name

<div class="card" data-id="1234" data-url="/place/1234">Slim's house</div>

Custom shortcut allows you to define your own. If you do this you must define the '#' and '.' shortcuts.

/ To use this use must set the option
/ Slim::Engine.set_default_options shortcut: {'@' => 'role', '#' => 'id', '.' => 'class'}

.person@admin = person.name

<div class="person" role="admin">Daniel</div>

Dynamic content in attribute

a href="#{url_for @user}" = @user.name

An attribute without quotes is deemed dynamic!

a href=url_for(@user) = @user.name

Attributes with methods that return a boolean are special. Methods that return true will show the attribute without a value. The attribute will not show if the method returns false.

option value="Slim" selected=option_selected?("Slim")

Optional attribute wrappers: {...}, [...], (...)

h1{class=page_header_class} = page_header

h1[class=page_header_class] = page_header

h1(class=page_header_class) = page_header

When using an attribute wrapper you can have attributes span multiple lines:

h1( class=page_header_class
    id="myid")= page_header

The indentation is forgiving for readiblity:

h1( class=page_header_class
    id="myid")
 | Slim is sweet.

When using an attribute wrapper you can also have valueless attributes:

option(value="Slim" selected)

Optional attribute value wrappers: {...}, [...], (...)

h1{class=(page_header_class)} = page_header

h1[class={page_header_class}] = page_header

h1(class=[page_header_class]) = page_header

The outer wrapper is not required.

h1 class=(page_header_class) = page_header

h1 class={page_header_class} = page_header

h1 class=[page_header_class] = page_header

Use whatever reads best for you!

Evaluate Ruby code in text

h1 Welcome #{current_user.name} to Slim!

To bypass the interpolation (i.e. render as is)

h1 Welcome \#{current_user.name} to Slim!

Slim escapes html by default!

Rails provides an html_safe? method that Slim takes advantage of, but when rendering partials, you'll need to use the double equal to bypass the escape html functionality:

== render :partial => 'user'

To bypass escaping with interpolation:

p Current location: #{{request.path}}

Inline tags:

li.first: a href='a' foo

renders:

<li class="first"><a href='a'>foo</a></li>

Code comments (use a forward slash):

/ This is my comment, it will not be included on output
p This is my content

Can also nest comments.

/ This is my comment, it will not be included on output
  This is another comment line because I'm nested!
p This is my content

Span multiple lines (use a back slash):

= javascript_include_tag 'jquery',      \
                         'jquery-ui',   \
                         'application'

Engines:

Thanks to Tilt, Slim has impressive support for embedding other template engines:


	  ENGINE FILTER REQUIRED LIBRARIES
	  Ruby ruby: none
	  Javascript javascript: none
	  CSS css: none
	  ERB erb: none
	  Haml haml: haml
	  Sass sass: haml/sass
	  Scss scss: haml/sass
	  LessCSS less: less
	  Builder builder: builder
	  Liquid liquid: liquid
	  RDiscount markdown: rdiscount/kramdown
	  RedCloth textile: redcloth
	  RDoc rdoc: rdoc
	  Radius radius: radius
	  Markaby markaby: markaby
	  Nokogiri nokogiri: nokogiri
	  CoffeeScript coffee: coffee-script (+node coffee)

The following engines are embedded:
javascript, css, ruby

The following engines are executed at compile time:
embedded ruby is interpolated: markdown, textile, rdoc

The following engines are executed at compile time:
coffee, sass, scss, less

The following engines are precompiled, code is embedded:
erb, haml, nokogiri, builder

The following engines are completely executed at runtime (Usage not recommended, no caching!):
liquid, radius, markaby

coffee:
  square = (x) -> x * x

markdown:
  #Header
    Hello from #{"Markdown!"}
    Second Line!

Source: stonean/slim | Slim logo & site design by activestylus

Slim > Home

A lightweight templating engine