What I learned in one week with Slim from scratch

by Matthias


Learn new things every single day, they said………

Back in the days and by back in the days I mean 5 months ago, I got a new job for creating a new website for a florist. It’s pretty common that you use tools for a project that you know very well.

But why????????

  • lazy?
  • bored?
  • don’t want to spend to much time on it — go on with life faster?

But I guess I was pretty stoked about this new project and I wanted to try something new.

Introduction

What the …. is that Slim thingy?

Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic. So: less to write => freaking awesome :)

Slim’s core syntax is guided by one thought:

“What’s the minimum required to make this work”.

Right from the start, Slim was developed with optimal performance in mind.

Why use Slim?

  • Slim allows you to write very minimal templates which are easy to maintain and pretty much guarantees that you write well-formed HTML and XML
  • We also think that the Slim syntax is also aesthetic and makes it much more fun to write templates. Since you can use Slim as a drop-in replacement in all the major framework you can start easily.
  • The Slim architecture is very flexible and allows you to write syntax extensions and plugins.

However, in my opinion you should use Slim because of its features and syntax.

Source (http://www.rubydoc.info/gems/slim/frames)

How to start with Slim

You can install Slim via gem

gem install slim

or just install the syntax for your loved editor. I used Atom and Sublime Text 2. In the following screenshot you can see the syntax choose package from Atom.

Atom 1.0.2

For converting I used Codekit. It’s a pretty awesome tool and you can convert all kind of files there. If you’re interested in this tool, just check out the site and the twitter account from the man behind the project — Bryan Jones.

Syntax

Here is a quick example of the structure with Slim. You can find this example also at the ruby docs.

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.

== 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}

Paragraphs

In Slim you would use `|` (pipe) to mark a line of text. Thats fine for oneliners. If there are multiple lines of text following each other and you don’t want to use text_wrap of your editor you should try using the `’` (single quote) for marking a line that has a whitespace character at the end of the line.

For ending a paragraph always use the pipe.

Singleline:

slim
.textcontainer
| Hello and Welcome

Multiline

slim
.textcontainer
‘ Hello and Welcome
| to this Slim style guide

If there are paragraphs that would contain tags in it, pipes are preferred for lines before the tag. Special spacing around this tag should be done by using the `<` and `>` characters which add a space before or after the tag. But they can also be combined.

Text with Tags between

slim
.textcontainer
| This information is
strong<> important
| for everybody

Text with Tag first

slim
.textcontainer
em> Note:
| Use with care for consistent code

Text with Tag last

slim
.textcontainer
| This movie really was
strong< AWESOME!!!

Tags

Tags in Slim are written without any special character at the beginning. Also if you’re using a **class** or an **id** without a tag, it will spawn a div tag for you.
Because of this behaviour it’s preferred not to write `div` tags, as long as they have a class or id.
An edge case would be if the **class** or **id** needs to be passed on as an attribute.

All other Tags should be written out.

Tag Variations

slim
.class This is some Content
#accountname Jennifer Doe
h1#superheadline DunDunDun…

Nesting Tags

Most of the time when you want to nest Tags in Slim, you just use the indentation. Thats fine in most cases but for some, nesting on one line is preferable as it reduces space and won’t destroy readability.

Nesting on the same line can be done using `:` and should be followed by a white space character.

Tag Variations

slim
/ CORRECT
ul#foods
li: p Pizza
li: p Lasagna
li: p Fries
/ WRONG
ul#foods
li
p Pizza
li
p Lasagna
li
p Fries

Attributes

Of course you want to use attributes on many elements, for example `data` attributes for passing on certain values, or using an **id** from a rails variable. Let’s first look at how to use attributes best.

All Valid Options

slim
a href=”…” = value
a(href=”…”) = value
a{href=”…”} = value
a[href=”…”] = value

Even if all the options above are valid, the latter one with brackets is the preferred version. Reason for this is that is the closes to what one would use in plain CSS to select an element by an attribute. Also it’s only one key to press.

Another reason for using any version of delimiter helps in spreading attributes over multiple lines.

Multiline attributes

slim
a[href=”#link”
title=”This link goes somewhere”
data-attribute=”some value”] = link-value

About the project

My idea about this new site was all about the work and content what she, the florist, provides for here customers. I wanted all of the content to be seen straight away by any user who enters the website.

Screenshot of the landing page

The code for this looks like:

I really liked to work with Slim. It’s easy and pretty pretty slick. I will continue to work with it in my personal projects but I also think that it’s not that easy to work with it in big projects.

Follow my friend @Codebryo, for checking his awesome work and his wisdom.

If you want to get in touch with me, feel free to hit me on @MHarreither

-Take care

Show your support

Clapping shows how much you appreciated Matthias Harreither’s story.