Adminize

Basics

Head Navigation

This is required component when you building app with Adminize package.
You have to put that in <body>.

Username
user name 
<div class="head-bar js-headbar">
  <div class="head-bar__toggle js-head-toggle"></div>
  <div class="user-dropdown js-dropdown">
    <div class="user-name">Username</div>
    <div class="user-avatar">
      <img src="//www.gravatar.com/avatar/b58f6ebea2155370e2daf60c369616b1" alt="user name">
    </div>
    <div class="user-menu">
      <i class="caret">
        <i class="caret-outer"></i>
        <i class="caret-inner"></i>
      </i>
      <ul class="user-menu__content">
        <li class="user-menu__list">
          <a href="#"><i class="fa fa-gear"></i><span>Settings</span></a>
        </li>
        <li class="user-menu__list">
          <a href="#"><i class="fa fa-sign-out"></i><span>Sign out</span></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Side Navigation

This is required component when you building app with Adminize package.
You have to put that after Head Navigation component.

Basic

App Name 
<div class="side-bar">
  <div class="side-bar__header">
    <div class="site-name">
      <a href="#"><img src="./assets/img/head-logo.png"><span>App Name</span></a>
    </div>
  </div>
  <div class="scroll-wrap">
    <div class="scroll-content">
      <ul class="side-bar__menu">
        <li class="side-bar__list is-active">
          <a href="#">
            <i class="fa fa-file-text icon"></i><span>Menu #1</span>
          </a>
        </li>
        <li class="side-bar__list">
          <a href="#">
            <i class="fa fa-file-text icon"></i><span>Menu #2</span>
          </a>
        </li>
        <li class="side-bar__list">
          <a href="#">
            <i class="fa fa-file-text icon"></i><span>Menu #3</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Child menu item

App Name 
<div class="side-bar">
  <div class="side-bar__header">
    <div class="site-name">
      <a href="#"><img src="./assets/img/head-logo.png"><span>App Name</span></a>
    </div>
  </div>
  <div class="scroll-wrap">
    <div class="scroll-content">
      <ul class="side-bar__menu">
        <li class="side-bar__list is-active">
          <div class="parent-title js-side-parent">
            <i class="fa fa-file-text icon"></i><span>Parent</span>
          </div>
          <ul class="child-menu">
            <li class="child-menu__list is-active"><a href="#">child 1</a></li>
            <li class="child-menu__list"><a href="#">child 2</a></li>
            <li class="child-menu__list"><a href="#">child 3</a></li>
          </ul>
        </li>
        <li class="side-bar__list">
          <div class="parent-title js-side-parent">
            <i class="fa fa-file-text icon"></i><span>Parent</span>
          </div>
          <ul class="child-menu">
            <li class="child-menu__list"><a href="#">child 1</a></li>
            <li class="child-menu__list"><a href="#">child 2</a></li>
            <li class="child-menu__list"><a href="#">child 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Main Contents

This is required component when you building app with Adminize package.
You have to put that after Side Navigation component.

<div class="main-contents">
  <div class="main-contents__body">
    <!-- Put your favorite component in here -->
  </div>
</div>

Typography

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Styled Heading

Page Title

Page Title

<h1 class="page-header">Page Title</h1>
<h3 class="sub-header">Page Title</h3>

Paragraph, Strong and Small

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Code

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Blockquote

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tables

Basic

ID Name Age
3 komeda 27
3 komeda 27
3 komeda 27 
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

Bordered

Add .table--bordered.

ID Name Age
3 komeda 27
3 komeda 27
3 komeda 27 
<table class="table table--bordered">
  ...
</table>

Striped

Add .table--striped.

ID Name Age
3 komeda 27
3 komeda 27
3 komeda 27 
<table class="table table--striped">
  ...
</table>

Fixed Section Header

ID Name Age
Header
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
Header
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27
3 komeda 27 
<table class="table ts-table-section">
  <tbody>
    <tr class="ts-row-section">
      <td>Header</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
    <tr class="ts-row-section">
      <td>Header</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
    <tr>
      <td>3</td>
      <td>komeda</td>
      <td>27</td>
    </tr>
  </tbody>
</table>

Forms

Input

Input sizing

<input type="text" class="input--xsmall" placeholder="xsmall">
<input type="text" class="input--small" placeholder="small">
<input type="text" placeholder="default">
<input type="text" class="input--large" placeholder="large">
<input type="text" class="input--full" placeholder="full">

Input coloring

<input type="text" class="input--success" placeholder="success">
<input type="text" class="input--danger" placeholder="danger">
<input type="text" class="input--warning" placeholder="warning">
<input type="text" class="input--info" placeholder="info">

Textarea

Radio

<label for="radio1">
  <input type="radio" name="radio" id="radio1" checked="checked" class="input-styled input--radio">
  <i class="icon"></i>
  <span>radio1</span>
</label>
<label for="radio2">
  <input type="radio" name="radio" id="radio2" class="input-styled input--radio">
  <i class="icon"></i>
  <span>radio2</span>
</label>

Checkbox

<label for="checkbox1">
  <input type="checkbox" name="checkbox" id="checkbox1" checked="checked" class="input-styled input--check">
  <i class="icon"></i>
  <span>checkbox1</span>
</label>
<label for="checkbox2">
  <input type="checkbox" name="checkbox" id="checkbox2" class="input-styled input--check">
  <i class="icon"></i>
  <span>checkbox2</span>
</label>

Styled Select

<div class="select-styled select--large">
  <select name="test">
    <option value="value1">custom 1</option>
    <option value="value2">custom custom 2</option>
    <option value="value3">long long long long long long long text</option>
  </select>
</div>

<div class="select-styled">
  <select name="test">
    <option value="value1">custom 1</option>
    <option value="value2">custom custom 2</option>
    <option value="value3">long long long long long long long text</option>
  </select>
</div>

Lists

Basics

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item

Unstyled

  • List item
  • List item
  • List item
<ul class="list-unstyled">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline

  • List item
  • List item
  • List item
<ul class="list-inline">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inlined list for button

<ul class="list-btn">
  <li><a class="btn btn--dark">Btn</a></li>
  <li><a class="btn btn--dark">Btn</a></li>
  <li><a class="btn btn--dark">Btn</a></li>
</ul>

Helper

Font Weight

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<p><span class="weight--bold">Lorem Ipsum</span> is simply dummy text of the printing and typesetting industry.</p>

Text Color

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<p class="color--success">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="color--danger">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="color--warning">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="color--info">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="color--muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Text Align

Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text.

Lorem Ipsum is simply dummy text.

<p class="align--left">Lorem Ipsum is simply dummy text.</p>
<p class="align--center">Lorem Ipsum is simply dummy text.</p>
<p class="align--right">Lorem Ipsum is simply dummy text.</p>

Vertical Align

Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
<div class="valign--top">Lorem Ipsum is simply dummy text.</div>
<div class="valign--middle">Lorem Ipsum is simply dummy text.</div>
<div class="valign--bottom">Lorem Ipsum is simply dummy text.</div>

Background Color

Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
<div class="bg--success">Lorem Ipsum is simply dummy text.</div>
<div class="bg--danger">Lorem Ipsum is simply dummy text.</div>
<div class="bg--warning">Lorem Ipsum is simply dummy text.</div>
<div class="bg--info">Lorem Ipsum is simply dummy text.</div>

Display

<div class="display--inline">display: inline;</div>
<div class="display--block">display: block;</div>
<div class="display--inline-block">display: inline-block;</div>
<div class="display--flex">display: flex;</div>

Margin / Padding

  • Spacing: 0, 2, 3, 5, 10, 15, 20, 25, 30, 40, 50, 60
<div class="mt20">margin-top: 20px;</div>
<div class="mr20">margin-right: 20px;</div>
<div class="mb20">margin-bottom: 20px;</div>
<div class="ml20">margin-left: 20px;</div>
<div class="mgn20">margin: 20px;</div>

<div class="pt20">padding-top: 20px;</div>
<div class="pr20">padding-right: 20px;</div>
<div class="pb20">padding-bottom: 20px;</div>
<div class="pl20">padding-left: 20px;</div>
<div class="pdn20">padding: 20px;</div>

Float

<div class="float--left">float: left;</div>
<div class="float--right">float: right;</div>

Flaot / Clearfix

<div class="clearfix">
  <div class="float--left">float: left;</div>
  <div class="float--right">float: right;</div>
</div>