SlimUser Guide

Overview

afSlim is a library for generating HTML from concise, lightweight templates. afSlim is based on Jade for javascript and Slim for Ruby.

Features include:

indentation driven - closing tags not needed
shortcut notation for IDs and classes
${...} notation to call Fantom code
efan template generation

Quick Start

Example.slim:

doctype html
html
  head
    title afSlim Example
    meta name="keywords" content="fantom html template language"

  body
    h1 Slim Example

    h2 Element shortcut notation:

      div#slimer This div has an ID of 'slimer'
      div.wombat This div has a class of 'wombat'
      div (style="color: red;") Attributes are specified in brackets

    | Use the pipe character for text.
      It also lets text be spanned
      across multiple lines!

    // This is a Slim comment

    /! This is a HTML comment

    | Use -- to execute Fantom code
    -- echo("Hello Pips!")

    | Use == to print the result of a fantom expression
    == "Hello " + ctx["name"] + "!"

    // Use $(...) notation to embed Fantom expressions
    | Hello ${ctx["name"]}!

    // Use the | char for javascript snippets
    script (type="text/javascript") |
      for (var i=0; i<3; i++) {
        console.info("Greetings from Slim!");
      }

Example.fan:

using afSlim

class Example {
  static Void main(Str[] args) {
    template := `Example.slim`.toFile.readAllStr
    ctx  := ["name":"Emma"]

    Slim().renderFromStr(template, ctx) // --> HTML!
  }
}

Syntax

The first non-whitespace characters of each line defines the content of the line:

.
 --  fantom code
 ==  fantom eval
 //  Slim comment
 /!  HTML comment
a-Z  HTML element
  |  plain text

Doctype

Start a line with doctype to print a document type. Currently only html is supported:

doctype html   -->   <!DOCTYPE html>

The doctype defines the element endings for tags. Example, doctype html will ensure elements are rendered as valid HTML 5 tags as described in W3C HTML 5 Syntax.

Elements

Element lines are formatted as:

element[#id][.class][.class] [(attributes)] [text]

div Text here           --> <div>Text here</div>
div#wombat Text here    --> <div id="wombat">Text here</div>
div.wombat Text here    --> <div class="wombat">Text here</div>
div(data-type="wombat") --> <div data-type="wombat"></div>

Note that attributes may also be enclosed in square brackets and curly brackets. Which is handy should you want to include brackets as attribute data.

div[data-type="(wombat)"] --> <div data-type="(wombat)"></div>
div{data-type="(wombat)"} --> <div data-type="(wombat)"></div>

Use all the shortcuts together:

div#robert.juice.media (data-on="You Tube") Rap News
-->
<div id="robert" class="juice media" data-on="You Tube">Rap News</div>

Slim Comments

Start any line with // to add a slim comment.

// This is a Slim comment

Slim comments do not appear in the generated html, but do appear in the efan template.

HTML Comments

Start any line with /! to add a HTML comment.

/! This is a HTML comment   -->   <!-- This is a HTML comment -->

HTML comments do appear in the generated HTML.

Fantom Code

Start any line with -- to write Fantom code. Use to call efan helper methods.

-- echo("Hello Mum!")

Note because Slim does not have end tags, you do not specify opening or closing { curly } brackets to denote blocks of code. Due to indentation, Slim works out where they should be.

-- if (ctx.doughnuts.isEmpty)
  | You're not a *real* policeman!
-- else
  ul
    -- ctx.doughnuts.each |nut|
      li ${nut.filling}

Fantom Eval

Start any line with == to evaluate a line of Fantom code and print it out in the template

== ctx.doughnut.filling

The resulting string is printed raw and is NOT HTML escaped. Evals should be kept to the one line.

Plain Text

Any line starting with a | denotes plain text and is printed raw. You can even embed HTML:

| Look at how <small>BIG</small> I am!

Unlike other line types, text may flow / span multiple lines.

| Use the pipe character for text.
  It also lets text be spanned
  across multiple lines!

You can use | as the first character of an element, handy for writing <script> tags:

script(type="text/javascript")|
  console.info("Hello...");
  console.info("     ...Pips!");

HTML Escaping

You can output Fantom expressions anywhere in the template by using the standard ${...} notation;

div Mmmm... ${ctx.doughnut.filling} is my favourite!

By default all text rendered via ${...} is XML escaped. To print raw / unescaped text use $${...}. Backslash escape any expression to ignore it and print it as is.

To summarise:

.
  ${...} escaped
 \${...} ignored
 $${...} raw / unescaped
\$${...} ignored

Release Notes

v0.0.2

New: Preview Release