Grid

Container

Padded content

HTML

<div class="container">
  <p>Padded content</p>
</div>

Stylus

.container
  sm-container()

Class based

<div class="container">
  <p>First column</p>
  <p>Second column</p>
  <p>Third column</p>
</div>

Tag based

Not implemented

With all options
.container
  sm-container($large-padding: 15%, $medium-padding: ($large-padding/2),
      $small-padding: ($large-padding/3)
    )

Columns

First column

Second column

Third column

HTML

<div class="columns">
  <p>First column</p>
  <p>Second column</p>
  <p>Third column</p>
</div>

Stylus

.columns
  sm-columns()

Class based

<div class="columns-3-2-1">
  <p>First column</p>
  <p>Second column</p>
  <p>Third column</p>
</div>

Tag based

Not implemented

With all options
.columns
  sm-columns($n-large: 3, $n-medium: (ceil($n-large / 2)), $n-small: (ceil($n-large / 4)),
      $margin-horizontal: 1%, $margin-vertical: 0.5rem,
      $justify-content: space-around
    )

Colors

Colors can be set for each component individually. Default colors are taken from these variables: 

$primary-color ?= #3F51B5
$background-color ?= #FFFFFF
$accent-color ?= #FF5622
$light-text-color ?= #FFFFFF
$primary-text-color ?= #202020

Media queries

Stylus Material supports breakpoints for 3 screen sizes: small, medium and large. Break points can be modified by setting their maximum sizes:

$small-screen = 600px
$medium-screen = 992px
$large-screen = 1200px

Stylus Material offers multiple variables to use in media queries based on these two breakpoints: $medium-and-up, $large-and-up, $small-and-down, $medium-and-down, and $medium-only.

Cards

This title is overlayed

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HTML

<article>
  <img src="assets/leaves.jpg">
  <h1>Title</h1>
  <p>Lorem ipsum...</p>
</article>

Stylus

article
  sm-card()

Class based

<article class="card title-in-image">
  <img class="card-img" src="assets/leaves.jpg">
  <h1 class="card-title">Title</h1>
  <p>Lorem ipsum...</p>
</article>

Tag based

<article>
  <img src="assets/leaves.jpg">
  <h1>Title</h1>
  <p>Lorem ipsum...</p>
</article>

With all options
article
  sm-card($bgcolor: $background-color, $title-in-image: true, $text-protection: #000,
       $title-size: 24px,
       $title-color: ($title-in-image ? $light-text-color : $primary-text-color),
       $padding: 20px, $title-tag: "h1", $img-tag: "img"
    )

Chips

A chipclose
Another chip

HTML

<div class="chip">
  <img src="assets/leaves.jpg">
  A chip
</div>
<div class="chip">
  Another chip
</div>

Stylus

.chip
  sm-chip()

Class based

<div class="chip">
  <img class="chip-img" src="assets/leaves.jpg">
  A chip
</div>
<div class="chip">
  Another chip
</div>

Tag based

Not implemented

With all options
.chip
  sm-chip($height: 32px, $fontsize: $height / 2.5, $color: rgba(0,0,0,.6), $bg-color: #e4e4e4,
      $img-tag: "img", $icon-tag: "i.material-icons"
    )

Forms

HTML

<form>
  <input type="text">
  <label>Label</label>
</form>

Stylus

input
  sm-input()

Class based

<form>
  <input class="input" type="text">
  <label>Label</label>
</form>

Tag based

<form>
  <input type="text">
  <label>Label</label>
</form>

With all options
input
  sm-input($height: 3rem, $fontsize: 1rem, $label-tag: "label", $width: 100%,
         $border-color: #DDD, $disabled-color: rgba(0,0,0,.26) , $focus-color: $accent-color
     )

Pricing table

Free

  • 0.5 MB space
  • 10 second reaction time
  • No uptime guarantee and we won't even try
0
$
per month per user

Most popular

Basic

  • 100 MB space
  • 1 second reaction time
  • No uptime guarantee, but we'll try
1,000
$
per month per user

Premium

  • 1 GB space
  • 0.1 second reaction time
  • Should be up most of the time
A gazillion
$
per month per user

HTML

<div class="pricing-table">
  <article>
   <h1>Free</h1>
   <ul>
     <li>0.5 MB space</li>
     <li>10 second reaction time</li>
     <li>No uptime guarantee</li>
   </ul>
   <div class="price">
     <div class="value">0</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button>Sign up!</button>
  </article>
  <article class="active">
   <p>Most popular!</p>
   <h1>Basic</h1>
   <ul>
     <li>100 MB space</li>
     <li>1 second reaction time</li>
     <li>No uptime guarantee</li>
   </ul>
   <div class="price">
     <div class="value">1,000</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button>Sign up!</button>
  </article>
  <article>
   <h1>Premium</h1>
   <ul>
     <li>1 GB space</li>
     <li>0.1 second reaction time</li>
     <li>Should be up most of the time</li>
   </ul>
   <div class="price">
     <div class="value">A gazillion</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button>Sign up!</button>
  </article>
</div>

Stylus

.pricing-table
  sm-pricing-table()

Class based

<div class="pricing-table">
  <article>
   <h1 class="title">Free</h1>
   <ul class="features">
     <li>0.5 MB space</li>
     <li>10 second reaction time</li>
     <li>No uptime guarantee</li>
   </ul>
   <div class="price">
     <div class="value">0</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button class="button">Sign up!</button>
  </article>
  <article class="active">
   <p>Most popular!</p>
   <h1 class="title">Basic</h1>
   <ul class="features">
     <li>100 MB space</li>
     <li>1 second reaction time</li>
     <li>No uptime guarantee</li>
   </ul>
   <div class="price">
     <div class="value">1,000</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button class="button">Sign up!</button>
  </article>
  <article>
   <h1 class="title">Premium</h1>
   <ul class="features">
     <li>1 GB space</li>
     <li>0.1 second reaction time</li>
     <li>Should be up most of the time</li>
   </ul>
   <div class="price">
     <div class="value">A gazillion</div>
     <div class="currency">$</div>
   </div>
   <div class="comment">per month per user</div>
   <button class="button">Sign up!</button>
  </article>
</div>

Tag based

Not possible

With all options
.pricing-table
  sm-pricing-table($title-tag: "h1", $feature-list-tag: "ul", $highlight-tag: "p", $button-tag: "button",
    $price-tag: ".price", $currency-tag: ".currency", $value-tag: ".value", $comment-tag: ".comment",
    $title-fontsize: 2rem, $title-padding: .5rem, $title-bg-color: $primary-color,
    $title-color: light($title-bg-color) ? $primary-text-color : $light-text-color,
    $feature-icon: '\2022', $feature-icon-font: false, $feature-fontsize: 1.5rem,
    $highlight-fontsize: (0.6 * $title-fontsize),
    $currency-first: true,
    $main-element: $active-selector, $main-title-bg-color: $accent-color,
    $main-title-color: light($main-title-bg-color) ? $primary-text-color : $light-text-color
  )

Flow text

This text is automatically resized based on screen size for optimal legibility.

HTML

<p>Some text</p>

Stylus

p
  sm-flow-text()

Class based

<p class="flow-text">Some text</p>

Tag based

<p>Some text</p>

With all options
p
  sm-flow-text($intervals: 20, $range: $large-screen - $small-screen,
      $interval-size: $range / $intervals, $base-size: 1.2rem
    )

Buttons

Default button

HTML

<button>
  Default button
</button>

Stylus

button
  sm-button()

Class based

<button class="button">
  Default button
</button>

Tag based

<button>
  Default button
</button>

With all options

sm-button($bgcolor: $accent-color, $color: $light-text-color,$font-size: 1.3rem,
  $hover-bgcolor: ($bgcolor == transparent ? transparent : lighten($bgcolor, 5%)),
  $disabled-bgcolor: ($bgcolor == transparent ? transparent : #DFDFDF),
  $disabled-color: #9F9F9F, $height: 36px, $padding: 0 2rem,
  $border: none, $border-radius: 2px, $z: 1, $text-transform: uppercase)

Flat button

HTML

<button>
  Flat button
</button>

Stylus

button
  sm-button-flat()

Class based

<button class="button flat">
  Flat button
</button>

Tag based

Not possible

Large button

HTML

<button>
  Large button
</button>

Stylus

button
  sm-button-large()

Class based

<button class="button large">
  Large button
</button>

Tag based

Not possible

Disc button

HTML

<button>
  !
</button>

Stylus

button
  sm-button-disc()

Class based

<button class="button disc">
  !
</button>

Tag based

Not possible

Collections

HTML

<ul>">
  <li>
    <img src="assets/leaves.jpg">
    <p>Entry 1</p>
  </li>
  <li>Entry 2</li>
  <h4>Collections</h4>
  <li>Entry 3</li>
</ul>

Stylus

ul
  sm-collection()

Class based

<ul class="collection">">
  <li>
    <img class="collection-img" src="assets/leaves.jpg">
    <p class="collection-content">Entry 1</p>
  </li>
  <li>Entry 2</li>
  <h4 class="collection-header">Collections</h4>
  <li>Entry 3</li>
</ul>

Tag based

<ul>">
  <li>
    <img src="assets/leaves.jpg">
    <p>Entry 1</p>
  </li>
  <li>Entry 2</li>
  <h4>Collections</h4>
  <li>Entry 3</li>
</ul>

With all options
ul
  sm-collection($border-color: #e0e0e0, $bg-color: $background-color,
      $active-color: $primary-color, $active-bg-color: lighten($active-color, 55%),
      $hover: true, $hover-color: $primary-color, $hover-bg-color: lighten($primary-color, 70%),
      $title-tag: "h4", $img-tag: "img", $img-size: 34px, $img-circle: false, $vertical-padding: 20px,
      $content-tag: "p"
    )

Horizontal list

HTML

<ul>">
  <li>Entry 1</li>
  <li>Entry 2</li>
  <li>Entry 3</li>
</ul>

Stylus

ul
  sm-horizontal-list()

Class based

<ul class="horizontal-list">
  <li>Entry 1</li>
  <li>Entry 2</li>
  <li>Entry 3</li>
</ul>

Tag based

Not implemented

With all options
ul
  sm-horizontal-list($separator: '', $separator-font: false)

Basics

Philosophy

Stylus Material is a stylus-based adaption of the Materialize material design framework. It is built on 3 principles:

  1. Define style in stylesheets, not as HTML or JavaScript
  2. Only add css that is actually used
  3. Convention over configuration

To achieve these, Stylus Material is fully functional without javascript (reload this page with JavaScript disabled to see what it looks like). It consists of Stylus Mixins only, each completely customizable but with a set of sensible defaults. Mixins are written in a way that does not require littering the HTML document with a lot of new classes, using HTML5 elements instead.

Installation

Via Stylus

The preferred way to use Stylus Material is to install it via npm and @require it in Stylus. You can theoretically require only selected components, but given that Stylus Material is written completely as Mixins your CSS files will only contain whatever you actually used anyways.

As CSS

Additionally, there are two precompiled versions that are not fully compliant with the libraries philosophy but don't require stylus. Both can be found in the root folder.

The classes.min.css file defines classes similar to how most other frameworks do it.

The tags.min.css sets material styles on HTML 5 tags.

Usage

Both Stylus and CSS uses are explained for each component in this document. Futhermore if you use the Stylus version you will most likely want to initialize global CSS by calling sm-init() and include the Roboto font. Here's a full version with all parameters for sm-init():

sm-init($init-ul = true, $init-font = "Roboto", $h1-fontsize = 4.2rem, $h2-fontsize = 3.56rem,
  $h3-fontsize = 2.92rem, $h4-fontsize = 2.28rem, $h5-fontsize = 1.64rem, $h6-fontsize = 1rem
  )