Wisteria

A class selectors based harmless CSS library.

v0.6.0

Download Wisteria

Harmless

Wisteria dose not destroy your web page style, because has only class selectors. HTML5-Rest just reset the style.

Helper

Wisteria has a bunch of Emmet-like utility classes. It means you do not have to learn the namig rules.

Hi-Control

Wisteria's grid implements simple and modern Flexbox layout, so you make a mockup site with less typing rapidly.

View the GitHub project

Getting started

Include the Wisteria.css and HTML5-Rest.css files in your site.

<link rel="stylesheet" href="css/html5-reset.css">
      <link rel="stylesheet" href="css/wisteria.css">

Grids

1/6
1/6
1/6
1/6
1/6
1/6
1/3
1/3
1/3
auto
80%
<div class="g-row">
      <div class="g-col">1/6</div>
      <div class="g-col">1/6</div>
      <div class="g-col">1/6</div>
      <div class="g-col">1/6</div>
      <div class="g-col">1/6</div>
      <div class="g-col">1/6</div>
      </div>

      <div class="g-row g-row--collapse">
      <div class="g-col">1/3</div>
      <div class="g-col">1/3</div>
      <div class="g-col">1/3</div>
      </div>

      <div class="g-row">
      <div class="g-col">auto</div>
      <div class="g-col u-w80">80%</div>
      </div>

Typography

Header Text 1
Header Text 2
Header Text 3
Header Text 4
Header Text 5
Header Text 6
<div class="h1">Header Text 1</div>
      <div class="h2">Header Text 2</div>
      <div class="h3">Header Text 3</div>
      <div class="h4">Header Text 4</div>
      <div class="h5">Header Text 5</div>
      <div class="h6">Header Text 6</div>

You can also use it as a utility classes like a class="u-fz[number]".

Phrasing content
Lorem ipsum anchor amet, id his strong malorum, dictas euripidis pri et, at his weak dolorum. Eam in nihil elaboraret, eum facete delete adversarium emphasize quem odio. Ei recteque postulant persecuti vix. His id small falli omnesque, dicam electram id est, his possim temporibus ei.
<a href="#">anchor</a>
      <span class="strong">strong</span>
      <span class="weak">weak</span>
      <span class="del">delete</span>
      <span class="em">emphasize</span>
      <span class="small">small</span>

Code

This is .inline-code { color: red }.

function func() {
        console.log('Hello World!');
      }
This is <code class="code">.inline-code { color: red }</code>.

      <pre class="pre"><code class="code">function func() {
      &nbsp;&nbsp;console.log('Hello World!');
      }</code></pre>
Tables
Header Data Data Data
Header Data Data Data
Header Header Header
Data Data Data 
<table class="table">
      <tr><th>Header</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
      <tr><th>Header</th>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
      </table>
      <table class="table">
      <tr><th>Header</th>
      <th>Header</th>
      <th>Header</th>
      </tr>
      <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
      </table>

Forms

Checkbox 
<input type="checkbox" class="checkbox">Checkbox</div>
<input type="email" placeholder="test@mail.com" class="input"></div>
<textarea placeholder="Hi.." class="textarea"></textarea>
<select class="select">
      <option value="Option01">Option 01</option>
      <option value="Option02">Option 02</option>
      <option value="Option03">Option 03</option>
      </select>

Buttons

Link
Link 
<a href="#" class="button">Link</a>
      <button class="button">Button</button>
      <input type="submit" class="button" value="Submit">

      <a href="#" class="button button--outline">Link</a>
      <button class="button button--outline">Button</button>
      <input type="submit" class="button button--outline" value="Submit">

Images

<img src="light.jpg" alt>
      <img src="typewriter.jpg" width="100" height="100" class="img--oval" alt>
Lists
<ul class="ul">
        <li>Unordered List item</li>
        <li>item
          <ul class="ul">
            <li>second item</li>
            <li>second item</li>
          </ul>
        </li>
        <li>item</li>
      </ul>
  1. Ordered List item
  2. item
    • second item
    • second item
      • third item
      • third item
  3. item
<ol class="ol">
        <li>>Ordered List item</li>
        <li>item
          <ul class="ol">
            <li>second item</li>
            <li>second item
              <ul class="ul">
                <li>third item</li>
                <li>third item</li>
              </ul>
            </li>
        </ul>
        </li>
        <li>item</li>
      </ol>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 
<blockquote class="blockquote">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
      </blockquote>

Horizontal Rule

<hr class="hr">
      <hr class="hr hr--dashed">
Utilities

All utilities classes on GitHub.

/*	#Spacing
      \*------------------------------------*/
      .u-ma { margin: auto !important; }
      .u-mtn { margin-top: 0 !important; }
      .u-mts { margin-top: .4rem !important; }
      .u-mtm { margin-top: 1.6rem !important; }
      .u-mtl { margin-top: 3.2rem !important; }
      .u-mtx { margin-top: 4.8rem !important; }
      .u-mbn { margin-bottom: 0 !important; }
      .u-mbs { margin-bottom: .4rem !important; }
      .u-mbm { margin-bottom: 1.6rem !important; }
      .u-mbl { margin-bottom: 3.2rem !important; }
      .u-mbx { margin-bottom: 4.8rem !important; }
      .u-mn { margin: 0 !important; }

      .u-ptn { padding-top: 0 !important; }
      .u-pts { padding-top: .4rem !important; }
      .u-ptm { padding-top: 1.6rem !important; }
      .u-ptl { padding-top: 3.2rem !important; }
      .u-ptx { padding-top: 4.8rem !important; }
      .u-pbn { padding-bottom: 0 !important; }
      .u-pbs { padding-bottom: .4rem !important; }
      .u-pbm { padding-bottom: 1.6rem !important; }
      .u-pbl { padding-bottom: 3.2rem !important; }
      .u-pbx { padding-bottom: 4.8rem !important; }
      .u-pn { padding: 0 !important; }

      .u-tac { text-align: center !important; }
      .u-tal { text-align: left !important; }
      .u-tar { text-align: right !important; }

      .u-ttc { text-transform: capitalize !important; }
      .u-ttu { text-transform: uppercase !important; }
      .u-ttl { text-transform: lowercase !important; }

.u-cf {
      display: table;
      clear: both;
      content: ""; }
      .u-tov {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }

      .u-fln { float: none !important; }
      .u-fll { float: left !important; }
      .u-flr { float: right !important; }

      .u-dn { display: none !important; }
      .u-di { display: inline !important; }
      .u-db { display: block !important; }
      .u-vh { visibility: hidden !important; }

      .u-w10 { width: 10% !important; }
      .u-w20 { width: 20% !important; }
      .u-w25 { width: 25% !important; }
      .u-w30 { width: 30% !important; }
      .u-w33 { width: 33% !important; }
      .u-w35 { width: 35% !important; }
      .u-w40 { width: 40% !important; }
      .u-w50 { width: 50% !important; }
      .u-w60 { width: 60% !important; }
      .u-w65 { width: 65% !important; }
      .u-w66 { width: 66% !important; }
      .u-w70 { width: 70% !important; }
      .u-w75 { width: 75% !important; }
      .u-w80 { width: 80% !important; }
      .u-w90 { width: 90% !important; }
      .u-w100 { width: 100% !important; }