SUPER ULTRA FABULOUS

index.html

<div id="top" class="page" role="document">
    <header role="banner">
        <h1>HTML5 Test Page</h1>
        <p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
    </header>

    <nav role="navigation">
        <ul>
            <li>
                <a href="#text">Text</a>
                <ul>
                    <li><a href="#text__headings">Headings</a></li>
                    <li><a href="#text__paragraphs">Paragraphs</a></li>
                    <li><a href="#text__blockquotes">Blockquotes</a></li>
                    <li><a href="#text__lists">Lists</a></li>
                    <li><a href="#text__hr">Horizontal rules</a></li>
                    <li><a href="#text__tables">Tabular data</a></li>
                    <li><a href="#text__syntax">Syntax</a></li>
                    <li><a href="#text__inline">Inline elements</a></li>
                </ul>
            </li>
            <li>
                <a href="#embedded">Embedded content</a>
                <ul>
                    <li><a href="#embedded__images">Images</a></li>
                    <li><a href="#embedded__audio">Audio</a></li>
                    <li><a href="#embedded__video">Video</a></li>
                    <li><a href="#embedded__canvas">Canvas</a></li>
                    <li><a href="#embedded__progress">Progress bars</a></li>
                    <li><a href="#embedded__svg">Inline SVG</a></li>
                    <li><a href="#embedded__iframes">IFrames</a></li>
                </ul>
            </li>
            <li>
                <a href="#forms">Form elements</a>
                <ul>
                    <li><a href="#forms__text">Text fields</a></li>
                    <li><a href="#forms__select">Select menus</a></li>
                    <li><a href="#forms__checkbox">Checkboxes</a></li>
                    <li><a href="#forms__radio">Radio buttons</a></li>
                    <li><a href="#forms__html5">HTML5 inputs</a></li>
                    <li><a href="#forms__action">Action buttons</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <main role="main">
        <section id="text">
            <header><h1>Text</h1></header>

            <article id="text__headings">
                <header>
                    <h1>Headings</h1>
                </header>

                <div>
                    <h1>Heading 1</h1>
                    <h2>Heading 2</h2>
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <h5>Heading 5</h5>
                    <h6>Heading 6</h6>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__paragraphs">
                <header><h1>Paragraphs</h1></header>

                <div>
                    <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__blockquotes">
                <header><h1>Blockquotes</h1></header>

                <div>
                    <blockquote>
                        <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
                        <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
                        <cite><a href="#">Said no one, ever.</a></cite>
                    </blockquote>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__lists">
                <header><h1>Lists</h1></header>

                <div>
                    <h3>Definition list</h3>
                    <dl>
                        <dt>Definition List Title</dt>
                        <dd>This is a definition list division.</dd>
                    </dl>

                    <h3>Ordered List</h3>
                    <ol>
                        <li>List Item 1</li>
                        <li>List Item 2</li>
                        <li>List Item 3</li>
                    </ol>

                    <h3>Unordered List</h3>
                    <ul>
                        <li>List Item 1</li>
                        <li>List Item 2</li>
                        <li>List Item 3</li>
                    </ul>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__hr">
                <header><h1>Horizontal rules</h1></header>

                <div>
                    <hr>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__tables">
                <header><h1>Tabular data</h1></header>

                <table>
                    <caption>Table Caption</caption>
                    <thead>
                        <tr>
                            <th>Table Heading 1</th>
                            <th>Table Heading 2</th>
                            <th>Table Heading 3</th>
                            <th>Table Heading 4</th>
                            <th>Table Heading 5</th>
                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th>Table Footer 1</th>
                            <th>Table Footer 2</th>
                            <th>Table Footer 3</th>
                            <th>Table Footer 4</th>
                            <th>Table Footer 5</th>
                        </tr>
                    </tfoot>

                    <tbody>
                        <tr>
                            <td>Table Cell 1</td>
                            <td>Table Cell 2</td>
                            <td>Table Cell 3</td>
                            <td>Table Cell 4</td>
                            <td>Table Cell 5</td>
                        </tr>
                        <tr>
                            <td>Table Cell 1</td>
                            <td>Table Cell 2</td>
                            <td>Table Cell 3</td>
                            <td>Table Cell 4</td>
                            <td>Table Cell 5</td>
                        </tr>
                        <tr>
                            <td>Table Cell 1</td>
                            <td>Table Cell 2</td>
                            <td>Table Cell 3</td>
                            <td>Table Cell 4</td>
                            <td>Table Cell 5</td>
                        </tr>
                        <tr>
                            <td>Table Cell 1</td>
                            <td>Table Cell 2</td>
                            <td>Table Cell 3</td>
                            <td>Table Cell 4</td>
                            <td>Table Cell 5</td>
                        </tr>
                    </tbody>
                </table>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__syntax">
                <header><h1>Syntax</h1></header>

                <div>
                    <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
                    <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
                    <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>

                    <h2>Pre-formatted text</h2>

                    <pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="text__inline">
                <header><h1>Inline elements</h1></header>

                <div>
                    <p><a href="#">This is a text link</a>.</p>

                    <p><strong>Strong is used to indicate strong importance.</strong></p>

                    <p><em>This text has added emphasis.</em></p>

                    <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>

                    <p>The <i>i element</i> is text that is offset from the normal text.</p>

                    <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>

                    <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>

                    <p><s>This text has a strikethrough</s>.</p>

                    <p>Superscript<sup>®</sup>.</p>

                    <p>Subscript for things like H<sub>2</sub>O.</p>

                    <p><small>This small text is small for for fine print, etc.</small></p>

                    <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

                    <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>

                    <p><cite>This is a citation.</cite>

                    </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

                    <p>The <mark>mark element</mark> indicates a highlight.</p>

                    <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>

                    <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
                </div>

                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>
        </section>

        <section id="embedded">
            <header><h1>Embedded content</h1></header>

            <article id="embedded__images">
                <header><h2>Images</h2></header>
                <div>
                    <h3>No <code>&lt;figure&gt;</code> element</h3>
                    <p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
                    <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
                    <figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
                    <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
                    <figure>
                        <img src="http://placekitten.com/360/360" alt="Image alt text">
                        <figcaption>Here is a caption for this image.</figcaption>
                    </figure>
                </div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__audio">
                <header><h2>Audio</h2></header>
                <div><audio controls="">audio</audio></div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__video">
                <header><h2>Video</h2></header>
                <div><video controls="">video</video></div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__canvas">
                <header><h2>Canvas</h2></header>
                <div><canvas>canvas</canvas></div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__progress">
                <header><h2>Progress bars</h2></header>
                <div><progress>progress</progress></div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__svg">
                <header><h2>Inline SVG</h2></header>
                <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>

            <article id="embedded__iframes">
                <header><h2>IFrames</h2></header>
                <!--<div><iframe src="http://www.google.com" width="100%" height="300" frameborder="0"></iframe></div>-->(iframe disabled)
                <footer><p><a href="#top">[Top]</a></p></footer>
            </article>
        </section>

        <section id="forms">
            <header><h1>Form elements</h1></header>

            <form action="">
                <fieldset id="forms__text">
                    <legend>Text fields</legend>

                    <p>
                        <label for="text">Text Input <abbr title="Required">*</abbr></label>
                        <input id="text" type="text" placeholder="Text Input">
                    </p>
                    <p>
                        <label for="password">Password</label>
                        <input id="password" type="password" placeholder="Type your Password">
                    </p>
                    <p>
                        <label for="webaddress">Web Address</label>
                        <input id="webaddress" type="url" placeholder="http://yoursite.com">
                    </p>
                    <p>
                        <label for="emailaddress">Email Address</label>
                        <input id="emailaddress" type="email" placeholder="name@email.com">
                    </p>
                    <p>
                        <label for="search">Search</label>
                        <input id="search" type="search" placeholder="Enter Search Term">
                    </p>
                    <p>
                        <label for="text">Number Input <abbr title="Required">*</abbr></label>
                        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
                    </p>
                    <p>
                        <label for="textarea">Textarea</label>
                        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
                    </p>
                    <p>
                        <label class="error">Error</label>
                        <input class="is-error" type="text" placeholder="Text Input">
                    </p>
                    <p>
                        <label class="valid">Valid</label>
                        <input class="is-valid" type="text" placeholder="Text Input">
                    </p>
                </fieldset>

                <p><a href="#top">[Top]</a></p>

                <fieldset id="forms__select">
                    <legend>Select menus</legend>

                    <p>
                        <label for="select">Select</label>
                        <select id="select">
                            <optgroup label="Option Group">
                                <option>Option One</option>
                                <option>Option Two</option>
                                <option>Option Three</option>
                            </optgroup>
                        </select>
                    </p>
                </fieldset>

                <p><a href="#top">[Top]</a></p>

                <fieldset id="forms__checkbox">
                    <legend>Checkboxes</legend>

                    <ul class="list list--bare">
                        <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
                        <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
                        <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
                    </ul>
                </fieldset>

                <p><a href="#top">[Top]</a></p>

                <fieldset id="forms__radio">
                    <legend>Radio buttons</legend>

                    <ul class="list list--bare">
                        <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
                        <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
                        <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
                    </ul>
                </fieldset>

                <p><a href="#top">[Top]</a></p>

                <fieldset id="forms__html5">
                    <legend>HTML5 inputs</legend>

                    <p>
                        <label for="ic">Color input</label>
                        <input type="color" id="ic" value="#f25633">
                    </p>
                    <p>
                        <label for="in">Number input</label>
                        <input type="number" id="in" min="0" max="10" value="5">
                    </p>
                    <p>
                        <label for="ir">Range input</label>
                        <input type="range" id="ir" value="10">
                    </p>
                    <p>
                        <label for="idd">Date input</label>
                        <input type="date" id="idd" value="1970-01-01">
                    </p>
                    <p>
                        <label for="idm">Month input</label>
                        <input type="month" id="idm" value="1970-01">
                    </p>
                    <p>
                        <label for="idw">Week input</label>
                        <input type="week" id="idw" value="1970-W01">
                    </p>
                    <p>
                        <label for="idt">Datetime input</label>
                        <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
                    </p>
                    <p>
                        <label for="idtl">Datetime-local input</label>
                        <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
                    </p>
                </fieldset>

                <p><a href="#top">[Top]</a></p>

                <fieldset id="forms__action">
                    <legend>Action buttons</legend>

                    <p>
                        <input type="submit" value="Input">
                        <button type="submit">Button</button>
                        <input type="reset" value="Reset">
                        <input type="submit" value="Disabled" disabled>
                    </p>
                </fieldset>

                <p><a href="#top">[Top]</a></p>
            </form>
        </section>
    </main>

    <footer role="contentinfo">
        <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
    </footer>
</div>

index.markdown

fill this up.

it will hold your words. you will not find many better.

<label class="column ratio-6-12">
	<input type="text" placeholder="First Name"></input>
</label>
<label class="column ratio-6-12">
	<input type="text" placeholder="Last Name"></input>
</label>
<label class="column ratio-8-12">
	<input type="text" placeholder="Street Address"></input>
</label>
<label class="column ratio-4-12">
	<input type="text" placeholder="Number"></input>
</label>
<label class="column ratio-2-12">
	<input type="text" placeholder="Age"></input>
</label>
<label class="column ratio-10-12">
	<input type="text" placeholder="Interests"></input>
</label>

QwxoJJ.markdown

QwxoJJ

A Pen by Max Rubenacker on CodePen.

License.

style.less

//////////////////////////////////
//  everywhere                  //
//////////////////////////////////

@media all {
  /* base */
  * {
    box-sizing: border-box;
    vertical-align: baseline;
    &:before,
    &:after {
      box-sizing: inherit;
    }
  }
  html {
    font-size: @font-base-size;
    -webkit-font-smoothing: antialiased;
    ::selection {
      background-color: @color-selection;
      color: @color-selection-alt;
      opacity: 1;
    } 
  }
  body {
    background-color: @color-void-paper;
    color: @color-void-ink;
    font-family: @font-body;
    font-weight: @font-base-weight;
    line-height: @font-base-height;
    padding: @print-margin;
    margin: 0;
  }
  /* layout */
  section {}
  article {}
  main {}
  aside {}
  header {
    display: block;
    width: 100%;
  }
  footer {}
  /* print page */
  .page {
    height: @print-height;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    position: relative;
    width: @print-width;
    min-width: @print-width;
  }
  .spread {}
  /* typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: @font-heading;
    font-weight: inherit;
    line-height: 1.2;
    margin: 1.414rem 0 0.5rem;
    padding: 0;
  }
  h1 {
    break-after: always;
    font-size: 3.998rem;
    margin-top: 0;
    font-weight: 300;
  }
  h2 {
    font-size: 2.827rem;
    font-weight: 900;
  }
  h3 {
    font-size: 1.999rem;
    font-weight: 600;
  }
  h4 {
    font-size: 1.414rem;
    font-weight: 400;
  }
  h5 {
    font-size: 1.266rem;
    font-weight: 700;
  }
  h6 {
    font-size: 1.125rem; 
    font-weight: 900;
  }
  p {
    font-family: @font-body;
    hyphenate-character: '\2010';
    hyphens: auto;
    line-height: @font-base-height;
    margin-bottom: @font-base-height+0rem;
    word-break: break-all;
    word-break: break-word;
  }
  blockquote {
		border-left: 1rem solid @color-ink-alt;
		font-family: @serif;
    font-style: italic;
    margin: @font-base-height+0rem 0;
    padding: 0 1rem;
		p:first-of-type:before {
			color: @color-ink-alt;
      content: '\201c';
      display: inline-block;
      font-size: 2rem;
      line-height: 1;
      margin: 0;
      width: 1.5rem;
    }
  }
  cite {
    display: block;
    text-align: right;
    &:before {
      content: '\2015';
    }
  }
  /* inline */
  small {
    font-size: 0.707rem;
  }
  b, strong {
    font-weight: 700;
  }
  em, i, var {
    font-style: italic;
  }
  sub, sup {
    font-size: 0.8rem;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25rem;
  }
  sup {
    top: -0.35rem;
  }
  del, s {
    text-decoration: line-through;
  }
  ins, u {
    text-decoration: underline;
  }
  q {
    &:before {
      content: '\201c';
    }
    &:after {
      content: '\201d';
    }
  }
  /* syntax */
  code, kbd, pre, samp {
    font-family: @mono;
  }
  kbd:before {
    content: '>';
    display: inline-block;
    font-style: normal;
    margin-left: -1rem;
    width: 1rem;
  }
  pre {
    white-space: pre;
  }
  mark {
    background-color: @color-complement;
  }
  /* links */
  a {
    color: @color-primary;
    outline: none;
    text-decoration: underline;
    &:active {
      color: @color-selected;
    }
    &:focus {
      color: @color-selected;
    }
    &:hover {
      color: @color-analog;
    }
    &:visited {
      color: @color-primary;
    }
  }
  /* images */
  img {
    width: 100%;
  }
  figure {
    padding: 1rem;
    img {
      border: 0.2rem solid @color-ink;
    }
    figcaption {
      color: @color-ink;
      padding: 0 0.5rem 0.5rem 0.5rem;
    }
  }
  /* lists */
  ul, ol {
    font-size: 1rem;
		margin-bottom: @font-base-height+0rem;
		padding-left: 2rem;
  }
  ul {
    list-style-type: disc;
    ul {
      list-style-type: circle;
			margin-bottom: 0;
    }
  }
  ol {
    list-style-type: decimal;
		ol {
			list-style-type: lower-latin;
			margin-bottom: 0;
		}
  }
  dl {
    dt {
      font-size: 1.414rem;
    }
    dd {
      font-size: 1rem;
    }
  }
  /* forms */
  form {}
  fieldset {
    //background-color: @color-accent;
    background-image: @color-accent;
    border: 0.2rem solid;
    margin: 1rem;
    padding: 1rem;
    li {
      line-height: 2rem;

    }
  }
  legend {
    background-color: @color-ink;
    color: @color-paper;
    font-family: @font-heading;
    padding: 0 0.5rem;
    font-weight: 700;
  }
  label {
    //background: silver;
    //vertical-align: baseline;
    font-weight: 700;
    display: block;
  }
  input,
  textarea,
  button,
  select,
  input[type=checkbox],
  input[type=radio],
  input[type=range]
  {
    border: 0;
    border-radius: 0;
    font-family: @font-body;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    &:focus {
      outline: none;//0.2rem solid @color-selection;
    }
  }
  input[type=text],
  input[type=search],
  input[type=password],
  input[type=email],
  input[type=url],
  input[type=date],
  input[type=number],
  input[type=month],
  input[type=week],
  input[type=datetime],
  input[type=datetime-local],
  textarea,
  select {
    padding: 0.5rem;
    background-color: @color-page;
    border: 0.2rem solid @color-ink;
    width: 100%;
  }
  textarea {
    overflow: auto;
    resize: none;
  }
  /* buttons */
  button,
  input[type=submit],
  input[type=reset],
  {
    cursor: pointer;
    background-color: @color-selected; 
    color: @color-accent;
		font-weight: 700;
    padding: 0.7rem;
    &:disabled {
      background-color: @color-ink-alt;
			color: @color-page;
			cursor: auto;
    }
  }

  input[type=checkbox],
  input[type=radio] {
    background-color: @color-page;
    border: 0.2rem solid @color-text;
    display: inline-block;
    height: 1rem;
    margin: 0;
    width: 1rem;
    &:checked {
      background-color: @color-selected;
    }
  }
  input[type=radio] {
    border-radius: 1rem;
  }
  input[type=color] {
    border: 0; 
    height: 2rem;
    width: 4rem;
    margin: 0;
  }
  input[type=range] {
    &::-webkit-slider-runnable-track {
      background: @color-text;
      border: 0.2rem solid @color-text;
      box-shadow: @shadow-inset;
      border-radius: 1rem;
      cursor: pointer;
    }
    &::-webkit-slider-thumb {
      background: @color-selected;
      border-radius: 1rem;
      cursor: pointer;
      height: 1rem;
      margin: 0;
      width: 1rem;
      -webkit-appearance: none;
    }
  }
  /* tables */
  caption {
    background-color: @color-text;
    color: @color-page;
    font-family: @font-heading;
    font-weight: 700;
    line-height: 2;
    text-align: center;
  }
  /* horizontal rule */
  hr {
    border: 0;
    background-color: @color-text;
    height: 0.2rem;
  }
  /* video */
  video {
    width: 100%;
  }
  /* iframes */
  iframe {
    width: 100%;
  }
  /* progress bars */
  progress {
    appearance: none;
    background-color: cyan;
    border: 0.2rem solid @color-text;
    height: 1rem;
    -webkit-appearance: none;
    &::-webkit-progress-bar {
      background-color: @color-complement;
    }
  }
  progress[value] {
    -webkit-appearance: none;
    &::-webkit-progress-bar {
      background-color: magenta;
    }
  }
  @keyframes progressing {
    0% {
      opacity: 1; 
    }
    50% {
      opacity: 0;   
    } 
    100% {
      opacity: 1; 
    }     
  }
  // unfinished:
  // /* audio       */
  // /* canvas      */
  // /* progress    */
  // /* inline svg  */
  // &:nth-of-type(3n+2) { }
}

///////////////////////////////////////
// utility classes                   //
///////////////////////////////////////

.align-center {
  text-align: center;
}

.align-justify {
  text-align: justify;
}

.align-right {
  text-align: right;
}

.bare {
  border: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.centered {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.is-error {}
.is-valid {}


///////////////////////////////////////
// column system                     //
///////////////////////////////////////

// usage:
// add "columns" to parent element
// and "column" plus "ratio-X-Y" to children

@maxColumns: 12;// column resolution

.column {
  float: left;
  &s {// parent container
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  #columns (@maxColumns);
}
#columns (@i) when (@i > 0) {
  &.ratio-@{i}-@{maxColumns} { 
    width: round( percentage( ( @i/@maxColumns ) ), 7 );
    box-sizing: border-box;
//    single column breakpoint
//    @media (max-width: 32rem) {
//      width: 100%;
//    }
  }
  #columns (@i - 1);// recursion iteration
}
#columns (0) {}// recursion end




///////////////////////////////////////
//                                   //
// only for screens                  //
//                                   //
///////////////////////////////////////

@media screen {
  body {
    padding-top: @spread-spacing;
    -webkit-font-smoothing: anti-aliased;
  }
  .book {
    align-content: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: @spread-width;
    margin: 0 auto;
    justify-content: space-around;
  }
  .page {
    box-shadow:
      inset 0 0 0 @print-bleed @color-ui-guides,
      inset 0 0 3rem @print-bleed @color-ui-page,
      0 0.4rem 0.8rem 0 @color-ui-drop;
    //margin-bottom: @spread-spacing;
		padding: @print-margin;
  }
  img {
    opacity: 0.8;
  }
  a.alert {
    display: block;
    position: fixed;
    top: 10%;
    left: 0;
    background-color: @color-ink;
    padding: @print-bleed;
    color: @color-paper;
    text-decoration: none;
    font-family: @font-heading;
    transform: translateY(-50%);
    z-index: 999;
  }
  .black {
    background-color: @color-ink-preview;
  }
  .white {
    color: @color-paper-preview;
  }
  .cover {
//    margin-right: 1px; old spacing 
		padding: @print-bleed*4;
		margin: 0 auto;
		h1 {
			break-after: always;
			font-family: @font-cover;
			font-size: 8rem;
			word-break: break-all;
			font-weight: 100;
			text-transform: uppercase;
			line-height: 0.7;
			height: 100%;
			width: 100%;
		}
  }  
  .noscreen {
    display: none;
  }
}




///////////////////////////////////////
// main theme                        //
///////////////////////////////////////

/*
body,
button,
input,
select,
textarea {
  background-color: @1;
  color: @mox-light;
  font-family: @serif;
  font-size: 1rem;
  line-height: 1.5;
}
body {
  margin: 0 auto;
  max-width: 32em;
  padding: 0 2em;
}

a, a:visited {
  background-color: @sodium-vapor;
  color: @gatehouse;
}
a:hover {
  background-color: @vox-orange;
}
a:active, a:focus {
  background-color: @vox-yellow;
}

.cover 

img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
*/




///////////////////////////////////////
//                                   //
// only for print                    //
//                                   //
///////////////////////////////////////

@media print {
  .book {
    display: block;
  }
  .page {
    box-shadow: none;
    page-break-after: always;
  }
  .black {
    background-color: @color-ink;
  }
  .white {
    color: @color-paper;
  }
  .noprint {
    display: none;
  }
}

@page {
  background-color: @color-paper;
  color: @color-ink;
  padding: @print-margin;
  size: @print-width+@print-bleed @print-height+@print-bleed;
}

/********************************/
/*                              */
/*              **              */
/*                              */
/********************************/




//////////////////////////////////
//                              //
//          variables           //
//                              //
//////////////////////////////////

///////////////////////////////////////
// print variables                   //
///////////////////////////////////////

@print-width: 5in;// square 3.75in; // or 12.25in;
@print-height: 5in;// square 3.75in; // or 9.25in;
@print-bleed: 0.125in;
@print-margin: 1in;

@spread-width: (@print-width*2);
@spread-spacing: 10vh;

///////////////////////////////////////
// type variables                    //
///////////////////////////////////////


@font-base-size: 100%;
@font-base-weight: 400;
@font-base-height: 1.45;


@font-body: @serif;
@font-copy: @serif;
@font-cover: @sans;
@font-heading: @sans;
@font-code: @mono;

@import url(http://i.icomoon.io/public/188ac2dd2d/VOX/style.css); // link expires 24 hours after creation
//@import url(https://rawgit.com/shuuki/vox/master/dist/css/vox.min.css);

@import url(http://fonts.googleapis.com/css?family=Raleway:800,100);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

@sans:
//  'M+ 1c',
//  'Raleway',
//  'Montserrat',
  'Open Sans',
  sans-serif;

@import url(http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400,900,300italic,300,700,700italic,900italic);

@serif:
//  'DejaVu Serif',
//  'PT Serif',
  'Merriweather',
//  'Palatino',
  serif;

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,300,400,500,600,700,900);

@mono:
  'DejaVu Sans Mono',
  'Source Code Pro',
  monospace;




///////////////////////////////////////
// color variables                   //
///////////////////////////////////////


//  colors  //
@color-ink: black;
@color-ink-alt: silver;
@color-paper: white;

@color-void-paper: @e;
@color-void-ink: @2;

@color-ink-preview: lighten(@color-ink,10%);
@color-paper-preview: darken(@color-paper,10%);
@color-ui-guides: rgba(0,255,255,0.05);
@color-ui-page: rgba(0,0,0,0.1);
@color-ui-drop: rgba(0,0,0,0.3);


@color-page: @f;

@color-text: @gatehouse;

@color-accent: @almost-white;
@color-selected: @color-analog;

@color-primary: @vox-blue;
@color-complement: @vox-orange;
@color-analog: @vox-green;

@color-selection: @vox-yellow;
@color-selection-alt: @gatehouse;


@shadow-inset: none;





///////////////////////////////////////
// gatehouse                         //
///////////////////////////////////////

// moxruin sequence //
@gatehouse: #141414;
@almost-white: #f8f5ec;
@mox-light: #ddd8c7;
@mox-midtone: #846f5a;
@dead-channel: #231f20;
@the-sea: #37b0bb;
@mr-orange: #f25633;
@twilight: #2b7acf;
@dead-violet: #282634;
@mid-violet: #4a475d;
@high-violet: #676097;
@sodium-vapor: #e57d00;
// vox sequence //
@vox-red: #f6394f;
@vox-orange: #ff813b;
@vox-yellow: #f1d808;
@vox-green: #00b164;
@vox-blue: #0e789d;
@vox-indigo: #662f73;
@vox-violet: #ba3d75;
@vox-purple: #ba3d75;
// console sequence //
@console-cyan-color: #2df9f6;
@console-cyan-bg: #122029;
@console-green-color: #14fdce;
@console-green-bg: #031e11;
// grayscale sequence //
@f: #fff; @e: #eee; @d: #ddd; @c: #ccc;
@b: #bbb; @a: #aaa; @9: #999; @8: #888;
@7: #777; @6: #666; @5: #555; @4: #444;
@3: #333; @2: #222; @1: #111; @0: #000;

///////////////////////////////////////

SUPER-ULTRA-FABULOUS.markdown

SUPER ULTRA FABULOUS

A Pen by Max Rubenacker on CodePen.

License.