toolbars

Simple Toolbars. Just Html, CSS and Javascript pure (without Jquery).

Why

Sometimes we do not want to use a framework to create only one component

How to use

Add the dependencies

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/component.css">

Enter the html markup

<header class="toolbar">
    <section>
        <button class="touch">
            <i class="icon arrow_back"></i>
        </button>
    </section>

    <section class="title">
        Settings
    </section>

    <section>
        <button>
            <i class="icon search"></i>
        </button>
        <button>
            <i class="icon more_vert"></i>
        </button>
    </section>
</header>

Themes

Blue

<link rel="stylesheet" href="css/theme-blue.css">

Blue Gray

<link rel="stylesheet" href="css/theme-blue-gray.css">

Red

<link rel="stylesheet" href="css/theme-blue-red.css">

Black

<link rel="stylesheet" href="css/theme-blue-black.css">

Create your theme

Simply overwrite the tag element CSS

.toolbar{
    background: #212121;
    color: rgba(255, 255, 255, 0.87);
}

.icon{
    color: rgba(255, 255, 255, 0.87);
}

.effect-wave {
    background: rgba(255,255,255,0.45);
}

Wave Material Effect

<script src="effects.js"></script>

Win \o/