MUI for Sass
mui-sass is a Sass-powered version of MUI framework for your Ruby applications. It works with Ruby on Rails, Compass, Sprockets, etc.
Installation
This package provides MUI framework CSS and JavaScript components. HTML Email, React, WebComponents and Design Files are not included.
Installation
Ruby on Rails
Add this line to your Rails application's Gemfile:
gem 'mui-sass'
And then execute bundle command to install.
Import mui in app/assets/stylesheets/application.scss:
@import 'mui';
Default Rails installation comes with .css file extension for stylesheet assests files, make sure you change it to .scss and remove all the //= require and //= require_tree statements from file.
Alternatively, to keep original application.css file, you can create custom.scss file in same folder and import mui there.
Require mui javascript in app/assets/javascripts/application.js:
//= require mui
Compass
To use Compass extension you'll need to install mui-sass gem:
gem install mui-sass
Existing Compass project
If you have an existing Compass project, open config.rb file and require mui-sass there:
require 'mui-sass'
Navigate to your project's folder and run command:
compass install mui -r mui-sass
This will create new file styles.scss, that imports MUI components.
Instead of the install command provided above, you can manually import mui:
@import 'mui';
New Compass project
If you are creating a new Compass project and wish to include mui-sass run command:
compass create project-name -r mui-sass --using mui
This command will create a new Compass project with styles.scss file, which imports MUI components.
Usage
By default, using @import 'mui'; and //= require mui, all of MUI components are imported.
You can import individual scss components like this:
First you need to include core components:
@import 'mui/normalize-3.0.2';
@import 'mui/colors';
@import 'mui/variables';
@import 'mui/mixins';
Then add component:
@import 'mui/appbar';
@import 'mui/buttons';
@import 'mui/dividers';
@import 'mui/dropdowns';
@import 'mui/forms';
@import 'mui/grid';
@import 'mui/helpers';
@import 'mui/layout';
@import 'mui/overlay';
@import 'mui/panel';
@import 'mui/ripple';
@import 'mui/scaffolding';
@import 'mui/semantic-markup';
@import 'mui/tables';
@import 'mui/tabs';
@import 'mui/typography';
The full set of MUI variables can be found here
Contributing
Fork the project and submit a pull request.