colorful-interface v1.0.16

colorful-interface

This is a ui toolkit with styles for most common html elements

update

some class name have been changed, this documentation referees to the newest version

examples

<div class="pastel-red">
  <label for="a" class="label">Label:</label>
  <div class="group">
    <input type="text" class="input" />
    <input type="submit" class="button button-fit">
  </div>
</div>

<div class="group pastel-blue">
  <input type="submit" class="button button-selected" value="Yes">
  <input type="submit" class="button" value="No">
  <input type="submit" class="button" value="Maybe">
</div>

<table class="table pastel-black">
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </table>

<div class="card pastel-orange">
  <div class="card-header">Title</div>
  <div class="card-body">Content</div>
</div>

<div class="`nav pastel-purple">
  <div class="nav-item nav-item-selected">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Contact</div>
</div>

<div  class="nav nav-vertical pastel-pink">
    <div class="nav-item nav-item-selected">
      Home
    </div>
    <div class="nav-item">
      About
    </div>
    <div class="nav-item">
      Contact
    </div>
</div>

Colors

pastel-black

pastel-red

pastel-orange

pastel-pink

pastel-green

patel-cyan

patel-blue

pastel-purple

Row

<div class="row">
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
  <div class="col-3"></div>
</div>