What's Slim Markup?

By Xah Lee. Date: . Last updated: .

“Slim” is a indentation based HTML template. 〔➤see Xah HTML Tutorial

Slim home page is https://github.com/slim-template/slim

Slim file has the extension “.slim”.

Here's what it looks like. This example is from Slim home page.

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    link rel="icon" type="image/png" href=file_path("favicon.png")
    javascript:
      alert('Slim supports embedded javascript!')

  body
    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks like.

    == yield

    - if items.any?
      table#items
        - for item in items
          tr
            td.name = item.name
            td.price = item.price
    - else
      p No items found Please add some inventory.
        Thank you!

    div id="footer"
      == render 'footer'
      | Copyright © #{@year} #{@author}

More Slim examples.

script#topic-nav-tmpl type="text/template"
  li class="{{ css }}"
    a href="/groups/{{ group_id }}/topics/{{ id }}" {{ title }}
script#group-join-tmpl type="text/template"
  #group-join-modal.modal.hide.fade
    .modal-header
      button.close type="button" data-dismiss="modal" aria-hidden="true" ×
      h3 Join a group
    .modal-body
      table.table.table-bordered.table-striped
        thead
          tr
            th Group Name
            th Group Description
            th Member Count
            th
        tbody#group-join-list

    .modal-footer
      button.btn data-dismiss="modal" aria-hidden="true" = t 'close'