catan-client/app/scss/picnic/plugins/stack/documentation.md

Settlers of Catan Client Implementation

# Stack

A vertical group of different elements.

<div class="row">
  <div>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button icon-puzzle">Plugins</span>
    </label>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button icon-picture">Demo</span>
    </label>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button icon-help-circled">Test</span>
    </label>
  </div>
  <div>
    <img class="stack" src="/img/forest.jpg">
    <a class="button stack">Full size</a>
  </div>
  <div>
    <input class="stack" placeholder="Name" />
    <input class="stack" placeholder="Email" />
    <button class="stack icon-paper-plane">
        Send
    </button>
  </div>
</div>


## Installation

Include it by adding `+stack` to your current installation:

    http://www.picnicss.com/nut/picnic_3+stack.min.css




## Buttons

A vertical stack of buttons. You can use any type of button:

<div class="row">
  
  <!-- Color buttons -->
  <div>
    <a class="stack button">Normal</a>
    <a class="stack button success">Success</a>
    <a class="stack button warning">Warning</a>
  </div>
  
  <!-- Pseudo buttons -->
  <div>
    <a class="stack pseudo button">First</a>
    <a class="stack pseudo button">Second</a>
    <a class="stack pseudo button">Third</a>
  </div>

  <!-- Toggle buttons (choose one) -->
  <div>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button">Tab 1</span>
    </label>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button">Tab 2</span>
    </label>
    <label class="stack">
      <input class="toggle" type="radio" name="stack" />
      <span class="button">Tab 3</span>
    </label>
  </div>

  <!-- Toggle buttons (choose one) -->
  <div>
    <label class="stack">
      <input class="toggle" type="checkbox" name="stack" />
      <span class="button">Option 1</span>
    </label>
    <label class="stack">
      <input class="toggle" type="checkbox" name="stack" />
      <span class="button">Option 2</span>
    </label>
    <label class="stack">
      <input class="toggle" type="checkbox" name="stack" />
      <span class="button">Option 3</span>
    </label>
  </div>
</div>


    <!-- Color buttons -->
    <div>
      <a class="stack button">Normal</a>
      <a class="stack button success">Success</a>
      <a class="stack button warning">Warning</a>
    </div>
    
    <!-- Pseudo buttons -->
    <div>
      <a class="stack pseudo button">First</a>
      <a class="stack pseudo button">Second</a>
      <a class="stack pseudo button">Third</a>
    </div>

    <!-- Toggle buttons (choose one) -->
    <div>
      <label class="stack">
        <input class="toggle" type="radio" name="stack" />
        <span class="button">Tab 1</span>
      </label>
      <label class="stack">
        <input class="toggle" type="radio" name="stack" />
        <span class="button">Tab 2</span>
      </label>
      <label class="stack">
        <input class="toggle" type="radio" name="stack" />
        <span class="button">Tab 3</span>
      </label>
    </div>

    <!-- Toggle buttons (choose one) -->
    <div>
      <label class="stack">
        <input class="toggle" type="checkbox" name="stack" />
        <span class="button">Option 1</span>
      </label>
      <label class="stack">
        <input class="toggle" type="checkbox" name="stack" />
        <span class="button">Option 2</span>
      </label>
      <label class="stack">
        <input class="toggle" type="checkbox" name="stack" />
        <span class="button">Option 3</span>
      </label>
    </div>





## Forms

Create nice and packed forms. [jsfiddle](http://jsfiddle.net/ddmv3dsr/4/)

<div style="max-width: 250px; margin: 0 auto">
  <div>
      <input class="stack" placeholder="First name" />
      <input class="stack" placeholder="Last name" />
      <input class="stack" placeholder="Email" />
  </div><br><!-- aham -->

  <div>
      <input class="stack" placeholder="Password" />
      <input class="stack" placeholder="Repeat password" />
      <textarea class="stack" placeholder="Biography"></textarea>
      <button class="stack icon-paper-plane">
          Send
      </button>
  </div>
</div>


    <div>
        <input class="stack" placeholder="First name" />
        <input class="stack" placeholder="Last name" />
        <input class="stack" placeholder="Email" />
    </div><br><!-- aham -->
    
    <div>
        <input class="stack" placeholder="Password" />
        <input class="stack" placeholder="Repeat password" />
        <!-- Note: also using fontello -->
        <button class="stack icon-paper-plane">
            Send
        </button>
    </div>



## Gallery

Just set up your super simple  gallery with this and the grids

<div class="row">
  <div>
    <img class="stack" src="/img/forest.jpg">
    <a class="button stack">Add</a>
  </div>
  <div>
    <img class="stack" src="/img/halong.jpg">
    <a class="button stack">Add</a>
  </div>
  <div>
    <img class="stack" src="/img/lake.jpg">
    <a class="button stack error">Remove</a>
  </div>
</div>

    <div class="row">
      <div>
        <img class="stack" src="/img/forest.jpg">
        <a class="button stack">Add</a>
      </div>
      <div>
        <img class="stack" src="/img/halong.jpg">
        <a class="button stack">Add</a>
      </div>
      <div>
        <img class="stack" src="/img/lake.jpg">
        <a class="button stack error">Remove</a>
      </div>
    </div>


## Hack it