Toolbars mobile simple (Html, CSS and Javascript)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
font
js
README.md
_config.yml
index-with-content.html
index.html

README.md

toolbars

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

Toolbar default

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

Blue theme

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

Blue Gray

Blue Gray theme

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

Red

Red theme

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

Black

Black theme

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