Headers? Why

On the internet there are millions of headers. Easy, hard, customized, buildable. Let's make this easy to use. Just add this on your site:

<div class="ryoko" style="background-image: url(https://images.unsplash.com/photo-1471500466955-85aecf33f71f?dpr=1&auto=compress,format&fit=crop&w=1200&h=800&q=80&cs=tinysrgb&crop=&bg=)">
    <div class="ryoko-shade ryoko-body">
        <div class="ryoko-faded ryoko-shadow text-white px-3 py-3 my-3">
            <h3>Ryoko headers</h3>
            <p>Just create awesome headers.</p>
        </div>
    </div>
</div>

This is the code for the header above. Just a div and some content. Why do we want more.

We use a simple example of a vmin for a height, this is 1/100th of the smallest side of your viewport. Ryoko uses 40/100th of the smallest side of your viewport by default, this scales awesome of your desktop, and your mobile. It also uses the min-height, so if you have more info... fine! Want another size, can do. Just keep in mind to create something cool.

Installing

Installing is just as easy as installing another npm package, just do this.

npm

Add it to your dependencies.

npm install ryoko-headers --save

scss

And to your scss builder.

@include "ryoko-headers/scss/ryoko"

Licencing

Images used on the page were found on unsplash. An awesome resource for images.

Css frameworks used are: bootstrap, bulma, Material Design Lite.

Code hosted on github