Uibox NPM | npm.io

Personal CSS framework simple and easy to use

Installation

$ npm i uibox
or
$ yarn add uibox

Usage

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
</style>

import 'uibox'

Examples

Alert

<div uib-box>
    <div uib-alert>Default</div>
    <div uib-alert="error shadow">Error</div>
    <div uib-alert="info shadow">Info</div>
    <div uib-alert="success shadow">Success</div>
    <div uib-alert="warning shadow">Warning</div>
</div>

Button

<div uib-box uib-center>
    <button uib-button="border-radius shadow">BUTTON</button>
    <button uib-button="border-radius neutral">BUTTON</button>
    <button uib-button="border-radius negative-action shadow">BUTTON</button>
    <button uib-button="border-radius neutral disabled">BUTTON</button>
    <button uib-button="round shadow" uib-icon="add">BUTTON</button>
</div>

Checkbox

<div uib-columns="2" uib-box>
    <div uib-checkbox>Checkbox</div>
    <div uib-checkbox="checked">Checkbox</div>
    <div uib-checkbox="indeterminate">Checkbox</div>
    <div uib-checkbox="only checked">Checkbox</div>
    <div uib-checkbox="disabled checked">Checkbox</div>
    <div uib-checkbox="reverse">Checkbox</div>
</div>

Dialog

<div uib-dialog>
    <section>
        <h2>Request permission</h2>
        <p>We need your permission to send production reports to the system administrators. Do you agree?</p>
        <div uib-right>
            <button uib-button="border-radius neutral">DO NOT ALLOW</button>
            <button uib-button="border-radius shadow">I AGREE</button>
        </div>
    </section>
</div>

Dropdown

<div uib-box>
    <div uib-columns="auto">
        <div uib-dropdown="readonly" uib-label="Country">
            <input uib-input="border-radius" type="text" value="Perú" readonly>
            <div uib-select="border-radius">
                <optgroup uib-label="Countries">
                    <option>Colombia</option>
                    <option uib-focus>Perú</option>
                    <option uib-option="disabled" uib-item="Out of service">Venezuela</option>
                </optgroup>
            </div>
        </div>

        <div uib-dropdown="invalid" uib-label="City / State">
            <input uib-input="border-radius" type="text" placeholder="Select a city">
            <div uib-select="border-radius">
                <optgroup uib-label="States">
                    <option>Bogotá</option>
                    <option>Lima</option>
                    <option uib-option="disabled" uib-item-down="Out of service">Caracas</option>
                </optgroup>
            </div>
        </div>
    </div>
</div>

Field

<div uib-box>
    <div uib-columns="auto">
        <div uib-field="invalid" uib-icon="face" uib-label="Name">
            <input uib-input="border-radius" type="text">
        </div>

        <div uib-field uib-icon-right="location_on" uib-label="Address">
            <input uib-input="border-radius" type="text" value="Av. 123">
            <label>Av. 123</label>
        </div>
    </div>
</div>

Input

<div>
    <div uib-columns="2" uib-box>
        <input uib-input="border-radius" type="text" placeholder="From">
        <input uib-input="border-radius" type="text" placeholder="To">
    </div>
    <div uib-box>
        <input uib-input="flat disabled" placeholder="Comments not currently available" type="text" readonly>
    </div>
</div>

Load

<div uib-box>
    <div uib-load></div>
    <!-- <div uib-load="light"></div> -->
</div>

Radiobutton

<div uib-columns="2" uib-box>
    <div uib-radiobutton>Radiobutton</div>
    <div uib-radiobutton="selected">Radiobutton</div>
    <div uib-radiobutton="only selected">Radiobutton</div>
    <div uib-radiobutton="disabled selected">Radiobutton</div>
    <div uib-radiobutton="reverse">Radiobutton</div>
</div>

Select

<div uib-box>
    <div uib-select="border-radius not-absolute">
        <optgroup uib-label="Countries">
            <option>Colombia</option>
            <option uib-focus>Perú</option>
            <option uib-item="Out of service">Venezuela</option>
        </optgroup>
    </div>
</div>

Swich

<div uib-box>
    <div uib-swich>Swich</div>
    <div uib-swich="active">Swich</div>
    <div uib-swich="only active">Swich</div>
    <div uib-swich="disabled active">Swich</div>
    <div uib-swich="reverse">Swich</div>
</div>

Table

<div uib-box>
    <table uib-table>
        <thead>
            <tr>
                <th style="width:10%">
                    <a>#</a>
                </th>
                <th style="width:60%">
                    <a>name</a>
                </th>
                <th style="width:30%">
                    <i class="con">edit</i>
                    <a>price</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr uib-tr="disabled">
                <td style="width:10%">
                    <a>101</a>
                </td>
                <td style="width:60%">
                    <a>Device x90</a>
                </td>
                <td style="width:30%">
                    <a>
                        <label>$0</label>
                        <input type="number">
                    </a>
                </td>
            </tr>
            <tr>
                <td style="width:10%">
                    <a>102</a>
                </td>
                <td style="width:60%">
                    <a>Device x800</a>
                </td>
                <td style="width:30%">
                    <a>
                        <label>$0</label>
                        <input type="number">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Tab

<div uib-box>
    <div uib-columns="3">
        <a uib-tab="selected">Messages</a>
        <a uib-tab>Calls</a>
        <a uib-tab="disabled">Notifications</a>
    </div>
</div>

Icons

<div uib-box uib-center>
    <i class="con add"></i> <!-- Pug i.con.add -->
    <i class="con delete"></i>
    <i class="con check"></i>
</div>

Miscellany

Box

<div uib-box>
    ...
</div>

Full screen

<div uib-full-screen="scroll">
    ...
</div>

Center, left and right

<div uib-center>
    ...
</div>

<div uib-left>
    ...
</div>

<div uib-right>
    ...
</div>

Capitalize, lowercasse and uppercase

<p uib-capitalize>
    ...
</p>

<p uib-lowercasse>
    ...
</p>

<p uib-uppercase>
    ...
</p>

Columns

<div uib-columns="auto">
    ...
    ...
</div>

<div uib-columns="1">
    ...
    ...
</div>

<div uib-columns="2">
    ...
    ...
</div>

<div uib-columns="3">
    ...
    ...
    ...
</div>
<!-- 4, 5, 6, 7, 8, 9, 10, 11 -->
<div uib-columns="12">
    ...
    ...
    ...
</div>

For more information about the icons :