Fork me on GitHub← back

Emblem.js

Installation Instructions

Ruby on Rails

To install Emblem on a Rails 3 project, just use add the following lines to your Gemfile and run bundle.

Define your templates in app/assets/javascripts/templates with the file extension .emblem. These will be automatically compiled and made available as Ember templates. Templates with the .raw.emblem extension will be compiled as vanilla Handlebars templates.

For a working sample project, check out:
github.com/machty/emblem-rails-demo

# Step 1: edit your application's Gemfile
gem 'ember-rails'
gem 'emblem-rails'

# Optional, use the older pre4 version of ember (the default is rc1)
#gem 'ember-source', '1.0.0.pre4.2'

# Step 2: rebundle and restart your dev server
bundle

# Step 3: create your .emblem templates in app/assets/javascripts/templates/

Inline HTML / Javascript

You can easily test Emblem in the browser (works great for sites like jsbin.com) by just including the Emblem compiler script and wrapping your Emblem templates with <script type="text/x-emblem">.

Your emblem script tags can also include data-template-name similar to inline Handlebars templates.

See a working JSBin demo here.

<!-- Step 1: Add Emblem.js -->
<script src="https://github.com/machty/emblem.js/raw/master/dist/emblem.js"></script>

<!-- Step 2: define templates -->
<script type="text/x-emblem" data-template-name="application">
  h1 Welcome to my App
  = outlet
</script>

Brunch.io

Emblem is supported in Brunch.io via the emblem-brunch plugin.

Follow these instructions to get started with Brunch.

Grunt (and Yeoman)

Emblem is supported in Grunt via the grunt-emblem plugin.

Follow these instructions to get started with Grunt.

Mimosa

Emblem is supported in Mimosa since version 0.10.1.

Follow these instructions to get started with Mimosa.

Once you’re setup, files ending in .emblem or .embl will be compiled as Emblem templates. If you’ve enabled Ember in your project, they’ll be compiled as Ember-ized templates.

Ember Tools

Ember Tools support coming soon!

MeteorJS

MeteorJS support coming soon!

Editors

At the moment, vim-emblem is the only editor plugin available for Emblem, but otherwise, Emblem.js is close enough to Slim that you can reuse most of the editor tools for Slim.

We’ve forked the Textmate/Sublime Text bundles so we can make improvements in the future.

# vim-emblem
Follow the instructions at https://github.com/heartsentwined/vim-emblem

# Sublime Text 2
Install "Ruby Slim" via Package Control and map it to .emblem files


# Textmate 1.x
cd ~/Library/Application\ Support/TextMate/Bundles/
git clone git://github.com/slim-template/ruby-slim.tmbundle.git Ruby\ Slim.tmbundle
osascript -e 'tell app "TextMate" to reload bundles'


# Textmate 2.x
cd ~/Library/Application\ Support/TextMate/Managed/Bundles/
git clone git://github.com/slim-template/ruby-slim.tmbundle.git Ruby\ Slim.tmbundle


# Vim users with Slim Syntax highlighting
au BufNewFile,BufRead *.emblem set filetype=slim