Components

Layouts

By default Material Base provide classic responsive layout with navbar, header, content, sidebars and footer areas. There is no settings for change structure of basic layout unless placing content in necessary Drupal regions.

To modify default layout behavior there are some options presented as classes which should be added to body tag:

no-sidebars — adds by Drupal if no sidebars content. Determines width of content area;
one-sidebar — adds by Drupal if exist content for one sidebar. Determines width of content area;
two-sidebars — adds by Drupal if exist content for two sidebars. Determines width of content area;
wide-one-side — makes width of content area wider on the width of one sidebar;
wide-two-side — makes width of content area wider on the width of two sidebars;
full-width — removes main content width limits;
layout-left — makes content area aligned left (by default it is centered).

For changing default widths of content, sidebar and gutter see Sizes in Styles section.

Examples

Right sidebar

Two sidebars

Grid

Grid system based on Flexbox Grid, see it for full supported features.

Basic example

Block 1

Block 2

Block 3

Block 4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="example-block">Block 1</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="example-block">Block 2</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="example-block">Block 3</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-12 col-lg-3">
    <div class="example-block">Block 4</div>
  </div>
</div>

Offsets

Block 1

Block 2

<div class="row">
  <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
    <div class="example-block">Block 1</div>
  </div>
  <div class="col-xs-12">
    <div class="example-block">Block 2</div>
  </div>
</div>

Reordering

Block 1 (order last)

Block 2

Block 3 (order first)

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 last-xs last-sm last-md">
    <div class="example-block">Block 1 (order last)</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="example-block">Block 2</div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 first-xs first-sm first-md">
    <div class="example-block">Block 3 (order first)</div>
  </div>
</div>

Reversing

Block 1

Block 2

Block 3

<div class="row reverse">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="example-block">Block 1</div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="example-block">Block 2</div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4">
    <div class="example-block">Block 3</div>
  </div>
</div>

Navbar has fixed height 64px and primary color background as described in guidelines.

Navbar has some options presented as classes which should be added to body tag:

navbar-fixed — fixes navbar at top of the page;
navbar-transparent — removes navbar background;
navbar-light — changes navbar background to white;
navbar-dark — changes navbar background to dark gray.

Every element which is child of navbar should have class navbar-item. For menu element also should be added navbar-menu class.

Navbar elements accepts pull-*, hidden-* and visible-* helper classes.

Also there are classes for specific child elements:

navbar-logo;
navbar-title;
navbar-slogan;
navbar-branding;
navbar-icon;
block-search;
navbar-account-menu.

Navbar markup

<div id="navbar">
  <div class="navbar-item">
    <div class="navbar-logo">
      <a href="#"><img src="logo.svg"></a>
    </div>
  </div>
  <div class="navbar-item">
    <div class="navbar-title"><a href="#">Title</a></div>
  </div>
  <div class="navbar-item navbar-menu pull-center">
    <ul class="menu">
      <li><a href="#">Menu Item 1</a></li>
      <li><a href="#">Menu Item 2</a></li>
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </div>
  <div class="navbar-item pull-right">
    <div><a href="#"><i class="material-icons navbar-icon">account_circle</i></a></div>
  </div>
</div>

Header in Material Base has many variants for customization.

There are two regions designed for creating custom headers:

Header content — for any kind of content, such as title, slogan, logo;
Header background — for complicated background elements, such as changeable image, video, slider.

Header content

Height of header depends on placed content.

Big page title

<div class="block">
  <div class="margin-box big-title align-center"><h1>Page title</h1></div>
</div>

Header background

Solid primary color background is default for header.

Static background image can be set by just adding header-bg-image class to body tag and placing image header-bg.jpg to theme img folder.

For using complicated background elements you should add header-bg-object class to body tag and add some block with background object to Header background region. Id bg-object is necessary for background object.

Background image

<div class="block">
  <img id="bg-object" src="img/header-bg.jpg">
</div>

Background video

<div class="block">
  <video id="bg-object" src="img/header-bg.mp4" autoplay="true" loop="true" muted="true" poster="img/header-bg-poster.png"></video>
</div>

Background youtube video

<div class="block object-16by9">
  <iframe id="bg-object" src="https://www.youtube.com/embed/YOUTUBEVID?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;modestbranding=1&amp;wmode=transparent&amp;loop=1&amp;playlist=YOUTUBEVID&amp;fs=0&amp;disablekb=1&amp;iv_load_policy=3&amp;cc_load_policy=0" frameborder="0"></iframe>
</div>

Example

Video background

Drawer

Drawer can contain several elements such as logo, title and menu.

Every element which is child of drawer should have class drawer-item.

Drawer elements accepts divider-top and divider-bottom helper classes.

Ids for open and close elements are navbar-menu-toggle and drawer-menu-close respectively.

Also there is drawer-title class for title element.

Drawer open button (Navbar region)

<div class="navbar-item">
  <div id="navbar-menu-toggle" ><a href="#"><i class="material-icons navbar-icon">menu</i></a></div>
</div>

Drawer close button

<div class="drawer-item divider-bottom">
  <div id="drawer-menu-close"><a href="#"><i class="material-icons drawer-icon">arrow_back</i></a></div>
  <div id="drawer-title">Main menu</div>
</div>

Drawer menu

<div class="drawer-item">
  <ul class="menu">
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</div>

Experimental

There are not fully implemented classes for body tag for permanent drawer displaying:

drawer-permanent;
drawer-below-navbar (should be used with navbar-fixed class only).

Automatic adjusting of layout widths is not implemented yet.

Icons

For using icons:

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

Icons in Material Base is implementation of official Material icons font provided by Google — material.io/icons.

Default

Secondary

Disabled

Primary

Accent

Icon by "i" tag

In Material Base implemented the way described in Using the icons in HTML section of this guide, but sizes and colors applies with little different classes. Actually icons can be added by almost any tag, not just "i" tag.

<i class="material-icons">face</i>

Tag way support these additional classes:

fs-18, fs-24, fs-36, fs-48 — for applying sizes;
text-dark, text-light, text-accent, text-primary, text-secondary text-disabled — for applying colors.

Icon by attribute

Also implemented the way, which provide adding icons to element by adding class icon-left or icon-right and data-icon attribute. By this way icons can be easily added to link, button, menu item and other elements.

<span class="icon-left" data-icon="face">Text</span>

Attributes way support icon-dark, icon-light, icon-primary, icon-accent, icon-secondary and icon-disabled classes for applying colors.

Examples

Using icons

Services icons

For using services icons:

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

Services icons is additional set of icons, which includes logos of popular social networks and services.

All icons are stored in img/services-icons.svg file. The main reason to use SVG instead of font is more easy adding your custom icons.

There are two different ways to add icons described below. Both ways support icon-dark, icon-light, icon-primary, icon-accent, icon-secondary and icon-disabled classes for applying colors.

Standalone way

There are two options to add icon:

add services-icons and si-* classes to element, where * is icon name;
add services-icons class and data-icon attribute with icon name.

Note:

In standalone way color changing by icon-primary, icon-accent, icon-dark and icon-light classes implemented with CSS mask property, which currently support only by modern browsers, see caniuse.com/#feat=css-masks.

Note:

Default, icon-secondary and icon-disabled colors will not be changed by $color-text or $color-text-dark variables. Changing default color should be done in img/services-icons.svg file.

<div class="services-icons mr-8" data-icon="facebook"></div>
<div class="services-icons mr-8" data-icon="twitter"></div>
<div class="services-icons mr-8" data-icon="instagram"></div>

<div class="services-icons icon-secondary mr-8" data-icon="whatsapp"></div>
<div class="services-icons icon-secondary mr-8" data-icon="wechat"></div>
<div class="services-icons icon-secondary mr-8" data-icon="telegram"></div>

<div class="services-icons icon-primary mr-8" data-icon="facebook"></div>
<div class="services-icons icon-primary mr-8" data-icon="twitter_circle"></div>
<div class="services-icons icon-primary mr-8" data-icon="instagram_circle"></div>

<div class="services-icons icon-accent mr-8" data-icon="facebook"></div>
<div class="services-icons icon-accent mr-8" data-icon="twitter_circle"></div>
<div class="services-icons icon-accent mr-8" data-icon="instagram_circle"></div>

Pseudo element way

Also implemented the way, which provide adding icons to element by adding class services-icon-left or services-icon-right and data-icon attribute. By this way icons can be easily added to link, button, menu item and other elements.

Link icon

Button icon

<a href="#" class="services-icon-left" data-icon="github"> Link icon</a>
<a class="btn btn-raised btn-colored services-icon-left" data-icon="twitter" href="#">Button icon</a>

Note:

In pseudo element way icon colors implemented with CSS mask property, which currently support only by modern browsers, see caniuse.com/#feat=css-masks.

Icon names

android

apple

behance

bitbucket

blogger

digg

discord

disqus

disqus_outline

dribbble

dribbble_box

drupal

evernote

facebook

facebook-messenger

facetime

fiverr

flickr

foursquare

github

gitlab

google

google-chat

google-meet

google-photos

google-play

google_circle

imessage

imo

instagram

instagram_circle

kakaotalk

kuaishou

lastfm

lastfm_box

likee

line

line_box

linkedin

linkedin_box

livejournal

medium

microsoft-teams

odnoklassniki

odnoklassniki_box

periscope

picsart

pinterest

pocket

qqchat

quora

qzone

reddit

renren

signal

sina-weibo

skype

slack

snapchat

snapchat_outlined

soundcloud

spotify

stackexchange

stackoverflow

swarm

telegram

tieba

tiktok

trello

tumblr

tumblr_box

twitch

twitter

twitter_circle

upwork

viber

vimeo

vimeo_box

vk

wechat

whatsapp

wordpress

xing

xing_box

yandex

yandex_ru

youtube

zoom

Examples

Using icons

Filetypes icons

For using filetypes icons:

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

Filetypes icons is additional set of icons, which includes icons for popular file types and extentions.

Icons are stored in img/filetypes-icons.svg file.

There are two ways to add icons, the same as for Services icons. Additionaly supported icon-colored class for applying predefined icon colors.

For standalone way there are two options to add icon:

add filetypes-icons and fi-* classes to element, where * is file type or extention;
add filetypes-icons class and data-icon attribute with file type or extention.

For pseudo element way use filetypes-icon-left or filetypes-icon-right class and data-icon attribute.

Available icons

<div class="filetypes-icons mr-8" data-icon="doc"></div>
<div class="filetypes-icons mr-8" data-icon="sheet"></div>
<div class="filetypes-icons mr-8" data-icon="presentation"></div>
<div class="filetypes-icons mr-8" data-icon="pdf"></div>
<div class="filetypes-icons mr-8" data-icon="image"></div>
<div class="filetypes-icons mr-8" data-icon="video"></div>
<div class="filetypes-icons mr-8" data-icon="audio"></div>
<div class="filetypes-icons mr-8" data-icon="archive"></div>
<div class="filetypes-icons mr-8" data-icon="code"></div>

<div class="filetypes-icons icon-colored mr-8" data-icon="doc"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="sheet"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="presentation"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="pdf"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="image"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="video"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="audio"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="archive"></div>
<div class="filetypes-icons icon-colored mr-8" data-icon="code"></div>

Icon names

doc
txt
docx
rtf
odt

sheet
xls
xlsx
csv
ods

presentation
ppt
pptx
key
odp

pdf

image
jpg
jpeg
png
gif
psd
svg
ai
eps
cdr

video
avi
mpg
mpeg
mp4
mov
flv
mkv

audio
mp3
flac
ogg
wav
ape
m4a
aac

archive
zip
rar
gz
7z
jar
app
exe
apk
deb
msi
rpm

code
php
module
inc
info
yml
css
scss
html
htm
xml
class
java
c
cpp
h
js
pl
py
sh

Examples

Using icons

Buttons

To make element looks as a button class btn needs to be added. Also there are additional classes to modify button look. To any kind of buttons can be added icons and/or tooltips.

Flat Buttons

Classes btn-colored, btn-accent and btn-disabled changes color.

<a class="btn" href="#">Button flt</a>
<a class="btn btn-colored" href="#">Btnflat clr</a>
<a class="btn btn-accent" href="#">Btnflt acn</a>
<a class="btn btn-disabled" href="#">Btnflt dis</a>

Raised buttons

Class btn-raised raises button.

<a class="btn btn-raised" href="#">Button rsd</a>
<a class="btn btn-raised btn-colored" href="#">Bttrsd clr</a>
<a class="btn btn-raised btn-accent" href="#">Btnrsd acn</a>
<a class="btn btn-raised btn-disabled" href="#">Btnrsd dis</a>

Floating action buttons

Floating action button makes by fab class.

Also there are additional classes fab-colored, fab-accent — for modify button color, and fab-mini — for modify button size.

For placing floating action buttons specially designed Actions region.

<a class="fab" href="#">М</a>
<a class="fab fab-colored icon-left" data-icon="face" href="#"></a>
<a class="fab fab-accent fab-mini" href="#"><i class="material-icons">face</i></a>

Tooltips

Tooltips can be easily added to elements such as buttons, links and so on.

To add a tooltip class tooltip and attribute data-tooltip should be added to element.

When needed icon "by attribute" and tooltip for one element in the same time icon-right should be used.

Default position of a tooltip is top canter, different posions can be set by adding one of this classes: tooltip-top-left, tooltip-top-right, tooltip-bottom, tooltip-bottom-left, tooltip-bottom-right, tooltip-left and tooltip-right.

<a class="btn tooltip" data-tooltip="Some&nbsp;description" href="#">Tooltip Top</a>
<a class="btn tooltip tooltip-bottom" data-tooltip="More&nbsp;bigger description" href="#">Tooltip Bottom</a>
<a class="btn tooltip tooltip-right" data-tooltip="Just&nbsp;another bigger&nbsp;description" href="#">Tooltip Right</a>

Tabs

Tabs can be styled by adding tabs class to ul element or its parent.

Tabs styles automatically applies to Drupal tabs.

<div class="tabs">
  <ul>
    <li><a href="#" class="is-active">Tab one</a></li>
    <li><a href="#">Tab two</a></li>
    <li><a href="#">Tab three</a></li>
  </ul>
</div>

...

<ul class="tabs">
  <li><a href="#" class="is-active">Tab one</a></li>
  <li><a href="#">Tab two</a></li>
  <li><a href="#">Tab three</a></li>
</ul>

Cards

Card is very universal style to highlight elements on the page.

Simple card

For simple use of card look you just need to add card class to an element.

Simple card

Simple card content.

<div class="card">
  <h3>Simple card</h3>
  <p>Simple card content.</p>
</div>

Card with complicated markup

For complicated card there are some additional markup and classes. Every card children should have card-item class and also can have additional classes card-media, card-title, card-text and card-actions for corresponding elements.

Also card accept classes for modify background colors:

card-bg-primary, card-bg-accent — for applying theme colors;
card-bg-*, where * is color name (see list here) — for applying other Material design palette colors.

Card title

Subtitle

Complex card content.

Action

Card title

Subtitle

Complex card content.

Action

<div class="card">
  <div class="card-item card-title">
    <h3><a href="#">Card title</a></h3>
    <span class="subtitle">Subtitle</span>
  </div>
  <div class="card-item card-text">
    <p>Complex card content.</p>
  </div>
  <div class="card-item card-actions divider-top">
    <a class="btn" href="#">Action</a>
  </div>
</div>

...

<div class="card card-bg-primary">
  <div class="card-item card-title">
    <h3><a href="#">Card title</a></h3>
    <span class="subtitle">Subtitle</span>
  </div>
  <div class="card-item card-text">
    <p>Complex card content.</p>
  </div>
  <div class="card-item card-actions divider-top">
    <a class="btn" href="#">Action</a>
  </div>
</div>

Card with two columns

To make two columned card you need to add card-vertical class to card element and create two additional wrappers for child elements — card-column-left and card-column-right. On narrow screens columns are getting stacked.

To card-column-* can be applied classes which modifies width:

card-column-fix which equals card-column-240;
card-column-360;
card-column-180;
card-column-120;
card-column-80;
card-column-stretch — for fluid with.

Card title

Two columns card content.

Action

<div class="card card-vertical">
  <div class="card-column-left card-column-180">
    <div class="card-item card-media media-cover">
      <img src="image.svg">
    </div>
  </div>
  <div class="card-column-right card-column-stretch">
    <div class="card-item card-title">
      <h3><a href="#">Card title</a></h3>
    </div>
    <div class="card-item card-text">
      <p>Two columns card content.</p>
    </div>
    <div class="card-item card-actions">
      <a class="btn" href="#">Action</a>
    </div>
  </div>
</div>

Card media

To card can be added media element, such as image and video. The element should have card-media class. To image can be applied stretching, if it dimensions does not fit in wrapping element by ratio, media-cover class does it.

Over the media element can be placed title, which accept classes pull-top, pull-bottom for alignment, and title for semitransparent background.

Card media title

Card media content.

Card media title

Card media content.

<div class="card">
  <div class="card-item card-media">
    <a href="#"><img src="image.svg"></a>
    <h3 class="title pull-bottom"><a href="#">Card media title</a></h3>
  </div>
  <div class="card-item card-text">
    <p>Card media content.</p>
  </div>
</div>

...

<div class="card">
  <div class="card-item card-media media-cover">
    <a href="#"><img src="image.svg"></a>
    <h3 class="title pull-top"><a href="#">Card media title</a></h3>
  </div>
  <div class="card-item card-text">
    <p>Card media content.</p>
  </div>
</div>

Сard grid

Card grid provide grid view and big amount of cards. To row element should be added class card-grid and to col-* element should be added class card-wrapper. In grid view removed shadows and border radius for media elements.

Card title

<div class="row card-grid">
  <div class="col-xs-12 col-sm-6 col-md-3 card-wrapper">
    <div class="card">
      <div class="card-item card-media">
        <a href="#"><img src="image.svg"></a>
        <h3 class="title pull-bottom"><a href="#">Card title</a></h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 card-wrapper">
    <div class="card">
      <div class="card-item card-media">
        <a href="#"><img src="image.svg"></a>
        <h3 class="title pull-bottom"><a href="#">Card title</a></h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 card-wrapper">
    <div class="card">
      <div class="card-item card-media">
        <a href="#"><img src="image.svg"></a>
        <h3 class="title pull-bottom"><a href="#">Card title</a></h3>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 card-wrapper">
    <div class="card">
      <div class="card-item card-media">
        <a href="#"><img src="image.svg"></a>
        <h3 class="title pull-bottom"><a href="#">Card title</a></h3>
      </div>
    </div>
  </div>
</div>

Card style for main content

In Material Base implemented class card-main which can be added to any card element to make it take full width on narrow screens.

Body tag class content-card does same thing for region Main content in default layout. Body tag class main-shift-up rises main content over header area on 128px. Class shift-big increase shift to 280px.

Tables

By default to tables applied simple styles: 100% width, background, header styles, row dividers.

Also there are additional classes for table element:

table-bordered — adds border;
table-striped — adds zebra;
table-card — styles table like card.

Table rows can be highlighted with selected class.

Name	House	Comments
Eddard Stark	Stark	Lord of Winterfell
Arya Stark	Stark	No one
Jon Snow	Stark	Knows nothing

<table class="table-bordered table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>House</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Eddard Stark</td>
      <td>Stark</td>
      <td>Lord of Winterfell</td>
    </tr>
    <tr>
      <td>Arya Stark</td>
      <td>Stark</td>
      <td>No one</td>
    </tr>
    <tr>
      <td>Jon Snow</td>
      <td>Stark</td>
      <td>Knows nothing</td>
    </tr>
  </tbody>
</table>

Responsive tables

To make table responsive needs additional wrapping element with table-responsive-wrapper class and table-responsive class should be added to table tag.

Note

If table-responsive needs to be applied at the same time with table-card or table-bordered the last one should be added to wrapping element as well as table-responsive-wrapper.

Also heading labels should be added as value of data-label attribute to all table cells.

Name	House	Comments
Eddard Stark	Stark	Lord of Winterfell
Arya Stark	Stark	No one
Jon Snow	Stark	Knows nothing

<div class="table-responsive-wrapper table-card">
  <table class="table-responsive">
    <thead>
      <tr>
        <th>Name</th>
        <th>House</th>
        <th>Comments</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name">Eddard Stark</td>
        <td data-label="House">Stark</td>
        <td data-label="Comments">Lord of Winterfell</td>
      </tr>
      <tr class="selected">
        <td data-label="Name">Arya Stark</td>
        <td data-label="House">Stark</td>
        <td data-label="Comments">No one</td>
      </tr>
      <tr>
        <td data-label="Name">Jon Snow</td>
        <td data-label="House">Stark</td>
        <td data-label="Comments">Knows nothing</td>
      </tr>
    </tbody>
  </table>
</div>

Tip

Adding data-label attribute to views table can be little tricky in Drupal. For Drupal 8 you can use solution below.

In views-view-table.html.twig replace:

<td{{ column.attributes.addClass(column_classes) }}>

by:

<td{{ column.attributes.addClass(column_classes).setAttribute('data-label', header[key].content) }}>

Code

By defauult code font and background styles applies to code and pre tags (code highlighting).

For using code highlighting:

Drupal 8 — material_base/code-highlight library must be included in theme;
Drupal 7 — css/code-highlight.css stylesheet and js/prism.js script must be included in theme.

Code block and inline elements (code and pre tags) accept language-* to apply right syntax scheme.

Supported language-* values:

language-markup;
language-css;
language-clike;
language-javascript;
language-apacheconf;
language-bash;
language-c;
language-cpp;
language-css-extras;
language-git;
language-java;
language-markdown;
language-php;
language-php-extras;
language-sass;
language-scss;
language-twig;
language-yaml.

Code highlighting provided by Prism library, you can download your own customized set of supported languages and highlight styles on official project site if necessary.

Code block (pre tag) accept line-numbers class for showing numbers and code-card class for showing in card.

@charset "UTF-8";
  @import "compass";

  // variables
  $background: #FFF;
  $color: #404040;

  // mark-up
  * { @include box-sizing(border-box); }
  html, body { background: $background; color: $color; }

  // styles
  strong, b { font-weight: bold; }
  em, i { font-style: italic; }

<pre class="line-numbers code-card">
  <code class="language-scss">
    @charset "UTF-8";
    @import "compass";

    // variables
    $background: #FFF;
    $color: #404040;

    // mark-up
    * { @include box-sizing(border-box); }
    html, body { background: $background; color: $color; }

    // styles
    strong, b { font-weight: bold; }
    em, i { font-style: italic; }
  </code>
</pre>

Forms

Form element styles designed to match Drupal form markup.

For most elements only form-item class for wrapper element is necessary.

Text, password, e-mail

Text Label

Hint: some info.

<div class="form-item">
  <label>Text Label</label>
  <input type="text" placeholder="Text field">
  <div class="description">Hint: some info.</div>
</div>

Radio buttons

Radio label

Radio 1

Radio 2

<div class="form-item">
  <label>Radio label</label>
  <div class="form-radios">
    <div class="form-item">
      <input id="radio-1" type="radio" name="radio" value="1" checked>  <label for="radio-1" class="option">Radio 1</label>
    </div>
    <div class="form-item">
      <input id="radio-2" type="radio" name="radio" value="2">  <label for="radio-2" class="option">Radio 2</label>
    </div>
  </div>
</div>

Checkboxes

Checkbox label

Check 3

Check 4

<div class="form-item">
  <label>Checkbox label</label>
  <div class="form-checkboxes">
    <div class="form-item">
      <input id="checkbox-3" type="checkbox" value="3" checked>  <label for="checkbox-3" class="option">Check 3</label>
    </div>
    <div class="form-item">
      <input id="checkbox-4" type="checkbox" value="4">  <label for="checkbox-4" class="option">Check 4</label>
    </div>
  </div>
</div>

Single checkbox

Check me.

<div class="form-item">
  <input id="checkbox-single" type="checkbox" value="5">  <label for="checkbox-single" class="option">Check me.</label>
</div>

Select

Label select

<div class="form-item form-type-select">
  <label>Label select</label>
  <select class="form-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

File

Label file

Allowed extensions: jpg, jpeg, png, gif

<div class="form-item form-type-file">
  <label>Label file</label>
  <input type="file">
  <div class="description">Allowed extensions: jpg, jpeg, png, gif</div>
</div>

Textarea

Label textarea

<div class="form-item form-type-textarea">
  <label>Label textarea</label>
  <div class="form-textarea-wrapper">
    <textarea cols="60" rows="5"></textarea>
  </div>
</div>

Texarea boxed

Label textarea

<div class="form-item form-type-textarea textarea-boxed">
  <label>Label textarea</label>
  <div class="form-textarea-wrapper">
    <textarea cols="60" rows="5"></textarea>
  </div>
</div>

Tip

Default style for textarea is the same as text field (in Material Design it called Multi line field).

Alternative "boxed" style (in Material Design it called text area) can be applied by implementing hook_form_alter in your theme, like this:

$form['FIELD_NAME']['widget'][0]['#wrapper_attributes']['class'][] = 'textarea-boxed';

Submit button

<div class="form actions">
  <input type="submit" value="Submit">
</div>

Search

Search form styles designed for Drupal markup. Styles applies to form tag, form-item and input tag, so these elements are necessary.

Wrapper element should have block-search class, also search-persistent class may be added for boxed style.

For changing default search form width see Sizes in Styles section.

<div class="block-search">
  <form>
    <div class="form-item icon-left" data-icon="search">
      <input type="text" placeholder="Search">
    </div>
  </form>
</div>

Note

For using search-persistent style in Drupal 8 with Search API Autocomlete search-persistent-autocomplete class should be added to body tag.

Media

There are few classes for media elements:

img-responsive — for making images responsive;
object-16by9 — for wrapper of responsive objects with 16:9 aspect ratio.

Also many of helper classes can be applied to media elements.

<div>
  <img class="img-responsive pull-center" src="image.svg">
</div>

Helpers

Helper classes is set of useful classes for applying to any elements which can make them look as you need without writing CSS code.

For using helper classes:

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

There are these classes:

pull-left, pull-center, pull-right or align-left, align-center, align-right — for align the element;
text-align-left, text-align-center, text-align-right text-align-justify — for align element's children;
fs-12, fs-14, fs-18 — for changing font size;
mt-*, mb-*, mr-*, ml-*, where * can be 8, 16, 24, 32, 48 or 64 — for adding margin;
pt-*, pb-*, pr-*, pl-*, where * can be 8, 16, 24, 32, 48 or 64 — for adding padding;
no-*, where * can be mt, mb, mr, ml, m, pt, pb, pr, pl or p — for removing some or all margins/paddings;
no-wr, no-br — for preventing word wrap;
hidden, hidden-*, visible-*, where * can be sm, md or lg — for hiding/showing element on different screen sizes.

Information blocks

In Material Base there are styles for three type of information blocks: hihglight, info and important.

Highlight block title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Info block title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Important block title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="highlight">
  <h4>Highlight block title</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.</p>
</div>

<div class="info">
  <h4>Info block title</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.</p>
</div>

<div class="important">
  <h4>Important block title</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.</p>
</div>

Also there are styles for three type of Drupal system messages: messages-status, messages-warning and messages-error.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="messages-status">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.
</div>

<div class="messages-warning">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.
</div>

<div class="messages-error">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <a href="#">labore et dolore</a> magna aliqua.
</div>

Collapsible panels

To create collapsible panels two elements needed: first, toggle element with collapsible-toggle class and data-target attribute, and second with collapsible-content class and id attribute. The value of data-target and id attributes should be the same for linked elements.

Panel 1 title

Panel 1 content.

Panel 2 title

Panel 2 content.

<div class="collapsible-toggle" data-target="panel-1">
  <span>Panel 1 title</span>
</div>
<div class="collapsible-content" id="panel-1">
  <p>Panel 1 content.</p>
</div>

<div class="collapsible-toggle" data-target="panel-2">
  <span>Panel 2 title</span>
</div>
<div class="collapsible-content" id="panel-2">
  <p>Panel 2 content.</p>
</div>

To create dropdown menus two elements needed: first, toggle element with menu-dropdown-toggle class and data-target attribute, and second with menu-dropdown class and id attribute. The value of data-target and id attributes should be the same for linked elements.

<div class="menu-dropdown-toggle" data-target="dd-menu-1">
  <a class="btn" href="#">Dropdown</a>
</div>

<ul class="menu menu-dropdown" id="dd-menu-1">
  <li>
    <a href="#">Item 1</a>
  </li>
  <li>
    <a href="#">Item 2</a>
  </li>
</ul>

Material Base provide markup and styles for pager element. By default no additional work needed.

Full pager

<div class="pager">
  <ul class="pager-items">
    <li class="pager-item item-first"><a href="#"><span>‹‹</span></a></li>
    <li class="pager-item item-previous"><a href="#"><span>‹</span></a></li>
    <li class="pager-item"><a href="#">1</a></li>
    <li class="pager-item"><a href="#">2</a></li>
    <li class="pager-item item-current"><span>3</span></li>
    <li class="pager-item"><a href="#">4</a></li>
    <li class="pager-item"><a href="#">5</a></li>
    <li class="pager-item item-ellipsis"><span><span>…</span></span></li>
    <li class="pager-item item-next"><a href="#"><span>›</span></a></li>
    <li class="pager-item item-last"><a href="#"><span>››</span></a></li>
  </ul>
</div>

Mini pager

<div class="pager">
  <ul class="pager-items">
    <li class="pager-item item-previous"><span><span>‹</span></span></li>
    <li class="pager-item item-current"><span><span>Page 1</span></span></li>
    <li class="pager-item item-next"><a href="#"><span>›</span></a></li>
  </ul>
</div>

Card actions pager

List of something

<div class="card">
  <div class="card-item card-title"><h4>List of something</h4></div>
  <div class="card-item card-actions divider-top text-align-right">
    <div class="pager-summary">1–20 from 84</div> <!-- optional -->
    <div class="pager">
      <ul class="pager-items">
        <li class="pager-item item-previous"><span><span>‹</span></span></li>
        <li class="pager-item item-next"><a href="#"><span>›</span></a></li>
      </ul>
    </div>
  </div>
</div>

Drupal specific

In Material Base there are defined styles for standard Drupal elements:

Breadcrumbs;
Search forms, including Search API exposed filter;
Menus;
Pager;
Login forms;
Toolbar, including modules Admin Toolbar (Admin Menu for Drupal 7) and Adminimal Admin Toolbar;
Tabs;
System messages;
Maintenance page.

Layouts

Grid

Basic example

Offsets

Reordering

Reversing

Navbar

Header

Header content

Header background

Drawer

Experimental

Icons

Icon by "i" tag

Icon by attribute

Services icons

Standalone way

Note:

Note:

Pseudo element way

Note:

Icon names

Filetypes icons

Available icons

Icon names

Buttons

Flat Buttons

Raised buttons

Floating action buttons

Tooltips

Tabs

Cards

Simple card

Simple card

Card with complicated markup

Card with two columns

Card media

Сard grid

Card style for main content

Tables

Responsive tables

Note

Tip

Code

Forms

Text, password, e-mail

Radio buttons

Checkboxes

Select

File

Textarea

Tip

Submit button

Search

Note

Media

Helpers

Information blocks

Highlight block title

Info block title

Important block title

Collapsible panels

Dropdown menus

Pager

Full pager

Mini pager

Card actions pager

List of something

Drupal specific