Interstacks Style Guide

We've worked to distill the interface into a set of atomic pieces, forming the library you see here. By documenting and assembling a common lexicon of code and UI elements, we can:

  • Document your styleguide in a online context that’s more appropriate and useful for interactive projects.
  • Build products using code that’s modular, consistent, and reusable.

Layout

Grid

  • @include column(12);
     
  • @include column(6);
    @include last-col2;
  • @include column(6);
    @include last-col2;
  • @include column(4);
    @include last-col3;
  • @include column(4);
    @include last-col3;
  • @include column(4);
    @include last-col3;
  • @include column(3);
    @include last-col4;
  • @include column(3);
    @include last-col4;
  • @include column(3);
    @include last-col4;
  • @include column(3);
    @include last-col4;
  • @include column(2);
    @include last-col6;
  • @include column(2);
    @include last-col6;
  • @include column(2);
    @include last-col6;
  • @include column(2);
    @include last-col6;
  • @include column(2);
    @include last-col6;
  • @include column(2);
    @include last-col6;
<ul id="col1">
    <li>@include column(12); <br> </li>
</ul>
<ul id="col2">
    <li>@include column(6); <br>
        @include last-col2;
    </li>
    <li>@include column(6); <br>
        @include last-col2;
    </li>
</ul>
<ul id="col3">
    <li>@include column(4); <br>
        @include last-col3;
    </li>
    <li>@include column(4); <br>
        @include last-col3;
    </li>
    <li>@include column(4); <br>
        @include last-col3;
    </li>
</ul>
<ul id="col4">
    <li>@include column(3); <br>
        @include last-col4;
    </li>
    <li>@include column(3); <br>
        @include last-col4;
    </li>
    <li>@include column(3); <br>
        @include last-col4;
    </li>
    <li>@include column(3); <br>
        @include last-col4;
    </li>
</ul>
<ul id="col6">
    <li>@include column(2); <br>
        @include last-col6;
    </li>
    <li>@include column(2); <br>
        @include last-col6;
    </li>
    <li>@include column(2); <br>
        @include last-col6;
    </li>
    <li>@include column(2); <br>
        @include last-col6;
    </li>
    <li>@include column(2); <br>
        @include last-col6;
    </li>
    <li>@include column(2); <br>
        @include last-col6;
    </li>
</ul>

The site uses a responsive 12-column grid system that's semantic and infinitely nestable. You apply the grid through Sass, using the mixins shown below.

  1. Define how many columns out of 12 the element should take up. For example, if want an element to be 50% of the possible width, use @include column(6).
  2. If the element is the last item in the 12-column grid, add @include last. Or, you've defined multiple items to have to same width, add @include last-colX where X is the final column. (This feature lets you start using the grid's columns without creating unsemantic wrapper div's.)
  3. For example, you'd make three-column layout by using @include column(4) (each column will take up 4 of the 12, or one-third of the grid) and @include last-col3 (defines column #3 as the last one in the grid).

Since the grid is defined through Sass mixins, you can easily change the columns across different responsive breakpoints without adding confusing or unsemantic classes to your HTML. For more documentation, see github.com/elefontpress/rwd-grid-example.

Container

max-width: 75rem (or 1200px, as 1rem=16px)
<div class="container">
    max-width: 75rem (or 1200px, as 1rem=16px)
</div>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Graphic Elements

Color Palette

  • hex: #FF0000
    sass: $red
  • hex: #FFA500
    sass: $orange
  • hex: #FF0
    sass: $yellow
  • hex: #008000
    sass: $green
  • hex: #262C33
    sass: $black
  • hex: #23323A
    sass: $gray
  • sass: $gray-light-1
  • sass: $gray-light-2
  • sass: $gray-light-3
  • sass: $gray-light-4
  • sass: $gray-light-5
  • sass: $gray-light-6
  • sass: $gray-light-7
  • sass: $gray-light-8
  • sass: $gray-light-9
  • sass: $gray-light-95
  • hex: #fff
    sass: $white
<ul>
    <li id="swatch-red">
        hex: #FF0000 <br>
        sass: $red
    </li>
    <li id="swatch-orange">
        hex: #FFA500 <br>
        sass: $orange
    </li>
    <li id="swatch-yellow">
        hex: #FF0 <br>
        sass: $yellow
    </li>
    <li id="swatch-green">
        hex: #008000 <br>
        sass: $green
    </li>
    <li id="swatch-black">
        hex: #262C33 <br>
        sass: $black
    </li>
    <li id="swatch-gray">
        hex: #23323A <br>
        sass: $gray
    </li>
    <li id="swatch-gray-light-1">
        sass: $gray-light-1
    </li>
    <li id="swatch-gray-light-2">
        sass: $gray-light-2
    </li>
    <li id="swatch-gray-light-3">
        sass: $gray-light-3
    </li>
    <li id="swatch-gray-light-4">
        sass: $gray-light-4
    </li>
    <li id="swatch-gray-light-5">
        sass: $gray-light-5
    </li>
    <li id="swatch-gray-light-6">
        sass: $gray-light-6
    </li>
    <li id="swatch-gray-light-7">
        sass: $gray-light-7
    </li>
    <li id="swatch-gray-light-8">
        sass: $gray-light-8
    </li>
    <li id="swatch-gray-light-9">
        sass: $gray-light-9
    </li>
    <li id="swatch-gray-light-95">
        sass: $gray-light-95
    </li>
    <li id="swatch-white">
        hex: #fff <br>
        sass: $white
    </li>
</ul>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Icons

Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo
<img src="assets/img/audio.svg" alt="Logo" />
<img src="assets/img/barcode.svg" alt="Logo" />
<img src="assets/img/base.svg" alt="Logo" />
<img src="assets/img/display.svg" alt="Logo" />
<img src="assets/img/insteon.svg" alt="Logo" />
<img src="assets/img/io.svg" alt="Logo" />
<img src="assets/img/motors.svg" alt="Logo" />
<img src="assets/img/remote.svg" alt="Logo" />
<img src="assets/img/serial.svg" alt="Logo" />
<img src="assets/img/servos.svg" alt="Logo" />
<img src="assets/img/usb.svg" alt="Logo" />
<img src="assets/img/wifi.svg" alt="Logo" />

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Typography

Fonts

Display font: 'freight-display-pro', Georgia, 'Times New Roman', serif;



Primary font: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;

Primary font italic: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;

Primary font bold: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;

Primary font bold italic: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;



Condensed font: 'franklin-gothic-urw-cond', Helvetica, Arial, sans-serif;

Condensed font bold: 'franklin-gothic-urw-cond', Helvetica, Arial, sans-serif;

<p class="display">Display font: 'freight-display-pro', Georgia, 'Times New Roman', serif;</p>
<br><br>
<p>Primary font: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;</p>
<p><em>Primary font italic: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;</em></p>
<p><strong>Primary font bold: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;</strong></p>
<p><strong><em>Primary font bold italic: 'franklin-gothic-urw', Helvetica, Arial, sans-serif;</em></strong></p>
<br><br>
<p class="condensed">Condensed font: 'franklin-gothic-urw-cond', Helvetica, Arial, sans-serif;</p>
<p class="condensed-bold">Condensed font bold: 'franklin-gothic-urw-cond', Helvetica, Arial, sans-serif;</p>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

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

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa. Explicabo nulla ea eligendi, temporibus modi dignissimos, fuga laborum cum repellendus ut aut deserunt. Rerum earum vitae libero quos dolorum porro optio magnam omnis rem minus voluptatem tenetur obcaecati id fuga asperiores, at repellendus!

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa. Explicabo nulla ea eligendi, temporibus modi dignissimos, fuga laborum cum repellendus ut aut deserunt. Rerum earum vitae libero quos dolorum porro optio magnam omnis rem minus voluptatem tenetur obcaecati id fuga asperiores, at repellendus!</p>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Unordered List

  • Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?
  • Laudantium nam doloribus nihil saepe officia qui fugit hic earum ipsum ut!
  • Voluptates explicabo, recusandae blanditiis accusantium quis veritatis deleniti velit earum ratione cum.
  • Ipsa sit esse minus placeat sequi et doloribus libero eos tempora aspernatur!
  • Eum porro delectus dolorum neque explicabo laudantium voluptates, reprehenderit exercitationem ipsum voluptatibus.
<ul>
	<li>Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?</li>
	<li>Laudantium nam doloribus nihil saepe officia qui fugit hic earum ipsum ut!</li>
	<li>Voluptates explicabo, recusandae blanditiis accusantium quis veritatis deleniti velit earum ratione cum.</li>
	<li>Ipsa sit esse minus placeat sequi et doloribus libero eos tempora aspernatur!</li>
	<li>Eum porro delectus dolorum neque explicabo laudantium voluptates, reprehenderit exercitationem ipsum voluptatibus.</li>
</ul>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Ordered List

  1. Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?
  2. Laudantium nam doloribus nihil saepe officia qui fugit hic earum ipsum ut!
  3. Voluptates explicabo, recusandae blanditiis accusantium quis veritatis deleniti velit earum ratione cum.
  4. Ipsa sit esse minus placeat sequi et doloribus libero eos tempora aspernatur!
  5. Eum porro delectus dolorum neque explicabo laudantium voluptates, reprehenderit exercitationem ipsum voluptatibus.
<ol>
	<li>Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?</li>
	<li>Laudantium nam doloribus nihil saepe officia qui fugit hic earum ipsum ut!</li>
	<li>Voluptates explicabo, recusandae blanditiis accusantium quis veritatis deleniti velit earum ratione cum.</li>
	<li>Ipsa sit esse minus placeat sequi et doloribus libero eos tempora aspernatur!</li>
	<li>Eum porro delectus dolorum neque explicabo laudantium voluptates, reprehenderit exercitationem ipsum voluptatibus.</li>
</ol>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Logo List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.
<ul class="logo-list">
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In autem odit ipsa nobis assumenda ullam culpa.</li>
</ul>

Description of the blockquote.

Blockquote

Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?
<blockquote>
	Iste impedit repellat culpa. Ipsa sunt, nostrum! Libero assumenda dolores, sint autem?
</blockquote>

Description of the blockquote.

Inline Elements

Small

This text is small compared to regular text.

<p><small>This text is small</small> compared to regular text.</p>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Strong/Bold

Strong is used to indicate strong importance.

The b element is stylistically different text from normal text, looks the same as strong, but lacks the semantic importance associated with the strong tag.

<p><strong>Strong</strong> is used to indicate strong importance.</p>
<p>The <b>b element</b> is stylistically different text from normal text, looks the same as strong, but lacks the semantic importance associated with the strong tag.</p>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Emphasis/Italic

This em text has added emphasis.

The i element is stylistically different text from normal text, looks the same as em, but lacks the semantic emphasis associated with the em tag.

<p><em>This em text</em> has added emphasis.</p>
<p>The <i>i element</i> is stylistically different text from normal text, looks the same as em, but lacks the semantic emphasis associated with the em tag.</p>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Forms

Text Input

<input id="text" type="text" placeholder="Text Input">

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Textarea

<textarea id="textarea" placeholder="Enter your message here"></textarea>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Checkbox

<label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label>
<label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label>
<label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Radio Buttons

<label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label>
<label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label>
<label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Select

<select id="select">
	<optgroup label="Option Group">
		<option>Option One</option>
		<option>Option Two</option>
		<option>Option Three</option>
	</optgroup>
</select>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Buttons

Default Button

<button type="submit" value="Button">Button</button>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Submit Button

<input type="submit" value="Submit input styled like a button">

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Navigation

Social Media

<img src="assets/img/twitter.svg" alt="" />
<img src="assets/img/envelope.svg" alt="" />

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.

Interaction Elements

Animations

Animate Regular: Duration: 0.25s Easing: ease-in-out; Property: all (Hover to see effect)
<div class="demo-animate regular"><div class="demo-shape"></div><strong>Animate Regular:</strong> Duration: 0.25s Easing: ease-in-out; Property: all (Hover to see effect)</div>

Description of this particular pattern goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa perspiciatis, assumenda amet impedit nisi numquam, adipisci sunt, a cum ipsa laborum magni qui, nihil tempora expedita possimus quod maxime eum sit officia.