Typography

Fonts

Default font for headings and text is Roboto.

It can be changed in _variables.scss in your custom subtheme:

• $font-family — for text font;
• $heading-font-family — for headings font.

For using fonts on other elements there are referenced classes: font-heading and font-text.

Headings

For using headings on other elements there are referenced classes: h1, h2, h3, h4, h5 and h6.

<h1>Heading 1 (34px, weight 400)</h1>
<h2>Heading 2 (24px, weight 500)</h2>
<h3>Heading 3 (20px, weight 500)</h3>
<h4>Heading 4 (16px, weight 700)</h4>
<h5>Heading 5 (14px, weight 700)</h5>
<h6>Heading 6 (12px, weight 700)</h6>

...

<div class="h1">Heading 1 class</div>
<div class="h2">Heading 2 class</div>
<div class="h3">Heading 3 class</div>
<div class="h4">Heading 4 class</div>
<div class="h5">Heading 5 class</div>
<div class="h6">Heading 6 class</div>

Big title

Also there is big-title class which can be applied to h1 or h2 element wrapper to make heading big.

Useful addition class is margin-box which adds spaces before and after block.

<div class="big-title">
  <h1>Big title (56px)</h1>
</div>

Text

Default text size is 16px, weight 400

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 76 tempor inc 90 ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Decoration classes

Text secondary

Text disabled

Text primary

Text accent

Strong text

Subtitle text

Text with footnote*

<p class="text-secondary">Text secondary</p>
<p class="text-disabled">Text disabled</p>
<p class="text-primary">Text primary</p>
<p class="text-accent">Text accent</p>
<p><strong>Strong text</strong></p>
<p class="subtitle">Subtitle text</p>
<p>Text with footnote<span class="mark">*</span></p>

For using default font colors there are referenced classes: text-light and text-dark for dark and light (default) color theme respectively.

For change default font colors you can define these variables in _variables.scss in your custom subtheme:

For light theme:

• $color-text-dark (default is #000);
• $color-text (default is 87% opacity of $color-text-dark);
• $color-text-secondary (default is 54% opacity of $color-text-dark);
• $color-text-disabled (default is 26% opacity of $color-text-dark).

For dark theme:

• $color-text-light (default is #FFF);
• $color-text-light-secondary (default is 70% opacity of $color-text-light);
• $color-text-light-disabled (default is 30% opacity of $color-text-light).

Lists

<strong>Unordered</strong>
<ul>
  <li>List item 1;</li>
  <li>List item 2;</li>
  <li>List item 3.</li>
</ul>

...

<strong>Ordered</strong>
<ol>
  <li>List item 1;</li>
  <li>List item 2;</li>
  <li>List item 3.</li>
</ol>

...

<strong>Unstyled</strong>
<ul class="list-unstyled">
  <li>List item 1;</li>
  <li>List item 2;</li>
  <li>List item 3.</li>
</ul>

Color themes

According to Material design conception for application should be defined primary and accent colors.

Default colors in Material Base are blue grey as primary color and light blue as accent color.

In Material Base implemented easy way to change default primary and accent colors called color themes.

For using color themes:

• Drupal 8 — material_base/color-themes library must be included in theme;
• Drupal 7 — css/color-themes.css stylesheet must be included in theme.

For apply color you should add primary-* and/or accent-* class, where * is color name, to a body tag.

Official Material design colors names:

• red;
• pink;
• purple;
• deep-purple;
• indigo;
• blue;
• light-blue;
• cyan;
• teal;
• green;
• light-green;
• lime;
• yellow;
• amber;
• orange;
• deep-orange;
• brown;
• grey;
• blue-grey.

Last 3 colors (brown, grey and blue-grey) has not accent palette and can not be used as accent color.

Only default shade (500 for primary and a400 for accent) can be applied with color themes.

Example

For using other colors you need to define variables in _variables.scss in your custom subtheme:

For light theme:

• $color-primary-base (default is blue grey);
• $color-primary (default is 500 shade of $color-primary-base);
• $color-primary-hover (default is 600 shade of $color-primary-base);
• $color-primary-active (default is 700 shade of $color-primary-base);
• $color-accent-base (default is light blue);
• $color-accent (default is a400 shade of $color-accent-base);
• $color-accent-hover (default is ligher than a700 shade of $color-accent-base);
• $color-accent-active (default is a700 shade of $color-accent-base).

For dark theme:

• $color-primary-light (default is 400 shade of $color-primary-base);
• $color-primary-light-hover (default is 300 shade of $color-primary-base);
• $color-primary-light-active (default is 200 shade of $color-primary-base);
• $color-accent-light (default is a200 shade of $color-accent-base);
• $color-accent-light-hover (default is ligher than a200 shade of $color-accent-base);
• $color-accent-light-active (default is a100 shade of $color-accent-base).

Dark theme

There is another color theme in Material Base — dark theme.

For using dark theme:

• Drupal 8 — material_base/theme-dark library must be included in theme;
• Drupal 7 — css/theme-dark.css stylesheet must be included in theme.

For apply dark theme you should add theme-dark class to a body tag.

By default with dark theme applies only default primary and accent colors.

Example

For using other colors you need to recompile styles.css and theme-dark.css in your custom subtheme.

Sizes

Layout sizes

Default sizes for layouts and some other elements can be changed in _variables.scss in your custom subtheme:

• $content (default is 944px);
• $sidebar (default is 240px);
• $gutter (default is 24px);
• $drawer (default is same as $sidebar, 240px);
• $navbar height (default is 64px);
• $search (default is 392px).

To limit content width on wide layouts text-box class can be applied to content wrapper element.

Breakpoints

Default breakpoints can be changed in _variables.scss in your custom subtheme:

• $ss (default is 360px);
• $xs (default is 568px);
• $sm (default is 768px);
• $md (default is 992px);
• $lg (default is 1256px);
• $xl (default is 1520px).

Decorations

Background colors

Default background colors can be changed in _variables.scss in your custom subtheme:

For light theme:

• $color-bg (default is #FAFAFA) — for page background;
• $color-bg-card (default is #FFFFFF) — for cards and tables background;
• $color-bg-bar (default is 100 shade of grey) — for footer, code and zebra background;
• $color-bg-hover (default is 200 shade of grey) — for hover elements background.

For dark theme:

• $color-bg-dark (default is #303030) — for page background;
• $color-bg-dark-card (default is 800 shade of grey) — for cards and tables background;
• $color-bg-dark-bar (default is 900 shade of grey) — for footer, code and zebra background;
• $color-bg-dark-hover (default is ligher than $color-bg-dark-card) — for hover elements background.

Shadows

In Material Base defined 6 level of shadows.

Shadow can be applied by adding z-level-* class to element, where * can be from 0 to 5.

<div class="example-cube z-level-0">Z level 0</div>

<div class="example-cube z-level-1">Z level 1</div>

<div class="example-cube z-level-2">Z level 2</div>

<div class="example-cube z-level-3">Z level 3</div>

<div class="example-cube z-level-4">Z level 4</div>

<div class="example-cube z-level-5">Z level 5</div>

Dividers

Dividers can be applied by adding divider-top or divider-bottom class to element.

Default divider colors can be changed in _variables.scss in your custom subtheme:

• $color-divider (default is 12% opacity of $color-text-dark) — for light theme;
• $color-light-divider (default is 26% opacity of $color-text-light) — for dark theme.

Animations

Currently in Material Base implemented only ripple effect for some active elements.

To add ripple effect to an element just ripple class should be added.