the ui framework used across osekai sites!

About Osekai UI

What is Osekai UI?

How to use

Accent Colours

This part is really simple. At the top of the css file are these lines.

--accent: #aa66ff;
--accenttrans: #aa66ffee;
--accenttranser: #aa66ffaa;

you can either just edit these in the osekai ui css file, or if your including the raw github file, add this into another css file:

html,
body {
    --accent: #66498a;
    --accenttrans: #66498aee;
    --accenttranser: #66498aaa
}

Button

There are three types of buttons, the default, the light, and the dark. The dark one is a slightly transparent one, using the accent colour, the light one is just a white one, and the default one is just the accent colour.

You can see them in use here.

<button class="oui-button">Button</button>
<button class="oui-button oui-b-dark">Dark Button</button>
<button class="oui-button oui-b-light">Light/White button</button>

Dark: oui-b-dark
Light: oui-b-light

You can use oui-button on any type of button, for example here.

<button class="oui-button">Button</button>

You can just surround this in an <a> to link it.

In Action:



Inputs

Text

There are two types of text inputs, expandable and fixed.

Expandable 
<div class="oui-tbcontainer"> 
    <span class="oui-textbox oui-textbox-100" role="textbox" contenteditable="">9646336</span>
</div>

Non-expandable
<div class="oui-tbcontainer">
    <input class="oui-textbox" type="text" id="te" name="te"><br><br>
</div>

Dropdown

Dropdowns are super easy to do. Here's an example:

<select class="oui-dropdown" id="example" name="example">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>

In Action:

Expandable
9646336

Non-expandable



Navbar

Here's the navbar for Osekai Medals, you can most likely adapt this for your own website.

<div class="oui-navbar">
    <div class="oui-nav-inner">
        <a href="index"><img alt="Osekai"
        src="https://osekai.net/medals/img/omlogo.svg" class="oui-navlogo"></a>
    </div>
</div>

Panels

Panels are used to display content.

This is an example content used on an example website.

<div class="oui-panelscroller">
    <div class="oui-paneloutside">
        <h1 class="oui-p-header">Panel 1</h1>
        <div class="oui-panel">
            <div class="oui-panel-insidecont">
                This is a simple panel!<br>You can use these to display info
            </div>
        </div>
    </div>
    <div class="oui-paneloutside">
        <h1 class="oui-p-header">Panel 2</h1>
        <div class="oui-panel">
            <div class="oui-panel-insidecont">
                You can put anything you want in these<br>They're just divs.
            </div>
        </div>
    </div>
</div>

Panels automatically scale depending on the screen size.

You can also add a subtitle to the panels, using <h1 class="oui-p-subheader"></h1>

<div class="oui-paneloutside">
    <h1 class="oui-p-header">Panel 1</h1>
    <h1 class="oui-p-subheader">Sub</h1>
    <div class="oui-panel">
        <div class="oui-panel-insidecont">
            Here's a panel with a subtitle!
        </div>
    </div>
</div>

From the Github Wiki