picnic/src/plugins/stack/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<!-- Testing the module -->
<h2 id="stack">Stack</h2>

<h3>Buttons stack</h3>

<div class="flex four">
  <div>
    <span class="stack button icon-puzzle">Plugins</span>
    <span class="stack button icon-picture">Demo</span>
    <span class="stack button icon-help-circled">Test</span>
  </div>
  <div>
    <label class="stack">
      <input type="radio" name="stack" checked/>
      <span class="button toggle icon-puzzle">Plugins</span>
    </label>
    <label class="stack">
      <input type="radio" name="stack" />
      <span class="button toggle icon-picture">Demo</span>
    </label>
    <label class="stack">
      <input type="radio" name="stack" />
      <span class="button toggle icon-help-circled">Test</span>
    </label>
  </div>
  <div>
    <label class="stack">
      <input type="checkbox" checked/>
      <span class="button toggle icon-puzzle">Plugins</span>
    </label>
    <label class="stack">
      <input type="checkbox" checked/>
      <span class="button toggle icon-picture">Demo</span>
    </label>
    <label class="stack">
      <input type="checkbox"/>
      <span class="button toggle icon-help-circled">Test</span>
    </label>
  </div>
  <div>
    <span class="stack pseudo button icon-puzzle">Plugins</span>
    <span class="stack pseudo button icon-picture">Demo</span>
    <span class="stack pseudo button icon-help-circled">Test</span>
  </div>
</div>

<h3>Image stack</h3>

<div class="flex four">
  <div>
    <img class="stack" src="web/img/forest.jpg">
    <a class="stack button">Forest</a>
  </div>
  <div>
    <img class="stack" src="web/img/balloon.jpg">
    <a class="stack button">Balloon</a>
  </div>
  <div>
    <img class="stack" src="web/img/lake.jpg">
    <a class="stack button">Lake</a>
  </div>
  <div>
    <img class="stack" src="web/img/halong.jpg">
    <a class="stack button">Halong bay</a>
  </div>
</div>

<h3>Form stack</h3>

<div class="flex four">
  <div>
    <input class="stack" placeholder="Name" />
    <input class="stack" type="email" placeholder="Email" />
    <input class="stack" type="password" placeholder="Password" />
  </div>
  <div>
    <select class="stack">
      <option>Select an option</option>
      <option>Good option</option>
      <option>Nice option</option>
      <option>Cheap option</option>
    </select>
    <select class="stack">
      <option>Select an option</option>
      <option>Good option</option>
      <option>Nice option</option>
      <option>Cheap option</option>
    </select>
    <select class="stack">
      <option>Select an option</option>
      <option>Good option</option>
      <option>Nice option</option>
      <option>Cheap option</option>
    </select>
  </div>
  <div>
    <textarea class="stack" placeholder="Textarea"></textarea>
    <textarea class="stack" placeholder="Textarea"></textarea>
    <textarea class="stack" placeholder="Textarea"></textarea>
  </div>
  <div>
    <label class="dropimage stack">
      <input name="filea" title="Drop image or click me" type="file">
    </label>
    <label class="dropimage stack">
      <input name="filea" title="Drop image or click me" type="file">
    </label>
    <label class="dropimage stack">
      <input name="filea" title="Drop image or click me" type="file">
    </label>
  </div>
</div>