Getting started

Download with Composer

The recommended way for getting a theme is installing it with Composer.

composer require 'drupal/material_base:^1.13'

For more information see this page.

Download package

Project page on Drupal.org drupal.org/project/material_base

8.x-1.13

tar.gz (700 KB) zip (750 MB)

7.x-1.10

tar.gz (1.01 MB) zip (1.02 MB)

Clone or browse repository

Code stored on official Drupal GitLab repository git.drupalcode.org/project/material_base

8.x-1.x

git clone --branch 8.x-1.x https://git.drupalcode.org/project/material_base.git

7.x-1.x

git clone --branch 7.x-1.x https://git.drupalcode.org/project/material_base.git

Install

Install as usual, for further information see:

Recommended practices

Because Material Base mostly uses classes to stylize elements, we recommend to use this modules:

Since version 1.2 for Drupal 9+ default blocks will be automatically placed into default regions. Block Class module should be enabled.

For Drupal 7 (and Drupal 9+ 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.

Using

Material Base is a base theme with regular updates. Therefore making changes to the theme is not recommended, use subtheming instead.

In 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 (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 getting full control on styling the Material Compile template is a better choice.

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 color-themes, 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.

Component libraries

Material Base has modular architecture and you could unset or replace some libraries:

Libraries:

  • flexboxgrid;
  • color-themes;
  • theme-dark;
  • icons;
  • services-icons;
  • filetypes-icons;
  • helpers;
  • code-highlight;
  • fonts.

Build

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.

Requirements

  • node.js

Installing

Install Gulp

As suggested in the official project page — better to install Gulp globally:

npm install gulp-cli -g

Install dependencies

In theme folder run:

npm install

Notice

Runing 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 package.json by npm init command:
First make a copy of original package.json, remove node_modules folder (if exists), package.json and package-lock.json. Than copy devDependencies section from original package.json to newly created one and run npm install again.

Running build

For start build process run:

gulp build

or for build with watching for changes:

gulp

For customize build process and other options check gulpfile.js.