suricate-ui v0.0.2

Suricate UI

A simple library UI written in modern CSS, with the clean code proposed.

Build

$ npm install
$ grunt build

Code examples

Grid system with 16 columns

<div class="row">
  <div class="col-8"> ... </div>
  <div class="col-8"> ... </div>
</div>

Buttons

You can use the class .button in buttons and anchors HTML elements.

<button class="button">Default</button>
<button class="button primary">Primary</button>
<button class="button success">Success</button>
<button class="button warning">Warning</button>
<button class="button danger">Danger</button>

Group buttons:

<div class="group-button">
  <button class="button"> Item </button>
  <button class="button"> Item </button>
  <button class="button active"> active </button>
  <button class="button"> Item </button>
</div>

Buttons with counters:

<button class="button">counter <span class="counter">123</span></button>

Dropdown

<div class="dropdown">
  <button class="button"> Button dropdown </button>
  <ul class="opened">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><div class="divider"></div></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

Panel

<div class="panel">
  <header>
    <h2>Panel title</h2>
  </header>
  <div class="panel-body">
    Body ...
  </div>
</div>

Tabs

<div class="example">
  <header class="tabs">
    <nav class="right">
      <a href="#">First item</a>
      <a href="#" class="active">Actived</a>
      <a href="#">Item <span class="counter">0</span></a>
    </nav>
  </header>
  <p>Some context.</p>
</div>