Ryoko headers

Just create awesome headers.

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>

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 is just as easy as installing another npm package, just do this.


Add it to your dependencies.

npm install ryoko-headers --save


And to your scss builder.

@include "ryoko-headers/scss/ryoko"


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