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:
- Materialize CSS
- Material Icons font from Google
- Rails and it's asset pipeline
- Google Material Design
Add this line to your Rails application's
gem 'mtl', git: 'https://github.com/at-point/mtl'
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
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
= 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
= mtl_icon :cloud = mtl_icon :send, class: 'right red' = mtl_icon :send, size: 'large'
Link elements It's possible to transform any element into a link using the following attribute:
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 rubygems.org.
Update materialize-css or icons
- Change version in
npm updateto fetch the new version
./bin/pull-all: this copies all resources to vendor/assets
- Follow NEXT STEPS closely as defined in output of
Bug reports and pull requests are welcome on GitHub at https://github.com/at-point/mtl. 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.