MTL: Materializer

Tardis: mtl

Build Status

Welcome to MTL: Materializer, this is a Rails gem we use at at-point to simplify UI designs for back-office heavy applications by leveraging the following tools:


Add this line to your Rails application's Gemfile:

gem 'mtl', git: ''

then execute:

$> bundle

And finally run the installer to copy the "base files" to your application:

$> ./bin/rails generate mtl:install [--skip-simple-form]
# This copies the following files:
#    - app/assets/stylesheets/mtl.scss
#    - app/assets/stylesheets/mtl/_color.scss
#    - app/assets/stylesheets/mtl/_variables.scss
#    - config/initializers/simple_form.rb

Last but not least change your application.css to include:

//= require mtl

Ensure it does not contain any reference to require_tree ., as this leads to duplicate imports and weird asset pipeline errors.


Customize and adapt your styling as wanted, feel free to modify things in _variables.scss to your liking. Try to avoid changing _color.scss when possible.


In addition we provide a few Rails specific helpers.

Header, see header_helper.rb for more information and details, but a quick and dirty usage to render a navbar header is:

= mtl_header t('.title'), back: dossiers_path do
  = render 'filters'

Buttons, see [button_helper.rb][button_helper.rb] for details, these helpers allow to render raised and flat buttons and basically wrap link_to:

= mtl_button 'Next', some_path
= mtl_button_flat 'Cancel', some_path
= mtl_button_floating '+', some_path

Icons, see [icon_helper.rb][icon_helper.rb] for additional docs, but this helper is rather simple - it simply renders those <i class="material-icons">..</i> tags:

= mtl_icon :cloud
= mtl_icon :send, class: 'right red'
= mtl_icon :send, size: 'large'


Some javascript helpers are also provided, to ease complex application development

Link elements It's possible to transform any element into a link using the following attribute:

<div data-mtl-href="/myurl">Hello</div>


For development node and npm is required.

After checking out the repo, run bin/setup to install dependencies. Then, run rake spec to run the tests. You can also run bin/console for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run bundle exec rake install. To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and tags, and push the .gem file to

Update materialize-css or icons

  1. Change version in package.json
  2. Run npm update to fetch the new version
  3. Run ./bin/pull-all: this copies all resources to vendor/assets
  4. Follow NEXT STEPS closely as defined in output of pull-all


Bug reports and pull requests are welcome on GitHub at This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.


MIT License. Copyright 2016 at-point ag.