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

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

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

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.

face
Default
face
Secondary
face
Disabled
face
Primary
face
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

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-box"></div>
<div class="services-icons mr-8" data-icon="twitter-box"></div>
<div class="services-icons mr-8" data-icon="google-plus-box"></div>

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

<div class="services-icons icon-primary mr-8" data-icon="facebook-box"></div>
<div class="services-icons icon-primary mr-8" data-icon="twitter-box"></div>
<div class="services-icons icon-primary mr-8" data-icon="google-plus-box"></div>

<div class="services-icons icon-accent mr-8" data-icon="facebook"></div>
<div class="services-icons icon-accent mr-8" data-icon="twitter"></div>
<div class="services-icons icon-accent mr-8" data-icon="google-plus"></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.

<a href="#" class="services-icon-left" data-icon="github-box"> 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

behance
bitbucket
blogger
delicious
delicious-box
digg
disqus
disqus-outline
dribbble
dribbble-box
drupal
evernote
facebook
facebook-box
facebook-messenger
flickr
foursquare
github-box
google-photos
google-plus
google-plus-box
instagram
instagram-box
lastfm
line
linkedin
linkedin-box
livejournal
medium
odnoklassniki
odnoklassniki-box
periscope
pinterest
pinterest-box
pocket
qqchat
qzone
reddit
renren
sina-weibo
skype
skype-outline
slack
snapchat
soundcloud
spotify
stackexchange
stackoverflow
swarm
telegram
trello
tumblr
twitch
twitter
twitter-box
viber
vimeo
vine
vk
vk-box
wechat
whatsapp
wordpress
wunderlist
xing
xing-box
youtube

Examples

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

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.

Card title

Subtitle

Complex card content.

<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.

Two columns card content.

<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 content.

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.

<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

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

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

Checkboxes

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

Single checkbox

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

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

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

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

Submit button

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

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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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>

Pager

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

  • Page 1
<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

1–20 from 84
<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.