MUI for Sass
MUI is a lightweight CSS framework that follows Google's Material Design guidelines
mui-sass
is a Sass-powered version of MUI framework for your Ruby applications.
mui-sass
allows to include MUI framework Sass and JavaScript components. React, Angular, HTML Email, WebComponents are not included.
Installation
Ruby on Rails
Open your Rails application's Gemfile and add this line:
gem 'mui-sass'
Save Gemfile and execute bundle
command to install the gem.
Open app/assets/stylesheets/application.scss
file and add this line:
@import 'mui';
Note: Default Rails installation comes with
.css
file extension for stylesheet assests files, make sure you change it to.scss
and remove all the*= require_tree .
and*= require_self
statements from file. Alternatively, to keep originalapplication.css
file, you can createcustom.scss
file in the same folder and importmui
there.
Open app/assets/javascripts/application.js
file and add this line:
//= require mui
Restart Rails web server if it was running and now your Rails application is powered by Sass version of MUI framework.
Usage
By default, using @import 'mui';
and //= require mui
, all of MUI components are imported.
You can also import individual Sass components.
First you need to include core and global components:
// Core variables and mixins
@import "mui/colors";
@import "mui/variables";
@import "mui/mixins";
// Globals
@import "mui/globals";
Then include desired Sass component:
// Components
@import "mui/appbar";
@import "mui/buttons";
@import "mui/checkbox-and-radio";
@import "mui/containers";
@import "mui/divider";
@import "mui/dropdown";
@import "mui/form";
@import "mui/grid";
@import "mui/panel";
@import "mui/select";
@import "mui/table";
@import "mui/tabs";
@import "mui/textfield";
// Miscellaneous
@import "mui/helpers";
@import "mui/overlay";
@import "mui/ripple";
@import "mui/typography";
Variables
Sass version of MUI framework provides many variables to make customization process convenient. The full set of MUI variables can be found here
To override the variable it must be redefined before the @import directive, like this:
$mui-base-font-size: 16px !default;
@import 'mui';
Versioning
MUI for Sass follows the upstream version of MUI framework, but last version number may be ahead, in case there is a need to release project specific changes. Some upstream versions may be skipped if they include no Sass/JavaScript related changes.
Please always refer to the CHANGELOG when upgrading.
Contributing
Anyone is welcome to contribute to MUI Sass. Please raise an issue, fork the project, make changes to your forked repository and submit a pull request.
License
MUI © Andres Morey, 2015. Released under the MIT license.
mui-sass
© Dmitriy Tarasov, 2015. Released under the MIT license.