Getting started

Add these headers to my site please!

Your first header

Setting up is easy, just add a couple of lines of html:

Here you can add items.

Code

<div class="ryoko ryoko-10">
    <div class="ryoko-body">
        Here you can add items.
    </div>
</div>

The basics

Here we just have the basics. A class .ryoko and a child with a class .ryoko-body. This sets up the main elements of a ryoko header. This sets up a header with a basic size and adds the content in the center. In this example i added a .ryoko-10 class just so it wont take a large part of the screen. You can check sizes on the sizing page.

Here you can add items.

Code

<div class="ryoko ryoko-20" style="background-image: url(https://images.unsplash.com/photo-1473445361085-b9a07f55608b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&h=800&fit=crop&s=116c38dd55a30ae98c3c653a0434b5b8)">
    <div class="ryoko-body">
        <div class="ryoko-faded text-white px-3 py-3 my-3">
            Here you can add items.
        </div>
    </div>
</div>

Add an image

Next we just have to add a background-image on the .ryoko. Thats it, cool. I did add some helper classes so we can read some text. .ryoko-faded to add a faded background. And .text-white, a bootstrap class, for the white text. .px-3 .py-3 .my-3 for some margins and paddings, also bootstrap.

Here you can add items.

Code

<div class="ryoko ryoko-20" style="background-image: url(https://images.unsplash.com/photo-1495132280856-0de542e5f919?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&h=800&fit=crop&s=116c38dd55a30ae98c3c653a0434b5b8)">
    <div class="ryoko-body">
        <div class="ryoko-faded ryoko-shadow text-white px-3 py-3 my-3">
            Here you can add items.
        </div>
    </div>
</div>

Add an shadow

Add a shadow on the content using .ryoko-shadow on the element that uses .ryoko-faded. Lets keep things easy.

Here you can add items.

Code

<div class="ryoko ryoko-20" style="background-image: url(https://images.unsplash.com/photo-1496871455396-14e56815f1f4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&h=800&fit=crop&s=116c38dd55a30ae98c3c653a0434b5b8)">
    <div class="ryoko-body ryoko-shade">
        <div class="px-3 py-3 my-3 text-white">
            Here you can add items.
        </div>
    </div>
</div>

Shades

Got a light image, add a shade. Add a .ryoko-shade on the .ryoko-body element to add a shader. You can also use .ryoko-shade-10 .ryoko-shade-20 until .ryoko-shade-100 for 10% black overlay to 100% black overlay (aka black).

More