Wisteria

The best HTML-driven prototyping tool for designing in browser.

v0.11.0

Download Wisteria

Hi-Control

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

Helper

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

Harmless

Wisteria does not destroy your web page style, because it has only class selectors. HTML5-Reset just resets the style.

Wisteria.css is a tool for design in the browser to make a mockup or personal projects not large system. You just focus on your HTML using utility classes.

You can make a modern minimum web page in no time if you have some nice pictures, icons and Wistera.css. Without writing a lot of CSS.

View the GitHub project

Getting started

Include the Wisteria.css and HTML5-Reset.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
1/2
1/2
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>
      <!-- Without gutters -->
      <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>
      <!-- Vertically Centered Grid Cells -->
      <div class="g-row g-row--center">
        <div class="g-col">1/2</div>
        <div class="g-col">1/2</div>
      </div>
      <!-- Bottom-aligned Grid Cells -->
      <div class="g-row g-row--bottom">
        <div class="g-col">1/3</div>
        <div class="g-col">1/3</div>
        <div class="g-col">1/3</div>
      </div>
      <!-- Individual Sizing -->
      <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 such as a class="u-fz[Number]".

.h1, .u-fz1 { font-size: 6.4rem; }
      .h2, .u-fz2 { font-size: 4.8rem; }
      .h3, .u-fz3 { font-size: 3.6rem; }
      .h4, .u-fz4 { font-size: 2.4rem; }
      .h5, .u-fz5 { font-size: 2.0rem; }
      .h6, .u-fz6 { font-size: 1.8rem; }
      .u-fz7 { font-size: 1.6rem; }  /* Base font-size */
      .u-fz8 { font-size: 1.4rem; }
      .small, .u-fz9 { font-size: 1.2rem; }
      .u-fz10 { font-size: 1rem; }

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.
<p>
        <a href="#">anchor</a>
        <span class="b">bold</span>
        <span class="strong">strong</span>
        <span class="weak">weak</span>
        <span class="del">delete</span>
        <span class="em">emphasize</span>
        <span class="i">italic</span>
        <span class="small">small</span>
      </p>
    

<!-- // A pseudo-element(:after)　of .dummy has Lorem ipsum texts. -->
      <p><span class="dummy"></span></p>
      <p class="u-tov"><span class="dummy"></span></p>

Code

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

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

<!-- HTML5-Reset.css specifies img { max-width: 100% } -->
          <img src="light.jpg" alt>
<img src="typewriter.jpg" width="100" height="100" alt>
      <img width="100" height="100" class="img--placeholder" alt>
      <img src="typewriter.jpg" width="100" height="100" class="img--oval" alt>
      <img width="100" height="100" class="img--placeholder img--oval" alt>

Lists

  • Unordered List item
  • item
    • second item
    • second item
  • item
<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">

Colors

C1 Red Light
C2 Blue Light
C3 Green Light
C4 Yellow Light
C5 Grey Light
C1 Red
C2 Blue
C3 Green
C4 Yellow
C5 Grey
C1 Red Dark
C2 Blue Dark
C3 Green Dark
C4 Yellow Dark
C5 Grey Dark
<!-- You can specify number to choose a color. -->
      <div class="u-c1">C1 Red Color</div>
      <div class="u-bgc1">C1 Red Backgroud-Color</div>
      <div class="u-bdc1">C1 Red Border-Color</div>

      <div class="u-c1--light">C1 Red Light Color</div>
      <div class="u-bgc1-light">C1 Red Light Backgroud-Color</div>
      <div class="u-bdc1-light">C1 Red Light Border-Color</div>

      <div class="u-c1--dark">C1 Red Dark Color</div>
      <div class="u-bgc1-dark">C1 Red Dark Backgroud-Color</div>
      <div class="u-bdc1-dark">C1 Red Dark Border-Color</div>

Utilities

All utilities classes on GitHub.

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

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

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

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

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

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

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

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