Download with Composer
The recommended way for getting theme is installing it with Composer.
composer require drupal/material_base
For more information see this page.
Project page on Drupal.org drupal.org/project/material_base
Clone or browse repository
Code stored on official Drupal GitLab repository git.drupalcode.org/project/material_base
git clone --branch 8.x-1.x https://git.drupalcode.org/project/material_base.git
git clone --branch 7.x-1.x https://git.drupalcode.org/project/material_base.git
Install as usual, for further information see:
Because Material Base mostly uses classes to stylize elements, we recommend to use this modules:
- Block Class
- Drupal 8: Extra body classes (currently Context module don't support adding body classes for Drupal 8)
- Drupal 7: Context or Common Body Class
Since version 1.2 for Drupal 8 default blocks will be automatically placed into default regions. Block Class module should be enabled.
For Drupal 7 (and Drupal 8 with theme version < 1.2) after enabling your theme most likely existed blocks will not be placed in the right regions. Placing default or your custom blocks to regions designed for it and adding necessary classes would be a good start.
Material Base is a base theme with regular updates. Therefore making changes to the theme is not recommended, use subtheming instead.
starterkits subfolder there are templates for creating subtheme of Material Base:
material_cascade— for overriding and adding styles without recompilation base theme styles.
material_compile— for recompilation base theme styles, using variables and extending styles.
Material Cascade template
This template can be used if you are satisfied enough with default styles.
You still can use Sass + Compass (or any other way) for creating custom styles.
For changing primary and accent colors you can use Color themes styles.
The Dark theme style can be used only with default colors — Blue gray and Light blue.
This template is an easy way to get started, for taking full control of Material Base you should use Material Compile template.
Material Compile template
Using this template you can create a theme with many customizations such as fonts, colors, sizes and so on.
You can compile your custom styles using just Sass, and also go through the full build process with Gulp (see Build).
Gulp build also does post-processing:
- Adding prefixes (autoprefixer)
- Creating sassmap file
- Images minification (imagemin)
- JS and CSS lint (optional)
By default compilation process does not make new files for
theme-dark and other components except
styles. For recompiling that components you should add them to your theme manually.
Material Base uses Sass variables for values of colors, fonts, and sizes. The base theme contains default values which can be changed in
_variables.scss in your theme. During compilation, your values will be used instead of the default.
Also base theme contains full Material design color pallete which can be used for color values.
More information about using and changing default components you can find in the corresponding section of this documentation.
Using in non-Drupal projects
Material Base mostly not depends on Drupal and can be effectively used with any other generators or even static HTML.
Material Base uses markup and classes (less often ids) to stylize elements.
Material Base has modular architecture and you could unset or replace some libraries:
Material Base built with Gulp. Build script also added to starterkits, so you could use it for building your MB subtheme or even your own custom theme.
As suggested in the official project page — better to install Gulp globally:
npm install gulp-cli -g
In theme folder run:
npm install should download dependencies to
node_modules folder. In result,
node_modules folder should contain about 500 subfolders with dependencies.
If it does not happen (sometimes it does not happen automatically) try to manually create
npm init command:
First make a copy of original
node_modules folder (if exists),
package-lock.json. Than copy
devDependencies section from original
package.json to newly created one and run
npm install again.
For start build process run:
or for build with watching for changes:
For customize build process and other options check