101 Introduction

Declaring elements & hierarchies

SIML tries to emulate the syntax of CSS selectors, so you should be able to understand and use it if you know a bit of CSS. The basic gist is:

SIML will seek to create an HTML structure that satisfies the hierarchy you outline

So a becomes <a></a> and a.foo[href] becomes <a class="foo" href></a>. The CSS selector components currently supported include:

• Tags
• Classes names
• IDs
• Attributes

An example:

input#name.profile-input[placeholder='Your name']

Generates:

<input id="name" class="profile-input" placeholder="Your name" />

To create nested elements, you can either do within a single selector:

div a  // -> <div><a></a></div>

Or by nesting one within the other as you would with CSS properties (or SASSy CSS):

div {
  a
}

You can produce entire documents in the same fashion:

@doctype() // doctype directive (supported in HTML5 parser ATM)
html {
  head {
    meta[charset=utf-8]
    title 'Title'
  }
  body {
    h1 'Title'
    p 'Some content...'
  }
}

Out of the box, SIML also supports hierarchical indentation, so you can specify nesting without having to use curlies -- just use tabs/spaces (but do so consistently!):

@doctype()
html
  head
    meta[charset=utf-8]
    title 'Title'
  body
    h1 'Title'
    p 'Some content...'