Grid

This is the old fashion way 12 columns grid. With this you can make yout app repesponsive.

Metrics

<div class="grid">
    <div class="column s12 m4">
        .s12.m4
    </div>
    <div class="column s12 m4">
        .s12.m4
    </div>
    <div class="column s12 m4">
        .s12.m4
    </div>
</div>

Flex Grid

<div class="flexRow">
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
</div>

Input

<input type="text" class="formControl" placeholder="Write your name here">

Input + Grids

Text Area

<textarea rows="3" class="formControl" placeholder="Write your message here"></textarea>

Select

<select class="formControl">
    <option value="1">Option 1</option>
    <option value="2" disabled>Option 2</option>
    <option value="3">Option 3</option>
</select>

Disabled

<input type="text" class="formControl" placeholder="Disabled" disabled>

Buttons

<button class="button">Button</button>
<button class="button primary">Button</button>
<button class="button secondary">Button</button>
<button class="button danger">Button</button>
<button class="button warning">Button</button>
<button class="button success">Button</button>
<button class="button primary large">Button</button>
<button class="button primary small">Button</button>
<button class="button primary block">Button</button>
<button class="button blur">Button</button>

Buttons solid

<button class="button solid">Button</button>
<button class="button solid primary">Button</button>
<button class="button solid secondary">Button</button>
<button class="button solid danger">Button</button>
<button class="button solid warning">Button</button>
<button class="button solid success">Button</button>
<button class="button solid primary large">Button</button>
<button class="button solid primary small">Button</button>
<button class="button solid primary block">Button</button>

Simple Cards

<div class="card">
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With header

<div class="card">
    <div class="header">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With Nice Background on header

<div class="card">
    <div class="header niceSunThree textWhite">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With image on header

 

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

 

<div class="card">
    <div class="header image textWhite">
        <img src="http://kingofwallpapers.com/sundown/sundown-008.jpg">
        <span>Card Title</span>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With nice background and action

<div class="card niceBluePeach textWhite">
    <div class="header">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
        <button class="button blur block">Share now</button>
    </div>
</div>

Tables

<table class="table">
    ...
</table>

Hoverable table

<table class="table hoverRow">
    ...
</table>

<table class="table hoverCell">
...
</table>

Clean table

<table class="table clean">
...
</table>

Responsive table

<table class="table responsive">
...
</table>

Striped table

<table class="table striped">
...
</table>