- This repository reached end-of-life and the gem is deprecated.
- We won't maintain it any more.

MTL: Materializer

Welcome to MTL: Materializer, this is a Rails gem we use at atpoint 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
• Lodash utilities
• Google Material Design

It requires jQuery (works very will with 3.x).

Installation

Add this line to your Rails application's Gemfile, it supports Rails 4.2+ (including Rails 5):

gem 'mtl', git: 'https://github.com/at-point/mtl'

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.

Usage

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.

Development

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 rubygems.org.

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

Documentation

To generate the a browsable html documentation site, use following commands:

• ./bin/yardoc
• open doc/index.html

Contributing

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.

License

MIT License. Copyright 2016 at-point ag. https://atpoint.ch