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.