Adminize

Components

Button

Basic

Button 
<a href="#" class="btn btn--default">Button</a>

Coloring

Default Primary Success Danger Warning Info Dark 
<a href="#" class="btn btn--default">Default</a>
<a href="#" class="btn btn--primary">Primary</a>
<a href="#" class="btn btn--success">Success</a>
<a href="#" class="btn btn--danger">Danger</a>
<a href="#" class="btn btn--warning">Warning</a>
<a href="#" class="btn btn--info">Info</a>
<a href="#" class="btn btn--dark">Dark</a>

Sizing

Small

Default

Large 

<a href="#" class="btn btn--primary btn--small">Small</a>
<a href="#" class="btn btn--primary">Default</a>
<a href="#" class="btn btn--primary btn--large">Large</a>

with Icon

Add .with-icon.

Submit Edit Back 
<div class="docs-example">
  <a href="#" class="btn btn--success with-icon"><i class="fa fa-check"></i>Submit</a>
  <a href="#" class="btn btn--primary with-icon"><i class="fa fa-pencil"></i>Edit</a>
  <a href="#" class="btn btn--default with-icon"><i class="fa fa-reply"></i>Back</a>
</div>

Basic

<div class="dropdown-group">
  <button type="button" class="btn btn--primary js-dropdown-toggle">Button<i class="fa fa-caret-down dropdown__caret"></i></button>
  <ul class="dropdown pos-down pos-left">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</div>

Positioning

Add .pos-top, .pos-down, .pos-left and .pos-right.

<ul class="list-btn">
  <li>
    <div class="dropdown-group">
      <button type="button" class="btn btn--primary js-dropdown-toggle">Down / Left<i class="fa fa-caret-down dropdown__caret"></i></button>
      <ul class="dropdown pos-down pos-left">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
      </ul>
    </div>
  </li>
  <li>
    <div class="dropdown-group">
      <button type="button" class="btn btn--primary js-dropdown-toggle">Down / Right<i class="fa fa-caret-down dropdown__caret"></i></button>
      <ul class="dropdown pos-down pos-right">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
      </ul>
    </div>
  </li>
  <li>
    <div class="dropdown-group">
      <button type="button" class="btn btn--primary js-dropdown-toggle">Top / Left<i class="fa fa-caret-down dropdown__caret"></i></button>
      <ul class="dropdown pos-top pos-left">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
      </ul>
    </div>
  </li>
  <li>
    <div class="dropdown-group">
      <button type="button" class="btn btn--primary js-dropdown-toggle">Top / Right<i class="fa fa-caret-down dropdown__caret"></i></button>
      <ul class="dropdown pos-top pos-right">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
      </ul>
    </div>
  </li>
</ul>

Panel

Basic

Heading

some text 
<div class="panel panel--default">
  <div class="panel__head">
    <h2 class="panel__title">Heading</h2>
  </div>
  <div class="panel__body">
    body text
  </div>
</div>

with Data Lists

Default Panel

Label
Label
Body text
<div class="panel">
  <div class="panel__head">
    <h2 class="panel__title">Default Panel</h2>
  </div>
  <div class="panel__body">
    <dl class="data-list">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">
        <input type="text" name="">
      </dd>
    </dl>
    <dl class="data-list">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
    </dl>
  </div>
</div>

Data List

Basic

Label
Body text
Label
Body text
<div class="panel">
  <div class="panel__body">
    <dl class="data-list">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
    </dl>
    <dl class="data-list">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
    </dl>
  </div>
</div>

Column

Label
Body text
Label
Body text
Label
Body text
<div class="panel">
  <div class="panel__body">
    <dl class="data-list col2">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
    </dl>
    <dl class="data-list col2--50">
      <dt class="data-list__title">Label</dt>
      <dd class="data-list__body">Body text</dd>
    </dl>
  </div>
</div>

Tab

Content1
Content2
Content3 
<ul class="tab">
  <li class="is-active">
    <a href="#tab1" class="js-tab">Tab1</a>
  </li>
  <li>
    <a href="#tab2" class="js-tab">Tab2</a>
  </li>
  <li>
    <a href="#tab3" class="js-tab">Tab3</a>
  </li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane js-tab-pane is-active">
    <p>Content1</p>
  </div>
  <div id="tab2" class="tab-pane js-tab-pane">
    <p>Content2</p>
  </div>
  <div id="tab3" class="tab-pane js-tab-pane">
    <p>Content3</p>
  </div>
</div>

Pill

<ul class="pills">
  <li class="is-active"><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
</ul>
Call the modal

Heading of modal

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

<!-- Call button -->
<a href="#" data-remodal-target="sampleModal" class="btn btn--primary with-icon">
  <i class="fa fa-clone"></i> Call the modal
</a>

<!-- Modal -->
<div data-remodal-id="sampleModal" data-remodal-options="hashTracking: false" class="remodal">
  <div class="remodal__head">
    <h2 class="remodal__title">Heading of modal</h2>
    <button data-remodal-action="close" class="remodal__close"></button>
  </div>
  <div class="remodal__body">
    <p>Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.</p>
  </div>
  <div class="remodal__foot">
    <ul class="list-btn align--right">
      <li>
        <button data-remodal-action="cancel" class="btn btn--default">Cancel</button>
      </li>
      <li>
        <button data-remodal-action="confirm" class="btn btn--success">OK</button>
      </li>
    </ul>
  </div>
</div>

Datetime Picker

<head>
  <!-- include flatpickr css -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flatpickr/2.0.5/flatpickr.airbnb.min.css">
</head>
<body>

  <input type="text" class="input--calendar">

  <!-- include flatpickr js -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/flatpickr/2.0.5/flatpickr.min.js"></script>
  <script>
    $('.input--calendar').flatpickr();
  </script>

</body>

Label

Basic

Lorem Ipsum is simply dummy text. New

<p>Lorem Ipsum is simply dummy text. <span class="label">New</span></p>

Coloring

Lorem Ipsum is simply dummy text. Default

Lorem Ipsum is simply dummy text. Primary

Lorem Ipsum is simply dummy text. Success

Lorem Ipsum is simply dummy text. Danger

Lorem Ipsum is simply dummy text. Warning

Lorem Ipsum is simply dummy text. Info

<p>Lorem Ipsum is simply dummy text. <span class="label">Default</span></p>
<p>Lorem Ipsum is simply dummy text. <span class="label label--primary">Primary</span></p>
<p>Lorem Ipsum is simply dummy text. <span class="label label--success">Success</span></p>
<p>Lorem Ipsum is simply dummy text. <span class="label label--danger">Danger</span></p>
<p>Lorem Ipsum is simply dummy text. <span class="label label--warning">Warning</span></p>
<p>Lorem Ipsum is simply dummy text. <span class="label label--info">Info</span></p>

<ul class="breadcrumbs">
  <li class="breadcrumbs__list">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumbs__list">
    <a href="#">Second Page</a>
  </li>
  <li class="breadcrumbs__list">Third Page</li>
</ul>

Summary

Users
2,000 +1000(+50%)
Songs
2,000 -1000(-50%)
Movies
2,000 0(0%) 
<div class="summaries">
  <div class="summary">
    <div class="summary__head">
      <i class="fa fa-user"></i> Users
    </div>
    <div class="summary__body">
      <span class="summary__num">2,000</span>
      <span class="summary__num diff success">+1000(+50%)</span>
    </div>
  </div>
  <div class="summary">
    <div class="summary__head">
      <i class="fa fa-music"></i> Songs
    </div>
    <div class="summary__body">
      <span class="summary__num">2,000</span>
      <span class="summary__num diff danger">-1000(-50%)</span>
    </div>
  </div>
  <div class="summary">
    <div class="summary__head">
      <i class="fa fa-film"></i> Movies
    </div>
    <div class="summary__body">
      <span class="summary__num">2,000</span>
      <span class="summary__num diff">0(0%)</span>
    </div>
  </div>
</div>

Pagination

<ul class="pagination">
  <li><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
  <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
  <li><a href="#">1</a></li>
  <li class="active"><span>2</span></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><span>...</span></li>
  <li><a href="#">10</a></li>
  <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
  <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
</ul>

Flash Messages

Success

Danger

Warning

Info

<div class="flash-msg success">
  <button type="button" class="close js-flmsg-close"></button>
  <p>Success</p>
</div>

<div class="flash-msg danger">
  <button type="button" class="close js-flmsg-close"></button>
  <p>Danger</p>
</div>

<div class="flash-msg warning">
  <button type="button" class="close js-flmsg-close"></button>
  <p>Warning</p>
</div>

<div class="flash-msg info">
  <button type="button" class="close js-flmsg-close"></button>
  <p>Info</p>
</div>