Browser support
Before you start, please be aware that Material supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.
Alternative browsers which use the latest version of Blink, Gecko, or WebKit whether directly or via the platform’s web view API, are not explicitly supported. However, Material should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
Desktop browsers
The latest versions of most desktop browsers are supported.
Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Supported | Supported | N/A | N/A | Supported | Supported |
Windows | Supported | Supported | Supported, IE10+ | Supported | Supported | Not supported |
For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.
Unofficially, Material should behave and look well enough in Chrome for Linux and Chrome, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.
Internet Explorer
Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit Can I use for details on browser support of CSS3 and HTML5 features.
Mobile devices
Material supports the latest versions of each major platform’s default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini) are not supported.
Android Browser & WebView | Chrome | Firefox | Microsoft Edge | Safari | |
---|---|---|---|---|---|
Android | Android v5.0+ supported | Supported | Supported | Supported | N/A |
iOS | N/A | Supported | Supported | Supported | Supported |
Windows 10 Mobile | N/A | N/A | N/A | Supported | N/A |
CSS variables
Material includes CSS custom properties (variables) in its compiled CSS. These provide easy access to some commonly used values like our breakpoints, colours and font stacks.
Available variables
Here are the variables we include:
Examples
CSS variables offer similar flexibility to Sass variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our link styles with CSS variables.
You can also use our breakpoint variables in your media queries:
Sass
Utilize our source Sass files to take advantage of mixins, variables and more.
Whenever possible, avoid modifying Material’s core files. For Sass, that means creating your own stylesheet that imports Material so you can modify and extend it.
For example, you can create a custom.scss
and import either all of Material’s source Sass files or only selected parts you need. We encourage the latter, though be aware there are some dependencies and requirements across our components. You will also need to include some JavaScript for certain plugins.
With that setup in place, you can begin to modify any of the Sass maps and variables in your custom.scss
. You can also start to add parts of Material under the // Optional
section as needed. We suggest using the full import stack from our material.scss
file as your starting point.
Default variables
Every Sass variable in Material includes the !default
flag allowing you to override the variable’s default value in your own Sass without modifying Material’s source code. Copy and paste variables as needed, modify their values, and remove the !default
flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Material.
Here’s an example that changes the background-color
for the <body>
:
Repeat as necessary for any variable in Material.
Maps
Material includes a handful of Sass maps that make it easier to generate families of related CSS. We use Sass maps for our breakpoints, colours, and more. Just like Sass variables, all Sass maps include the !default
flag and can be overridden and extended.
Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making removing items from a map slightly more difficult.
Add to map
To add a new item to $sizes
, add the new key and value to your custom Sass file:
This will generate a new pair of .h-15
and .w-15
classes which will set height
and width
to be 15%
respectively.
Modify map
To modify an existing item in our $spacers
map, add the following to your custom Sass file:
Classes such as mb-5
will then set margin-bottom
to be 5rem
instead of the default 3rem
.
Remove from map
To remove an item from a map, use map-remove
:
However, please be aware that Material assumes the presence of some specific keys within Sass maps. As you customise the included maps, you may encounter errors where a specific Sass map’s key is being used.
For example, we use the danger
, success
and warning
keys from $theme-colors
for styling different states of some components. Removing the values of these keys may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.
Theme colours
Many of Material’s various components and utilities are built through a series of colours defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.
All colours
All colours available in Material, are available as Sass variables in our assets/scss/_colors.scss
file.
Amber
Blue
Blue grey
Brown
Cyan
Deep orange
Deep purple
Green
Grey
Indigo
Light blue
Light green
Lime
Orange
Pink
Purple
Red
Teal
Yellow
Here’s how you can use these in your Sass:
Theme colours
We use a subset of all colours to create a smaller colour palette for generating colour schemes, available in our assets/scss/variables/_palette.scss
file.
Primary
Secondary
Danger
Info
Success
Warning
Dark
Light
Here’s how you can use these in your Sass:
Add a theme colour
To add a new colour to $theme-colors
, add the new key and value to your custom Sass file. Please be aware that each new colour should also include darker and lighter shades of the primary colour to accent some parts of our components.
Modify a theme colour
To modify an existing colour in our $theme-colors
map, add the following to your custom Sass file. As aforementioned, each colour in our $theme-colors
map contains not only the colour itself, but also darker and lighter shades of it, so please make sure to modify all three values.