The Slim Template Engine

This article will show you how to use the Slim Template Engine.


Published on:July 11, 2014

Introduction

Slim is a replacement for ERB, similar to HAML. Slim provides a nice lean syntax that's easy to pick up and learn. In this article we will learn how to use Slim in our Ruby on Rails application. Let's get started.

The Basic Slim Syntax

Slim is actually really easy to learn. Slim files are tab delimited, with the amount of spacing determining where the closing tags are. For example:


p
    | This is a very long paragraph

translates to:


<p>
    This is a very long paragraph.
</p>

In the above example you'll notice 2 things, first, the pipe (|) character is used to delimit free-form text on a new line. Second, we simply used p to specify the paragraph tag. This works for any tag, for instance you could just as easily have done:


h1 
    | Large Title

or more simply:


h1 Large Title

Note in the above example that we didn't specify the pipe character. The pipe character is only needed if we are entering free-form text on a new line.

There are also 2 shortcuts that we can use for divs. We can create a div with a default class like this:


.class

which translates to:


<div class="class"></div>

Likewise, we can create a div with an id by using:


#id

which translates to:


<div id="id"></div>

What about html attributes? Well, we specify them similarly to how we would in html. For example:


meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"

translates to:


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"></meta>

To specify a doctype we simply do:


doctype html

which translates to:


<!DOCTYPE html>

All of that is great, but what about Ruby code? Inserting Ruby code is pretty easy. Code that doesn't return a result, such as if statements or loops, are prefixed with a dash (-). For example:


- if @products.nil?
  p No results found. Please try again.

is equivalent to:


if @products.nil?
  <p>
     No results found.  Please try again.
  </p>
end

Slim will auto close your Ruby code as well, so end isn't needed. If you have code that returns output, such as the printing of a variable or property, you can use the equal (=) sign. For example:


= current_user.name

is equivalent to:


<%= current_user.name %>

Inline HTML is supported by simply typing it out. For example:


<b>inline html is supported</b>

You can embed javascript like so:


javascript:
   alert("hello world!")

Finally, your strings are Rubyized, so this:


| Hello #{user.name}

Would actually print out Hello with the user's name.

Great, that covers the basic syntax, now let's build a simple Rails app to demonstrate everything we just learned.

Rails Application Setup

The first thing we need to do is add a couple gems to our Gemfile. The slim gem tells Rails how to parse the Slim syntax. The slim-rails gem overrides the Rails generators for ERB and replaces them with Slim generators. Add these gems to your Gemfile as listed below.

Gemfile:

gem 'slim-rails'

Now let's run a bundle install to install the gems.

Terminal Commands:

bundle install

Now let's generate a Homes controller with a show action. Run the command below to do this now.

Terminal Commands:

rails g controller Homes show

Notice that the generated view ends in .slim, Rails has generated a slim file for us, courtesy of the slim-rails gem. Now let's modify our routes file to set up a resource and add a root path. Open up your routes file and modify it so that it looks like the code listed below.

config/routes.rb:

Rails.application.routes.draw do
  resource :home, only: [:show]
  root to: "homes#show"
end

Great! Now we are ready to play with slim. Open up the show view for homes and modify it so that it looks like the code listed below.

app/views/homes/show.html.slim:

javascript: 
	alert("HELLO!!!!!")
h1 Welcome to my site
<b>inline html is supported</b>
p
	| The time is #{ Time.now }, 
	  I Like to program in Ruby on Rails.
#hashtag I threw a hashtag in here!
#classy I'm classy!

p = Random.rand(10)

- if Random.rand(6) == 1
	|Lucky number 1!  You win!
br
br
small Goodbye!

This translates to:


<script>
  alert("HELLO!!!!!")
</script>
<h1>Welcome to my site</h1>
<b>inline html is supported</b>
<p>
  The time is <%=  Time.now  %>,
  I Like to program in Ruby on Rails.
</p>
<div id="hashtag">I threw a hashtag in here!</div>
<div id="classy">I'm classy!
</div>
<p><%= Random.rand(10) %>
</p>
<% if Random.rand(6) == 1
 %>Lucky number 1!  You win!
<% end %><br />
<br />
<small>Goodbye!</small>

That's it! That's all there is to it! For more information be sure to check out the website for Slim. Thanks for reading!