Customization

Custom CSS

To create a custom MUI CSS file, first install the MUI package with Bower:

$ bower install mui

Then create a SASS file that defines MUI variables and imports the MUI SASS definition:

// import MUI colors
@import "bower_components/mui/src/sass/mui/colors";

// customize MUI variables
$mui-primary-color:       mui-color('purple', '500');
$mui-primary-color-dark:  mui-color('purple', '700');
$mui-primary-color-light: mui-color('purple', '100');

$mui-accent-color:        mui-color('green', 'A200');
$mui-accent-color-dark:   mui-color('green', 'A100');
$mui-accent-color-light:  mui-color('green', 'A400');

// import MUI SASS
@import "bower_components/mui/src/sass/mui";

Now you can compile your custom SASS file:

$ sass custom.scss

SASS Variables

Global variables
Variable name Default value
$mui-include-globals true
$mui-use-rem true
$mui-body-bg-color mui-color('white')
$mui-base-font-color mui-color('black-alpha-87')
$mui-base-font-family Arial, Verdana, Tahoma
$mui-base-font-size 14px
$mui-base-font-weight 400
$mui-base-line-height 1.429
$mui-base-font-smoothing false
$mui-link-font-color $mui-primary-color
$mui-link-text-decoration none
$mui-link-font-color-hover $mui-primary-color-dark
$mui-link-text-decoration-hover underline
$mui-cursor-disabled not-allowed
$mui-border-radius-default 2px
$mui-hr-color mui-color('black-alpha-12')
$mui-abbr-border-color $mui-primary-color
Media query breakpoints
Variable name Default value
$mui-screen-sm-min 544px
$mui-screen-md-min 768px
$mui-screen-lg-min 992px
$mui-screen-xl-min 1200px
Container sizes
Variable name Default value
$mui-container-sm 570px
$mui-container-md 740px
$mui-container-lg 960px
$mui-container-xl 1170px
Grid system
Variable name Default value
$mui-grid-columns 12
$mui-grid-gutter-width 30px
$mui-grid-float-breakpoint $mui-screen-sm-min
Colors
Variable name Default value
$mui-primary-color mui-color('blue', '500')
$mui-primary-color-dark mui-color('blue', '700')
$mui-primary-color-light mui-color('blue', '100')
$mui-accent-color mui-color('pink', 'A200')
$mui-accent-color-dark mui-color('pink', 'A400')
$mui-accent-color-light mui-color('pink', 'A100')
$mui-danger-color mui-color('red', '500')
Text colors
Variable name Default value
$mui-text-dark mui-color('black-alpha-87')
$mui-text-dark-secondary mui-color('black-alpha-54')
$mui-text-dark-hint mui-color('black-alpha-54')
$mui-text-light mui-color('white')
$mui-text-light-secondary mui-color('white-alpha-70')
$mui-text-light-hint mui-color('white-alpha-30')
$mui-text-accent rgba($mui-accent-color, .87)
$mui-text-accent-secondary rgba($mui-accent-color, .54)
$mui-text-accent-hint rgba($mui-accent-color, .38)
$mui-text-danger $mui-danger-color
Appbar
Variable name Default value
$mui-appbar-height 64px
$mui-appbar-height-xs-portrait 56px
$mui-appbar-height-xs-landscape 48px
$mui-appbar-bg-color $mui-primary-color
$mui-appbar-font-color mui-color('white')
Button
Variable name Default value
$mui-btn-height 36px
$mui-btn-height-lg $mui-btn-height * 1.5
$mui-btn-border-radius $mui-border-radius-default
$mui-btn-padding-horizontal 26px
$mui-btn-margin-vertical 6px
$mui-btn-spacing-horizontal 8px
$mui-btn-default-bg-color mui-color('white')
$mui-btn-default-font-color $mui-base-font-color
$mui-btn-default-ripple-color darken(mui-color('white'), 35%)
$mui-btn-primary-bg-color $mui-primary-color
$mui-btn-primary-font-color mui-color('white')
$mui-btn-primary-ripple-color mui-color('white')
$mui-btn-danger-bg-color $mui-danger-color
$mui-btn-danger-font-color mui-color('white')
$mui-btn-danger-ripple-color mui-color('white')
$mui-btn-flat-bg-color transparent
$mui-btn-flat-bg-color-hover darken(mui-color('white'), 5%)
$mui-btn-flat-ripple-color darken(mui-color('white'), 35%)
$mui-btn-floating-bg-color $mui-accent-color
$mui-btn-floating-font-color mui-color('white')
$mui-btn-floating-ripple-color mui-color('white')
Caret
Variable name Default value
$mui-caret-width 4px
Dividers
Variable name Default value
$mui-divider-color mui-color('black-alpha-12')
Dropdown
Variable name Default value
$mui-dropdown-bg-color mui-color('white')
$mui-dropdown-border-color $mui-divider-color
$mui-dropdown-border-radius $mui-border-radius-default
$mui-dropdown-link-font-color $mui-base-font-color
$mui-dropdown-link-font-color-hover darken($mui-dropdown-link-font-color, 5%)
$mui-dropdown-link-font-color-active $mui-accent-color
$mui-dropdown-link-font-color-disabled mui-color('grey', '200')
$mui-dropdown-link-bg-color-hover mui-color('grey', '200')
$mui-dropdown-link-bg-color-active mui-color('white')
Form
Variable name Default value
$mui-form-legend-font-size $mui-base-font-size * 1.5
$mui-form-legend-margin-bottom $mui-form-legend-font-size / 2
$mui-form-legend-font-color $mui-base-font-color
$mui-form-group-margin-bottom 20px
$mui-label-font-size 12px
$mui-label-font-color mui-color('black-alpha-54')
$mui-label-margin-bottom 3px
Input
Variable name Default value
$mui-input-bg-color transparent
$mui-input-bg-color-disabled transparent
$mui-input-font-color $mui-base-font-color
$mui-input-font-size 16px
$mui-input-height 32px
$mui-input-placeholder-color rgba(mui-color('black'), 0.26)
$mui-input-border-color $mui-input-placeholder-color
$mui-input-border-color-focus $mui-primary-color
Overlay
Variable name Default value
$mui-overlay-bg-color rgba(mui-color('black'), 0.20)
Panel
Variable name Default value
$mui-panel-bg-color mui-color('white')
$mui-panel-padding 15px
$mui-panel-border-radius 0
Select
Variable name Default value
$mui-select-menu-font-size $mui-input-font-size
$mui-select-menu-bg-color mui-color('white')
$mui-select-menu-item-height $mui-select-menu-font-size + 26px
$mui-select-menu-item-bg-color-selected mui-color('grey', '200')
$mui-select-menu-item-bg-color-hover mui-color('grey', '300')
Table
Variable name Default value
$mui-table-cell-padding 10px
$mui-table-border-color $mui-divider-color
Tabs
Variable name Default value
$mui-tab-font-color $mui-base-font-color
$mui-tab-font-color-active $mui-primary-color
$mui-tab-border-color-active $mui-primary-color
Textarea
Variable name Default value
$mui-textarea-height 64px
« Previous Next »