Fork me on GitHub

Aoi (青い) style guide

Button

Use the btn class on <button> or <input type="button"> elements.

 
<input type="button" class="btn" value="Button"/>
 
<button class="btn">Button</button>

Colored Buttons

Add the accent, danger, warning, info, or success classes to a button to give the button a special semantic cue.

 
<button class="btn accent">Button</button>
 
<button class="btn danger">Button</button>
 
<button class="btn warning">Button</button>
 
<button class="btn info">Button</button>
 
<button class="btn success">Button</button>

Large Button

Add the btn-large class to other button classes to obtain a larger affordance.

 
<input type="button" class="btn btn-large" value="Button"/>
 
<button class="btn btn-large">Button</button>

Small Button

Add the btn-small class to other button classes to obtain a smaller affordance.

 
<input type="button" class="btn btn-small" value="Button"/>
 
<button class="btn btn-small">Button</button>

Form

Use the form class on a <div> or a <section> enclosing a group of form controls. Each row of the form must be enclosed in a block element with class form-row. Inside it, place a <label> and an input enclosed in a <div> with class form-field.

<div class="form">
    <div class="form-row">
        <label for="f_title">Title:</label>
        <div class="form-field">
            <input type="text" size="24" placeholder="Enter title"/>
        </div>
    </div>
</div>

Disabled and readonly elements are styled automatically.

<div class="form">
    <div class="form-row">
        <label for="f_title">Title:</label>
        <div class="form-field">
            <input type="text" size="24" value="Norwegian Wood" readonly/>
        </div>
    </div>
    <div class="form-row">
        <label for="f_category">Category:</label>
        <div class="form-field">
            <input type="text" size="24" value="Novel" disabled/>
        </div>
    </div>
</div>

Enclose submit and cancel buttons in a form-footer element. The primary action in the form, usually the submit button, should have the accent class. Dangerous actions, e.g. actions that have a destructive effect, should use the danger class.

<div class="form">
    <div class="form-row">
        <label for="f_title">Title:</label>
        <div class="form-field">
            <input type="text" size="24" placeholder="Enter title"/>
        </div>
    </div>
    <div class="form-footer">
        <input type="submit" class="accent" value="Order"/>
        <input type="submit" class="danger" value="Delete"/>
        <input type="reset" value="Cancel"/>
    </div>
</div>

Messages

Use the msg class on a block element to style it as a message container.

Hey y'all!

<div class="msg">
    <p>Hey y'all!</p>
</div>

Additionally, you can set a level modifier of accent (default), error, warning, info, or success to give it a semantic cue.

There was an error

This is a warning

Here is some info

Things are going well

<div class="msg error">
    <p>There was an error</p>
</div>

<div class="msg warning">
    <p>This is a warning</p>
</div>

<div class="msg info">
    <p>Here is some info</p>
</div>

<div class="msg success">
    <p>Things are going well</p>
</div>

Finally, setting a modifier of msg-icon, the message will include an icon.

There was an error

This is a warning

Here is some info

Things are going well

<div class="msg msg-icon error">
    <p>There was an error</p>
</div>

<div class="msg msg-icon warning">
    <p>This is a warning</p>
</div>

<div class="msg msg-icon info">
    <p>Here is some info</p>
</div>

<div class="msg msg-icon success">
    <p>Things are going well</p>
</div>