the colours

for fast background styling

  • black

  • black lighten-10

  • black lighten-20

  • black lighten-30

  • black lighten-40

  • white darken-40

  • white darken-30

  • white darken-20

  • white darken-10

  • white

  • grey darken-40

  • grey darken-30

  • grey darken-20

  • grey darken-10

  • grey

  • grey lighten-10

  • grey lighten-20

  • grey lighten-30

  • grey lighten-40

  • maroon darken-30

  • maroon darken-20

  • maroon darken-10

  • maroon

  • maroon lighten-10

  • maroon lighten-20

  • maroon lighten-30

  • maroon lighten-40

  • red darken-40

  • red darken-30

  • red darken-20

  • red darken-10

  • red

  • red lighten-10

  • red lighten-20

  • red lighten-30

  • red lighten-40

  • pink darken-40

  • pink darken-30

  • pink darken-20

  • pink darken-10

  • pink

  • pink lighten-10

  • pink lighten-20

  • orange darken-40

  • orange darken-30

  • orange darken-20

  • orange darken-10

  • orange

  • orange lighten-10

  • orange lighten-20

  • orange lighten-30

  • orange lighten-40

  • yellow darken-40

  • yellow darken-30

  • yellow darken-20

  • yellow darken-10

  • yellow

  • yellow lighten-10

  • yellow lighten-20

  • yellow lighten-30

  • yellow lighten-40

  • olive darken-30

  • olive darken-20

  • olive darken-10

  • olive

  • olive lighten-10

  • olive lighten-20

  • olive lighten-30

  • olive lighten-40

  • lime darken-40

  • lime darken-30

  • lime darken-20

  • lime darken-10

  • lime

  • lime lighten-10

  • lime lighten-20

  • lime lighten-30

  • lime lighten-40

  • green darken-30

  • green darken-20

  • green darken-10

  • green

  • green lighten-10

  • green lighten-20

  • green lighten-30

  • green lighten-40

  • aqua darken-40

  • aqua darken-30

  • aqua darken-20

  • aqua darken-10

  • aqua

  • aqua lighten-10

  • aqua lighten-20

  • aqua lighten-30

  • aqua lighten-40

  • teal darken-30

  • teal darken-20

  • teal darken-10

  • teal

  • teal lighten-10

  • teal lighten-20

  • teal lighten-30

  • teal lighten-40

  • blue darken-40

  • blue darken-30

  • blue darken-20

  • blue darken-10

  • blue

  • blue lighten-10

  • blue lighten-20

  • blue lighten-30

  • blue lighten-40

  • fuchsia darken-40

  • fuchsia darken-30

  • fuchsia darken-20

  • fuchsia darken-10

  • fuchsia

  • fuchsia lighten-10

  • fuchsia lighten-20

  • fuchsia lighten-30

  • fuchsia lighten-40

  • purple darken-30

  • purple darken-20

  • purple darken-10

  • purple

  • purple lighten-10

  • purple lighten-20

  • purple lighten-30

  • purple lighten-40

                    
    <div class="blue lighten-40"> blue lighten-40 </div>
                    
                

In addition to the colours classes, you can also use other already defined background colours classes like: .theme-1, .theme-2, .primary, .success, .warning, .danger, .default

For color property, you can use already defined classes like: .text-white, .text-grey, .text-black, .text-red

the fonts

easy as a class attribute

Roboto

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus at, atque consectetur distinctio error ipsum itaque magnam mollitia natus numquam quasi quo, ullam veritatis, voluptatem. Architecto aspernatur maxime quasi.

Roboto Condensed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid consectetur cum, dolore eius error est et fuga illum modi molestiae natus, neque nisi placeat possimus praesentium repellat sequi vero voluptatum.

Lato

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias at distinctio, fuga, fugit maiores maxime nemo quae quisquam quod rem soluta totam. Aliquam eos fugiat maxime quam quo!

Open Sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, beatae commodi consequatur dignissimos dolor dolore ducimus excepturi ipsa iure iusto laborum maiores modi nulla officia quasi qui suscipit voluptas voluptatum.

Open Sans Condensed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur assumenda at autem consectetur, distinctio hic id ipsa necessitatibus possimus quas quia reiciendis temporibus unde ut velit veritatis voluptatem. Quis?

Raleway

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nisi omnis quaerat quasi quibusdam quod repellendus rerum tenetur? Blanditiis culpa dignissimos est ipsum laudantium magni repellat reprehenderit temporibus unde. Sit!

Libre Barcode

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aspernatur, atque aut autem dolorem, fugiat impedit, in ipsam iste modi nesciunt nisi obcaecati provident quas quo repellendus totam voluptate voluptatem.

Merriweater

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti laboriosam minus soluta. Cupiditate eaque eligendi excepturi exercitationem ipsa minus natus possimus quidem quo voluptatibus. Animi itaque omnis repellat reprehenderit!

Indie Flower

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut culpa doloremque, ea exercitationem facere incidunt perspiciatis porro quo reiciendis repudiandae, velit? Dolorem eos, exercitationem nostrum quod rerum saepe velit.

                    
	<p class="font-roboto">             ... </p>
	<p class="font-roboto-condensed">   ... </p>
	<p class="font-lato">               ... </p>
	<p class="font-open-sans">          ... </p>
	<p class="font-open-sans-condensed">... </p>
	<p class="font-raleway">            ... </p>
	<p class="font-libre-barcode">      ... </p>
	<p class="font-merriweather">       ... </p>
	<p class="font-indie-flower">       ... </p>
                    
                

the icons

all the Font Awesome1 icons

1 Font Awesome by Dave Gandy - http://fontawesome.io

classic icons

all icons

                    
    <p>
        <i class="fa fa-user-secret"></i>
        <i class="fa fa-calendar"></i>
        <i class="fa fa-edit"></i>
        <i class="fa fa-arrow-circle-left"></i>
        <i class="fa fa-check-square"></i>
        <i class="fa fa-map-marker"></i>
    </p>
                    
                

differents sizes

                    
    <p>
        <i class="fa fa-bar-chart-o fa-1x"></i>
        <i class="fa fa-bar-chart-o fa-lg"></i>
        <i class="fa fa-bar-chart-o fa-2x"></i>
        <i class="fa fa-bar-chart-o fa-3x"></i>
        <i class="fa fa-bar-chart-o fa-4x"></i>
        <i class="fa fa-bar-chart-o fa-5x"></i>
    </p>
                    
                

animated icons

                    
    <p>
        <i class="fa fa-spinner fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>
    </p>
                    
                

labels and badges

the labels

Exemple of a H1 title with a default label

Exemple of a H2 title with a primary label

Exemple of a H3 title with a success label

Exemple of a H4 title with a warning label

Exemple of a H5 title with a danger label
                    
    <h1>Exemple of a H1 title with a <span class="label-default">default label</span></h1>
    <h2>Exemple of a H2 title with a <span class="label-primary">primary label</span></h2>
    <h3>Exemple of a H3 title with a <span class="label-success">success label</span></h3>
    <h4>Exemple of a H4 title with a <span class="label-warning">warning label</span></h4>
    <h5>Exemple of a H5 title with a <span class="label-danger">danger label</span></h5>
                    
                

the badges

new posts 52

new comments 138

new buttons 9
                    
                        <h1>new posts <span class="badge">52</span></h1>
                        <h1>new comments <span class="badge">138</span></h1>
                        <a href="#!" class="btn-primary">new buttons <span class="badge">9</span></a>
                    
                

the buttons

that you can disable

classic buttons

                    
    <a href="" class="btn-default">  ... </a>
    <a href="" class="btn-primary">  ... </a>
    <a href="" class="btn-success">  ... </a>
    <a href="" class="btn-warning">  ... </a>
    <a href="" class="btn-danger">   ... </a>
                    
                

differents sizes

                    
    <a href="" class="btn-success btn-sm">  ... </a>
    <a href="" class="btn-primary">         ... </a>
    <a href="" class="btn-danger btn-lg">   ... </a>
                    
                

readonly buttons

                    
    <a href="" class="btn-primary disabled">  ... </a>
    <a href="" class="btn-default" readonly>  ... </a>
                    
                

the forms

that you can display inline

classic inputs

                    
    <form action="#!" method="post" class="row-g">
        <label for="name" class="col m6 text-right">name</label>
        <input id="name" type="text" class="col m6 warning"/>

        <label for="firstname" class="col m6 text-right">firstname</label>
        <input id="firstname" type="text" class="col m6 error"/>

        <label for="password" class="col m6 required text-right">password</label>
        <div class="col m6 input-group input-password">
            <input id="password" type="password" required disabled value="osefjoseph"/>
            <span class="addon primary"><i class="fa fa-eye"></i></span>
        </div>

        <label for="email" class="col m6 text-right">email</label>
        <div class="col m6 input-group-left">
            <input id="email" type="email"/>
            <span class="addon"><i class="fa fa-envelope-open-o"></i></span>
        </div>

        <label for="email2" class="col m6 text-right">email verification</label>
        <div class="col m6 input-group-double">
            <span class="addon"><i class="fa fa-at"></i></span>
            <input id="email2" type="email"/>
            <span class="addon primary"><i class="fa fa-envelope-open-o"></i></span>
        </div>

        <div class="col m6 text-right">
            <label for="male">gender</label>
        </div>
        <div class="col s3 text-center">
            <input type="radio" name="gender" id="male" checked/>
            <label for="male">male</label>
        </div>
        <div class="col s3 text-center">
            <input type="radio" name="gender" id="female"/>
            <label for="female">female</label>
        </div>

        <label for="address" class="col m6 text-right">address</label>
        <textarea id="address" class="col m6"></textarea>

        <label for="country" class="col m6 text-right">country</label>
        <div class="col m6 input-group-double">
            <span class="addon"><i class="fa fa-map"></i></span>
            <select id="country" class="col m6">
                <option value="">France</option>
                <option value="">Mexico</option>
                <option value="">U.S.A.</option>
                <option value="">Belgium</option>
                <option value="" selected>Luxembourg</option>
                <option value="">England</option>
            </select>
            <span class="addon danger"><i class="fa fa-arrow-circle-down"></i></span>
        </div>

        <div class="col m6 offset-m6">
         <input type="checkbox" id="copy" checked/><label for="copy">send me a copy</label>
        </div>
    </form>
                    
                

inline forms

                    
    <form method="post" action="#!" class="form-inline">
        <div class="col m6 input-group-left">
            <input type="text" placeholder="username"/>
            <span class="addon primary"><i class="fa fa-user"></i></span>
        </div>
        <div class="col m6 input-group-left input-password">
            <input type="password" placeholder="password"/>
            <span class="addon primary"><i class="fa fa-eye"></i></span>
        </div>
        <button type="submit" class="btn-primary"><i class="fa fa-unlock-alt"></i> login</button>
    </form>

    <form method="post" action="#!" class="form-glue">
        <input type="text" placeholder="username"/>
        <input type="password" placeholder="password"/>
        <input type="submit" class="btn-primary" value="login"/>
    </form>
                    
                

click on the input password icon to see the password in plaintext

the tables

with modern style

classic table

i am the title of the table
col1 col2 col3 col4
value col1 item1 and 2 value col2 item1 value col3 item1 value col4 item1
value col2 item2 value col3 and col4 item2
value col1 item3 value col2 item3 value col3 item3 value col4 item3
                    
    <div class="table-responsive">
        <table>
            <caption>i am the title of the table</caption>
            <tr>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
            </tr>
            <tr class="contour">
                <td rowspan="2"><span>value col1 item1 and 2</span></td>
                <td>value col2 item1</td>
                <td>value col3 item1</td>
                <td>value col4 item1</td>
            </tr>
            <tr class="contour">
                <td><span>value col2 item2</span></td>
                <td colspan="2">value col3 and col4 item2</td>
            </tr>
            <tr>
                <td>value col1 item3</td>
                <td>value col2 item3</td>
                <td>value col3 item3</td>
                <td>value col4 item3</td>
            </tr>
        </table>
    </div>
                    
                

full structure

i am the title of the table
col1 col2 col3 col4
value col1 item1 and 2 value col2 item1 value col3 item1 value col4 item1
value col2 item2 value col3 and col4 item2
value col1 item3 value col2 item3 value col3 item3 value col4 item3
i am the footer of the table
                    
    <div class="table-responsive">
        <table>
            <caption>i am the title of the table</caption>
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>
                    <th>col3</th>
                    <th>col4</th>
                </tr>
            </thead>
            <tbody>
                <tr class="contour">
                    <td rowspan="2"><span>value col1 item1 and 2</span></td>
                    <td>value col2 item1</td>
                    <td>value col3 item1</td>
                    <td>value col4 item1</td>
                </tr>
                <tr class="contour">
                    <td><span>value col2 item2</span></td>
                    <td colspan="2">value col3 and col4 item2</td>
                </tr>
                <tr>
                    <td>value col1 item3</td>
                    <td>value col2 item3</td>
                    <td>value col3 item3</td>
                    <td>value col4 item3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">i am the footer of the table</td>
                </tr>
            </tfoot>
        </table>
    </div>
                    
                

double heading

i am the title of the table
name col1 col2 col3 col4
name item1 value col1 item1 and 2 value col2 item1 value col3 item1 value col4 item1
name item2 value col2 item2 value col3 and col4 item2
name item3 value col1 item3 value col2 item3 value col3 item3 value col4 item3
i am the footer of the table
                    
    <div class="table-responsive">
        <table class="double">
            <caption>i am the title of the table</caption>
            <thead>
                <tr>
                    <th>name</th>
                    <th>col1</th>
                    <th>col2</th>
                    <th>col3</th>
                    <th>col4</th>
                </tr>
            </thead>
            <tbody>
                <tr class="contour">
                    <th>name item1</th>
                    <td rowspan="2"><span>value col1 item1 and 2</span></td>
                    <td>value col2 item1</td>
                    <td>value col3 item1</td>
                    <td>value col4 item1</td>
                </tr>
                <tr class="contour">
                    <th>name item2</th>
                    <td><span>value col2 item2</span></td>
                    <td colspan="2">value col3 and col4 item2</td>
                </tr>
                <tr>
                    <th>name item3</th>
                    <td>value col1 item3</td>
                    <td>value col2 item3</td>
                    <td>value col3 item3</td>
                    <td>value col4 item3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">i am the footer of the table</td>
                </tr>
            </tfoot>
        </table>
    </div>
                    
                

the sections

util classes

well

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias assumenda aut consequatur, ducimus ea fugiat hic, ipsam iste labore mollitia pariatur porro quidem quod quos sed sit. Labore, quam.

Consectetur dolore molestiae molestias porro sed. Architecto, consequatur doloremque eius eum exercitationem explicabo impedit ipsam iusto modi molestiae molestias natus placeat quidem, tempore tenetur ullam ut voluptates voluptatum? Dolores, vel.


additional content

                    
    <div class="well">
        <p>Lorem ... </p>
        <p>Consectetur ... </p>
        <hr/>
        <p class="text-center">additional content ... </p>
    </div>
                    
                

panels

panel title voir

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.

A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum? Dolorem fuga pariatur repudiandae? Doloremque, ex.

Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?

Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit temporibus veritatis. Atque ducimus, error id minus modi vero.

published in section: footer

panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.

A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum? Dolorem fuga pariatur repudiandae? Doloremque, ex.

Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?

Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit temporibus veritatis. Atque ducimus, error id minus modi vero.

panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.

A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum? Dolorem fuga pariatur repudiandae? Doloremque, ex.

Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?

Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit temporibus veritatis. Atque ducimus, error id minus modi vero.

panel title voir

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.

A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum? Dolorem fuga pariatur repudiandae? Doloremque, ex.

Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?

Asperiores id laborum magnam maiores minus molestiae quisquam ut! Ad blanditiis facere facilis, ipsum, molestiae necessitatibus nobis quibusdam quidem ratione reprehenderit temporibus veritatis. Atque ducimus, error id minus modi vero.

published in section: footer

panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam cupiditate dolor dolorem esse fugiat illo incidunt itaque labore laboriosam mollitia obcaecati odit praesentium qui quisquam repudiandae, sequi veritatis voluptatibus.

A autem commodi ducimus eius error eveniet exercitationem in ipsa iusto, laboriosam magni necessitatibus neque non praesentium quae quas quasi qui, recusandae repellendus rerum? Dolorem fuga pariatur repudiandae? Doloremque, ex.

Animi blanditiis doloribus dolorum est exercitationem facere harum inventore labore laborum magnam maxime molestias nobis non perferendis possimus quaerat quos reiciendis repudiandae saepe tenetur, vel vitae voluptatibus voluptatum. Fugit, ullam?

                    
    <div class="row panel-group">
        <div class="panel-default">
            <header class="panel-heading">
                <h1><i class="fa fa-info-circle"></i> panel title <a href="#!">voir</a></h1>
            </header>
            <section class="panel-body">
                ... content ...
            </section>
            <footer class="panel-footer">
                <p class="italic text-center">published in section: footer</p>
            </footer>
        </div>

        <div class="col m6">
            <div class="panel-primary">
                <header class="panel-heading">
                    <h1>panel title</h1>
                </header>
                <section class="panel-body">
                    ... content ...
                </section>
            </div>
        </div>

        <div class="col m6">
            <div class="panel-success">
                <header class="panel-heading">
                    <h1>panel title</h1>
                </header>
                <section class="panel-body">
                    ... content ...
                </section>
            </div>
        </div>

        <div class="col m6">
            <div class="panel-warning">
                <header class="panel-heading">
                    <h1>panel title <a href="#!" class="btn-danger">voir</a></h1>
                </header>
                <section class="panel-body">
                    ... content ...
                </section>
            </div>
        </div>

        <div class="col m6">
            <div class="panel-danger">
                <header class="panel-heading">
                    <h1>panel title</h1>
                </header>
                <section class="panel-body">
                    ... content ...
                </section>
            </div>
        </div>
    </div>
                    
                

the cards

to card content

basic usage

                    

                    
                

the alerts

success, warning or danger

simple

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.


additional content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aperiam consectetur culpa distinctio dolorem enim eos facilis, iusto maxime minima placeat quo ratione recusandae reiciendis, reprehenderit sunt tenetur, voluptatem.

                    
    <div class="alert default">
        <p><i class="fa fa-info-circle"></i>    ... </p>
    </div>
    <div class="alert success">
        <p><i class="fa fa-check"></i>    ... </p>
    </div>
    <div class="alert warning">
        <p><i class="fa fa-warning"></i>  ... </p>
        <hr/>
        <p> additional content </p>
    </div>
    <div class="alert danger">
        <p><i class="fa fa-close"></i>    ... </p>
    </div>
                    
                

closable

you can close this alert message

                    
    <div class="alert warning dismissable">
        <p><i class="fa fa-warning"></i>  ... </p>
    </div>