Customization

Custom CSS

To create a custom MUI email library 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 email SASS
@import "bower_components/mui/src/email/mui-email-inline";

Now you can compile your custom SASS file:

$ sass custom.scss

SASS Variables

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', 'A100')
$mui-accent-color-light mui-color('pink', 'A400')
$mui-danger-color mui-color('red', '500')
Layout
Variable name Default value
$mui-container-max-width 600px
$mui-container-padding-horizontal 15px
Scaffolding
Variable name Default value
$mui-body-bg-color mui-color('white')
$mui-link-font-color $mui-primary-color
$mui-link-text-decoration none
$mui-hr-color lighten(mui-color('black'), 88%)
Typography
Variable name Default value
$mui-base-font-color lighten(mui-color('black'), 13%)
$mui-base-font-family "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS"
$mui-base-font-size 14px
$mui-base-font-weight 400
$mui-base-line-height 1.429
$mui-base-letter-spacing 0.001em
Text colors
Variable name Default value
$mui-text-dark lighten(mui-color('black'), 13%)
$mui-text-dark-secondary lighten(mui-color('black'), 46%)
$mui-text-dark-hint lighten(mui-color('black'), 62%)
$mui-text-light mui-color('white')
$mui-text-light-secondary darken(mui-color('white'), 30%)
$mui-text-light-hint darken(mui-color('white'), 70%)
$mui-text-accent $mui-accent-color
$mui-text-accent-secondary lighten($mui-accent-color, 13%)
$mui-text-accent-hint lighten($mui-accent-color, 20%)
$mui-text-danger $mui-danger-color
Buttons
Variable name Default value
$mui-btn-height 36px
$mui-btn-height-lg $mui-btn-height * 1.5
$mui-btn-border-radius 3px
$mui-btn-padding-horizontal 26px
$mui-btn-default-bg-color mui-color('white')
$mui-btn-default-font-color $mui-base-font-color
$mui-btn-primary-bg-color $mui-primary-color
$mui-btn-primary-font-color mui-color('white')
$mui-btn-danger-bg-color $mui-danger-color
$mui-btn-danger-font-color mui-color('white')
$mui-btn-accent-bg-color $mui-accent-color
$mui-btn-accent-font-color mui-color('white')
$mui-btn-flat-bg-color transparent
Panel
Variable name Default value
$mui-panel-bg-color mui-color('white')
$mui-panel-padding 15px
$mui-panel-border-radius 0
Dividers
Variable name Default value
$mui-divider-color lighten(mui-color('black'), 88%)
« Previous Next »