Our Build Process

When building out projects we take a modular approach. We start with a "guidelines" page featuring each of the elements of the site individually before we place content. Doing this allows us to see that everything is consistent in style and feels cohesive. New site elements can quickly be compared to the existing styles, allowing expansion of site functionality while maintaining the brand. Once this is complete, any developer can quickly access the elements from this page and expedite page construction with well managed and consistently designed code. The page also gives clients a page they can access to reference for any marketing goods, and be customized to be used as a full company style guide if needed.

Alerts

Notifier Bar Default ×

<div data-notifier="" class="notifier">
  <div class="notifier__content">
    Notifier Bar Default
    <a class="notifier__close" href=""> &times;</a>
  </div>
</div>

Notifier Bar Primary ×

<div data-notifier="" class="notifier notifier--primary">
  <div class='notifier__content'>
    Notifier Bar Primary
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Secondary ×

<div data-notifier="" class="notifier notifier--secondary">
  <div class='notifier__content'>
    Notifier Bar Secondary
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Function ×

<div data-notifier="" class="notifier notifier--function">
  <div class='notifier__content'>
    Notifier Bar Function
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Alert ×

<div data-notifier="" class="notifier notifier--alert">
  <div class='notifier__content'>
    Notifier Bar Alert
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Secure ×

<div data-notifier="" class="notifier notifier--secure">
  <div class='notifier__content'>
    Notifier Bar Secure
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Warning ×

<div data-notifier="" class="notifier notifier--warning">
  <div class='notifier__content'>
    Notifier Bar Warning
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Notifier Bar Success ×

<div data-notifier="" class="notifier notifier--success">
  <div class='notifier__content'>
    Notifier Bar Success
    <a class='notifier__close'>&times;</a>
  </div>
</div>

Buttons

<button class="button">Default Button</button>
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>
<button class="button button--function">Function Button</button>
<button class="button button--alert">Alert Button</button>
<button class="button button--success">Success Button</button>
<button class="button button--warning">Warning Button</button>
<button class="button button--secure">Secure Button</button>
<button class="button button--inverted">Inverted Button</button>
<button class="button button--subaccent">Subaccent Button</button>

<button class="button button--transparent">Default Button</button>
<button class="button button--primary button--transparent">Primary Button</button>
<button class="button button--secondary button--transparent">Secondary Button</button>
<button class="button button--function button--transparent">Function Button</button>
<button class="button button--alert button--transparent">Alert Button</button>
<button class="button button--success button--transparent">Success Button</button>
<button class="button button--warning button--transparent">Warning Button</button>
<button class="button button--secure button--transparent">Secure Button</button>
<button class="button button--inverted button--transparent">Inverted Button</button>
<button class="button button--subaccent button--transparent">Subaccent Button</button>

<button class="button">Default Button</button>
<button class="button button--primary">Primary Button</button>
<button class="button button--secondary">Secondary Button</button>
<button class="button button--function">Function Button</button>
<button class="button button--alert">Alert Button</button>
<button class="button button--success">Success Button</button>
<button class="button button--warning">Warning Button</button>
<button class="button button--secure">Secure Button</button>
<button class="button button--inverted">Inverted Button</button>
<button class="button button--subaccent">Subaccent Button</button>

<button class="button button--small">Small Button</button>
<button class="button button-medium">Default/Medium Button</button>
<button class="button button--large">Large Button</button>
<button class="button button--expand">Expand Button</button>

Blog Posts

How to Make Action Text Work with Rails 5.2

See Action Text in action for your Rails 5.2 applications

<a class="post" href="/blog/2018/11/30/how-to-make-actiontext-work-with-rails-5">
  <article>
    <div class="post__content">
      <header>
        <h1 class="post__title">How to Make Action Text Work with Rails 5.2</h1>
      </header>
      <section>
        <p class="p">See Action Text in action for your Rails 5.2 applications</p>
      </section>
      <footer class="post__footer">
        <img class="lazyload avatar space-right--medium" data-src="https://cdn.littlelines.com/assets/team/Matt-e7f5147f43f52be44289ea4a157b73bab47f28638fa3f65dfee95fa9f0f790bb.jpg" alt="Matt" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <div>
          <span class="post__author">By Matt Sears</span>
          <time datetime="2018-11-30T00:00:00+00:00">Nov 30, 2018</time>
        </div>
      </footer>
    </div>
  </article>
</a

How to Make Action Text Work with Rails 5.2

See Action Text in action for your Rails 5.2 applications

<div class="section section--without-padding">
  <a href="/blog/2018/11/30/how-to-make-actiontext-work-with-rails-5">
    <article class="post post--featured" style="background-image: url(https://cdn.littlelines.com/assets/blog/generic/thumbnail/action-text-f16977c161af6f5a8ab56534dff3451f9a6bbd76a4ab1f6d9ab7fd79bbc97bd8.png); background-color: #eb2240;"}>
      <div class="post__content post__content--featured">
        <header>
          <h1 class="post__title">How to Make Action Text Work with Rails 5.2</h1>
        </header>
        <section>
          <p class="p">See Action Text in action for your Rails 5.2 applications</p>
        </section>
        <footer class="post__footer">
          <img class="lazyload avatar float--left space-right--medium" data-src="https://cdn.littlelines.com/assets/team/Matt-e7f5147f43f52be44289ea4a157b73bab47f28638fa3f65dfee95fa9f0f790bb.jpg" alt="Matt" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
          <div>
            <span class="post__author">By Matt Sears</span>
            <time datetime="2018-11-30T00:00:00+00:00">Nov 30, 2018</time>
          </div>
        </footer>
      </div>
    </article>
</a></div>

Checkboxes

All Ideas (68)
Completed (25)
In Progress (35)
Planned (7)
Under Consideration (1)

<ul class='ul list list--unstyled'>
  <li class='list__item'>
    <label class='label'>All Ideas (68)</label>
    <input type='checkbox' class='checkbox' checked>
  </li>
  <li class='list__item'>
    <label class='label'>Completed (25)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>In Progress (35)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>Planned (7)</label>
    <input type='checkbox' class='checkbox'>
  </li>
  <li class='list__item'>
    <label class='label'>Under Consideration (1)</label>
    <input type='checkbox' class='checkbox' disabled>
  </li>
</ul>

Colors

black

grey

silver

white

red

green

blue

cerulean

sky

purple

yelow

orange

Named Colors

$color-primary

$color-secondary

$color-inverted

$color-function

$color-accent

$color-subaccent

$color-alert

$color-success

$color-warning

$color-secure

Featured Work

<section class="section">
  <div class="content content--without-padding">
    <div class="featured-work">
      <a class="featured-work__item featured-work__item--index" href="/work/pacificunion">
        <img class="lazyload featured-work__background-image" data-src="https://cdn.littlelines.com/assets/work/pacificunion-797c989616ed0af4e5c0aa850dfeead1146ba11bda4f036072b1fc5494de103f.jpg" alt="Pacificunion" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <div class="featured-work__content">
          <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 144 56.24" class="featured-work__image featured-work__image--pacificunion"><title>Pacific Union</title><path d="M53.73,33c2.58,0,4.11.83,4.11,3.6V49.37l-17-17.86h-7V33c2.15,0,3,.36,3.76,1.18l.42.43v15c0,3-.62,4.13-4.18,4.45v1.54H44.29V54.12c-2.1,0-4.19-.94-4.19-3.82V36.76l18.2,18.9H60V37.23C60,34,61.69,33,64.19,33V31.51H53.73Z"></path><path d="M133.48,33c2.4,0,4.1.83,4.1,3.6V49.37l-17-17.87h-7V33c2.15,0,3,.36,3.77,1.18l.42.43v15c0,3-.62,4.13-4.19,4.45v1.54H124V54.12c-2.1,0-4.19-.94-4.19-3.82V36.76L138,55.66h1.71V37.23c0-3.25,1.64-4.18,4.18-4.18V31.51H133.48Z"></path><path d="M54.93,1.58c4.32,0,6.88,2.53,8.82,6.07l1.09-.14L63.54,0h-.79a1.92,1.92,0,0,1-1.66,1.44c-1,0-2.85-1.44-6.53-1.44-7,0-11.93,6.2-11.93,12.65,0,7.5,5.26,12.64,12.22,12.64a11.16,11.16,0,0,0,10-5.33l-.94-.65a9.92,9.92,0,0,1-8.14,4c-5.19,0-8.73-4.5-8.73-10.75,0-5,2.42-11,7.9-11"></path><path d="M134.91,23.29c-5.19,0-8.72-4.5-8.72-10.75,0-5,2.41-11,7.9-11,4.32,0,6.88,2.53,8.83,6.07L144,7.5,142.7,0h-.8a1.9,1.9,0,0,1-1.65,1.44c-1,0-2.85-1.44-6.53-1.44-7,0-11.93,6.2-11.93,12.65,0,7.5,5.26,12.65,12.22,12.65A11.18,11.18,0,0,0,144,20l-.94-.65a9.9,9.9,0,0,1-8.14,4"></path><path d="M67.78,2.11C71.27,2.11,72,2.54,72,5V20.31c0,2.52-.76,2.88-4.26,2.88v1.53H80.11V23.19c-3.43,0-4.25-.36-4.25-2.88V5c0-2.45.82-2.89,4.25-2.89V.57H67.78Z"></path><path d="M120.18,23.19c-3.43,0-4.25-.36-4.25-2.88V5c0-2.46.83-2.89,4.25-2.89V.57H107.85V2.11c3.5,0,4.25.43,4.25,2.89V20.31c0,2.52-.75,2.88-4.25,2.88v1.53h12.33Z"></path><path d="M67.78,33c3.49,0,4.26.43,4.26,2.88V51.24c0,2.52-.76,2.88-4.26,2.88v1.54H80.11V54.12c-3.43,0-4.25-.36-4.25-2.88V35.92c0-2.45.82-2.88,4.25-2.88V31.51H67.78Z"></path><path d="M96.09,23.19c-2.95,0-4.1-.18-4.1-2.73V12.88h1.28c2.95,0,3,.49,3.59,3.7h1.67V7.28H97c-.75,3.61-.93,4-3.74,4H92v-6C92,3,93.67,2.6,96.7,2.6c3.24,0,5.69.64,6.84,4.27h1L103.68.57H84.6V2.11c3.31,0,3.57.76,3.57,2.42v16c0,2-.4,2.63-3.57,2.63v1.53H96.09Z"></path><path d="M20.14,33c2.09,0,4.47.13,4.47,3.7v8.19c0,6.19-4.51,9.3-8.59,9.3-2.3,0-8.3-1-8.3-6.5V35.8c0-2.49,1.8-2.77,4.1-2.77V31.51H0V33c2.6,0,3.74.42,3.74,3.09V46.29c0,7,6.26,9.95,11.45,9.95,7.17,0,11.58-4.76,11.58-10.56V36.27c0-2.6.83-3.23,3.53-3.23V31.51H20.14Z"></path><path d="M97.2,54.66c-4.86,0-10.29-3.15-10.29-11.07S92.34,32.5,97.2,32.5s10.29,3.15,10.29,11.08S102.07,54.66,97.2,54.66m0-23.73c-7.32,0-14.68,4.94-14.68,12.65,0,7.87,7.37,12.65,14.68,12.65s14.69-4.78,14.69-12.65S104.52,30.93,97.2,30.93"></path><path d="M11.23,23.17c-3.14,0-3.75-.27-3.75-2.9V4.35c0-1.44.51-2.06,3-2.06,3.89,0,5.85,2.26,5.85,4.91,0,3.62-2.55,4.86-6.67,5l.45,1.58c4.81-.1,10-1,10-6.51,0-4.14-3.46-6.74-9.51-6.74H.13V2.15c2.82,0,3.53.72,3.53,3V20.37c0,2.78-.82,2.79-3.53,2.79v1.56H11.23Z"></path><path d="M25.85,14.42l3.31-9.36,3.65,9.36Zm7,8.76v1.54h9.8V23.19c-2.2-.07-2.63-.73-3.68-3.37L32.45,3.91,30.94,0h-1.5L28.19,3.32l0,.08L21.62,20c-.72,1.88-1.53,3.2-3.64,3.2v1.53h8.29V23.19c-1.15,0-2.67,0-2.67-1.56a12.49,12.49,0,0,1,.76-3.18l1-2.66h8l1.4,3.6a9.15,9.15,0,0,1,.72,2.74c0,1.07-1.48,1.06-2.62,1.06"></path></svg>

        </div>
</a>
      <a class="featured-work__item featured-work__item--index" href="/work/berggruen">
        <img class="lazyload featured-work__background-image" data-src="https://cdn.littlelines.com/assets/work/berggruen-institute-9f5ca47d3ac4ce84c3cff9ba0a891b3389371255c4d93623a2590b797b82ea33.jpg" alt="Berggruen institute" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
        <div class="featured-work__content">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.5 59.8" class="featured-work__image"><title>Berggruen Institute</title><path d="M44.4 33.7c-2.1-1.7-4.9-1.7-7-1.7h-22v13.3h22c2.5 0 5.1-.1 7.2-1.9 1.3-1.2 2.1-3 2-4.8.1-1.9-.7-3.7-2.2-4.9zm-2.5-8.3c1.7-1 2.8-2.9 2.7-5 0-1.9-.9-3.7-2.5-4.7-1.9-1.2-4.4-1.2-6.5-1.2H15.5v11.8h21.1c1.8-.1 3.8-.1 5.3-.9zM0 0v59.8h59.8V0H0zm53.8 39c.1 3.4-1.3 6.6-3.9 8.8-3.9 3.3-9.6 3.3-14.2 3.3h-27V8.7h27.1c3.9 0 10.2 0 13.9 4.6 1.5 1.9 2.2 4.3 2.2 6.7 0 4.8-2.5 7.1-4 8 0 0-.5.2-1 .5 4.2 1.6 7.1 5.8 6.9 10.5zm17.8-19h15.1v-2.8H71.6v-5.5h15.6v-3H68.3v20.4h19.5v-2.9H71.6V20zm44.8-5.2c.1-1.7-.6-3.3-1.8-4.4-1.8-1.6-4-1.6-5.7-1.7H95v20.4h3.3v-8h9.3l6.7 8h4.3l-7.4-8.5c1.6-.3 5.2-1.2 5.2-5.8zm-3.4.2c0 .7-.2 1.4-.6 2-1.1 1.4-3 1.4-4.5 1.4h-9.6v-6.8H109c1.2 0 2.6.1 3.4 1.4.4.6.6 1.3.6 2zm22.4-3.8c2.2 0 4.4.7 6.1 2.1.5.4.9.9 1.2 1.4l.1.2 3.2-1-.2-.4c-.5-.9-1.1-1.7-1.9-2.3-2.5-2-5.6-3-8.8-2.9-4.4 0-8.3 1.8-10.3 4.8-1.1 1.7-1.8 3.8-1.8 5.8 0 6.1 5 10.7 11.6 10.7 2.7.1 5.5-.7 7.7-2.2.3-.2.5-.4.7-.6v2.4h2.9v-11h-11.6V21h8.7c-.1 1.2-.6 2.3-1.5 3.2-1.7 1.7-4 2.6-6.4 2.5-1.2 0-5.3-.2-7.4-3.5-.9-1.3-1.3-2.9-1.3-4.5.1-3.7 2.9-7.5 9-7.5zm29.6 0c2.2 0 4.4.7 6.1 2.1.5.4.9.9 1.2 1.4l.1.2 3.2-1-.2-.4c-.5-.9-1.1-1.7-1.9-2.3-2.5-2-5.6-3-8.8-2.9-4.4 0-8.3 1.8-10.3 4.8-1.1 1.7-1.8 3.8-1.8 5.8 0 6.1 5 10.7 11.6 10.7 2.7.1 5.5-.7 7.7-2.2.3-.2.5-.4.7-.6v2.4h2.9v-11h-11.6V21h8.7c-.1 1.2-.6 2.3-1.5 3.2-1.7 1.7-4 2.6-6.4 2.5-1.2 0-5.3-.2-7.4-3.5-.9-1.3-1.3-2.9-1.3-4.5.2-3.7 2.9-7.5 9-7.5zm40.3 3.6c.1-1.7-.6-3.3-1.9-4.4-1.8-1.6-4-1.6-5.7-1.7H184v20.4h3.3v-8h9.3l6.7 8h4.3l-7.4-8.5c1.6-.3 5.1-1.2 5.1-5.8zm-3.4.1c0 .7-.2 1.4-.6 2-1.1 1.4-3 1.4-4.5 1.4h-9.6v-6.8H198c1.2 0 2.6.1 3.4 1.4.4.7.6 1.4.5 2zm29.3 6.3c0 1.7 0 3.6-2.4 4.7-1.5.6-3 .9-4.6.9-1.9.1-3.7-.3-5.3-1.3-1.6-1-1.8-2.2-1.9-4.6v-12h-3.3v11.9c0 2.1 0 4.9 3 7 2.2 1.4 4.8 2.1 7.5 2 2.5.1 5-.5 7.2-1.8 3.1-2 3.1-4.9 3.1-6.9V8.7h-3.3v12.5zm15.4-1.2h15.1v-2.8h-15.1v-5.5h15.6v-3h-18.9v20.4h19.6v-2.9h-16.3V20zm41.7-11.3v14.1c0 .9 0 1.2.1 2-.6-.7-.9-1-1.6-1.8L273.3 8.8l-.1-.1H270v20.4h3.2V15.6c0-1.3 0-1.9-.1-2.7.3.4.6.7 1.1 1.3L288.3 29l.1.1h3.1V8.7h-3.2zm-220 26.1h223.2v.8H68.3v-.8zm0 16.2h.9v-8.8h-.9V51zm30.6 0h1v-8.8H99v6.2c0 .4 0 .8.1 1.3l.1.7-.4-.5c-.3-.4-.6-.8-1-1.1l-6.2-6.5h-1V51h.8v-6c0-.5 0-1.1-.1-1.6l-.1-.7.5.6c.2.3.3.4.7.8l6.5 6.9zm21.3-1.6c.6.8 1.5 1.3 2.6 1.5.8.2 1.5.3 2.3.3 1.9 0 3.2-.5 3.9-1.4.3-.4.4-.9.4-1.4 0-1.1-.9-2.1-2-2.2-.4-.1-.8-.1-1.2-.2l-1.2-.1-1.2-.1c-.7 0-1.3-.2-1.8-.6-.2-.2-.3-.5-.3-.8 0-.6.4-1.1.9-1.3.7-.3 1.5-.4 2.3-.4 1.1-.1 2.1.2 3 .8.2.1.3.3.5.4l.8-.3c-.2-.3-.4-.5-.7-.7-1.1-.6-2.3-1-3.6-.9-1.5 0-4.1.3-4.1 2.5 0 .5.2 1 .6 1.4.7.6 1.4.7 3.7.8 1.9.2 3.5.3 3.5 1.8 0 1.3-1.2 2.1-3.3 2.1-1.3.1-2.5-.3-3.6-.9-.2-.1-.4-.3-.6-.5l-.9.2zM152 51h.9v-8.1h3.8v-.7h-8.4v.7h3.8V51zm24.6 0h.9v-8.8h-.9V51zm24.5 0h.9v-8.1h3.8v-.7h-8.4v.7h3.8l-.1 8.1zm24.6-8.8v5.2c-.2 1.2.3 2.3 1.3 3 1 .6 2.1.9 3.3.8 1.1.1 2.2-.2 3.2-.8 1-.6 1.5-1.8 1.3-2.9v-5.4h-.9v5.4c.2 1-.4 2-1.3 2.5-.7.3-1.5.4-2.3.4-.9 0-1.8-.2-2.6-.7-.8-.5-1.2-1.5-1-2.4V42l-1 .2zm32.7 8.8h.9v-8.1h3.8v-.7h-8.4v.7h3.8V51zm24.6 0h8.4v-.7h-7.5v-3.5h7v-.7h-7v-3.2h7.2v-.7H283V51z"></path></svg>

        </div>
</a>    </div>
  </div>
</section>

Header

<header class="header header--primary header--guidelines">
  <nav class="nav nav--primary" id="nav">
    <ul>
      <li class="nav__item nav--primary__item nav--primary__item--logo">
        <a title="Littlelines Home Page" data-instant="" class="nav__link nav--primary__link  nav--primary__link--logo" href="/">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg logo" data-name="Layer 1" viewBox="0 0 74.91 74.91"><title>Littlelines</title><path d="M34.08 61.17a5.59 5.59 0 1 0-1.35-1.48l-3.86 3.53a4.59 4.59 0 1 0 1.34 1.48zm-12.3-6.62l2.43-2.43a4.56 4.56 0 1 0 .49-8l-2.35-3a5.57 5.57 0 0 0-7.21-8.37L11.58 29a4.49 4.49 0 0 0 .71-1.37h9.91a4.59 4.59 0 1 0 0-2h-9.74a4.54 4.54 0 0 0-.57-1.63l2.05-2.14a5.75 5.75 0 1 0-1.43-1.4l-2 2.06a4.56 4.56 0 1 0-.5 7.8l3.65 3.85a5.57 5.57 0 0 0 7.09 8.23l2.35 3a4.51 4.51 0 0 0-1 2.25h-9.7a4.59 4.59 0 1 0 0 2h9.92a4.52 4.52 0 0 0 .48 1.06l-2.43 2.43a5.7 5.7 0 1 0 1.42 1.42zM45 23.42a4.57 4.57 0 1 0 6.46 0 4.57 4.57 0 0 0-6.46 0zM7.8 40.69a4.57 4.57 0 1 0-6.46 0 4.57 4.57 0 0 0 6.46 0zm55.93 4.73a4.56 4.56 0 0 0-.62 5.67l-2.05 2.05a5.7 5.7 0 1 0 1.41 1.42l2.05-2.05a4.56 4.56 0 1 0-.79-7.08zm9.85-11.19A4.54 4.54 0 0 0 70 32.92l-.82-2.69a4.51 4.51 0 0 0 1-.73 4.56 4.56 0 0 0-5.67-7.08l-2.05-2.05a5.7 5.7 0 1 0-1.42 1.41l2.05 2.05a4.54 4.54 0 0 0 4.18 7l.82 2.7a4.37 4.37 0 0 0-2.2 3h-3.67a5.57 5.57 0 0 0-11 0h-6.9a7 7 0 0 0-5.89-5.89v-6.9a5.57 5.57 0 0 0 3.72-8.45l3.85-3.6a4.59 4.59 0 1 0-1.34-1.48l-3.87 3.53a5.57 5.57 0 1 0-4.37 9.92v6.9a7 7 0 1 0 7.89 7.89h6.9a5.57 5.57 0 0 0 11 0h3.69a4.56 4.56 0 1 0 7.67-4.23zm-44.08-23a4.54 4.54 0 0 0 1.31-3.56l2.69-.82a4.52 4.52 0 0 0 .73 1 4.62 4.62 0 1 0-1.31-2.9l-2.7.82a4.51 4.51 0 0 0-.73-1 4.57 4.57 0 1 0 0 6.46zm19.77 51.22v-9.74a4.59 4.59 0 1 0-2 0v9.92a4.48 4.48 0 0 0-3.13 5l-2.49.95a4.61 4.61 0 1 0 .36 2l2.83-1.07a4.57 4.57 0 1 0 7-5.74 4.52 4.52 0 0 0-2.57-1.32z"></path></svg>

</a>      </li>
      <li class="nav__item nav--primary__item nav--primary__item--toggle">
        <button class="hamburger hamburger--squeeze nav__link nav--primary__link nav--primary__link--toggle" @click="toggle">
          <span class="hamburger-box">
            <span class="hamburger-inner">Toggle Menu</span>
          </span>
        </button>
      </li>
      <li>
        <ul class="nav--primary__right nav--primary__collapse">
          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link " @click="close" href="/services">Services</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link  " @click="close" href="/work">Case Studies</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a data-instant="" class="nav__link nav--primary__link " @click="close" href="/company">Company</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a class="nav__link nav--primary__link " @click="close" href="/blog">Blog</a>
          </li>
          <li class="nav__item nav--primary__item">
            <a class="nav__link nav--primary__button nav--primary__button" @click="close" href="/contact">Contact</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Headings

h1 Hello, World

h2 Hello, World

h3 Hello, World

h4 Hello, World

h5 Hello, World

h6 Hello, World

<h1 class="h1">h1 Hello, World</h1>
<h2 class="h2">h2 Hello, World</h2>
<h3 class="h3">h3 Hello, World</h3>
<h4 class="h4">h4 Hello, World</h4>
<h5 class="h5">h5 Hello, World</h5>
<h6 class="h6">h6 Hello, World</h6>

Hero

From pixels to programming,
we make it work & we make it look good.

We never settle for anything less than the best looking sites on the web.

<div class="section">
  <div class="content content--tall space-inner-bottom--none">
    <div class="heading">
      <h1 class="heading__title heading__title--large">
        From pixels to programming,<br class="hero__title-break"> we make it work
        <span class="color--subaccent">&amp;</span>
        we make it look good.
      </h1>
      <h3 class="heading__subtitle heading__subtitle--large color--secondary">
        We never settle for anything less than the best looking sites on the web.
      </h3>
    </div>
  </div>
</div>

Building a better future your
business will love

Connecting the dots for companies since 2007 through

Web Development, Web Design, Ruby on Rails, Elixir/Phoenix, Rescue Projects, Code Reviews and more.

<div class="section">
  <div class="content content--tall space-inner-bottom--none">
    <div class="heading">
      <h1 class="heading__title heading__title--large">
        Building a better <span class="color--subaccent">future</span> your
        <br class="hero__title-break">
        business will love
      </h1>
    </div>

    <section>
  <div class="section section--without-padding section--two-thirds-width">
    <div class="content underline color--accent">
      <h2 class="display--block color--primary space-bottom--medium">
        Connecting the dots for companies since 2007 through
      </h2>
      <p class="display--block h2 font-style--italic line-height--small font-weight--bold">
        Web Development, Web Design, <a href='/rails-consulting' class='link color--current-color link--with-border-underline'>Ruby on Rails</a>,
        <a href='/elixir-phoenix-consulting' class='link color--current-color link--with-border-underline'>Elixir/Phoenix</a>, Rescue Projects, Code Reviews and more.
      </p>
    </div>
  </div>
</section>

  </div>
</div>

Inputs

Text Input

<label class="label" for="text-input">Text Input</label>
<input class="input" id="text-input" placeholder="Text Input" type="text"></input>

Email Input

<label class="label" for="email-input">Email Input</label>
<input class="input" id="email-input" placeholder="Email Input" type="email"></input>

Password Input

<label class="label" for="password-input">Password Input</label>
<input class="input" id="password-input" placeholder="Password Input" type="password"></input>

Telephone Input

<label class="label" for="tel-input">Telephone Input</label>
<input class="input" id="tel-input" placeholder="+1 (123) 456-7890" type="tel"></input>

Search Input

<label class="label" for="search-input">Search Input</label>
<input class="input input--search" id="search-input" placeholder="search" type="search"></input>

URL Input

<label class="label" for="url-input">URL Input</label>
<input class="input" id="url-input" placeholder="http://example.com" type="url"></input>

Date Input

<label class="label" for="date-input">Date Input</label>
<input class="input" id="date-input" placeholder="1/15/19" type="date"></input>

File Input

<label class="label" for="file-input">File Input</label>
<input class="input" id="file-input" type="file"></input>

Number Input

<label class="label" for="number-input">Number Input</label>
<input class="input" id="number-input" placeholder="123" type="number"></input>

Range Input (ONLY WORKS IN WEBKIT AT THE MOMENT)

<label class="label" for="range-input">Range Input</label>
<input class="input input--range" id="range-input" type="range"></input>
(ONLY WORKS IN WEBKIT AT THE MOMENT)

Text Area

<label class="label">Text Area</label>
<textarea class="textarea" placeholder="Text Area"></textarea>

Select

<label class="label">Select</label>
<select class="select">
  <option>Select Input</option>
</select>

<input class="button" type="submit" value="Submit your post"></input>

Lists

Curabitur semper purus erat, non.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.

<ul class="ul list">
  <li class="list__item">Curabitur semper purus erat, non.</li>
  <li class="list__item">Curabitur semper purus erat, non.</li>
  <li class="list__item">Curabitur semper purus erat, non.</li>
</ul>

Definition Lists

This is a definition title: This is a definition about the definition title

<dl class="dl">
  <dt>This is a definition title</dt>
  <dd>This is a definition about the definition title</dd>
</dl>

List Horizontal

Curabitur semper purus erat, non.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.

<ul class="ul list">
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
  <li class="list__item list__item--horizontal">Curabitur semper purus erat, non.</li>
</ul>

Ordered Lists

Proin vitae euismod urna. Praesent.
1. Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
2. Suspendisse blandit diam eu turpis.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.

<ol class="ol">
  <li>
    Proin vitae euismod urna. Praesent.
    <ol class="ol">
      <li>
        Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
      </li>
      <li>
        Suspendisse blandit diam eu turpis.
      </li>
    </ol>
  </li>
  <li>Curabitur semper purus erat, non.</li>
  <li>Curabitur semper purus erat, non.</li>
  <li>Curabitur semper purus erat, non.</li>
</ol>

Unordered Lists

Proin vitae euismod urna. Praesent.
- Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
- Suspendisse blandit diam eu turpis.
  - Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
  - Suspendisse blandit diam eu turpis.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.
Curabitur semper purus erat, non.

<ul class="ul">
  <li>
    Proin vitae euismod urna. Praesent.
    <ul class="ul">
      <li>
        Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
      </li>
      <li>
        Suspendisse blandit diam eu turpis.
        <ul class="ul">
          <li>
            Aliquam condimentum dui sed dui aliquam, fringilla iaculis.
          </li>
          <li>
            Suspendisse blandit diam eu turpis.
          </li>
        </ul>
      </li>
    </ul>
  </li>
    <li>Curabitur semper purus erat, non.</li>
    <li>Curabitur semper purus erat, non.</li>
    <li>Curabitur semper purus erat, non.</li>
</ul>

Nav

<nav>
  <ul class="ul nav">
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item">
      <a class="nav__link">Curabitur</a>
    </li>
  </ul>
</nav>

Nav Horizontal

<nav>
  <ul class="ul nav">
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
    <li class="nav__item--horizontal">
      <a class="nav__link">Curabitur</a>
    </li>
  </ul>
</nav>

Panels

Panel Default

Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.

Panel with border

Panel Primary

Panel Secondary

Panel Function

Panel Alert

Panel Secure

Panel Warning

Panel Success

<div class="panel">
  <h2>Panel Default</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--with-border">
  <h2>Panel with border</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--primary">
  <h2>Panel Primary</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--secondary">
  <h2>Panel Secondary</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--function">
  <h2>Panel Function</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--alert">
  <h2>Panel Alert</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--secure">
  <h2>Panel Secure</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--warning">
  <h2>Panel Warning</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>
<div class="panel panel--success">
  <h2>Panel Success</h2>
  <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
</div>

Panel Section

<div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--with-border panel--section">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Panel Section

<div class="section section--with-border">
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section-bordered">
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
  <div class="panel panel--half-width">
    <h2>Panel Section</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Quotes

"Matt is a top-notch developer and paired with his brother Josh's design skills they make for a double whammy. Gorgeous work, fast turn around and a great sense of humor to boot."

Andrew Wilkinson // Founder, MetaLab

<section>
  <div class="section section--double-padding section--with-border">
    <div class="content content--tall text-align--center">
      <div class="heading">
        <h2 class="heading__title heading__title--medium color--secondary">"Matt is a top-notch developer and paired with his brother Josh's design skills they make for a double whammy. Gorgeous work, fast turn around and a great sense of humor to boot."</h2>
      </div>
      <p class="space-top--large">
        Andrew Wilkinson <span class="color--subaccent font-weight--bold space--small">//</span> Founder, MetaLab
      </p>
    </div>
  </div>
</section>

Radio Buttons

All Ideas (68)
Completed (25)
In Progress (35)
Planned (7)
Under Consideration (1)

<ul class="ul list list--unstyled">
  <li class="list__item">
    <label class="label" for="filtercheck1">All Ideas (68)</label>
    <input class="radio" id="filtercheck1" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck2">Completed (25)</label>
    <input class="radio" id="filtercheck2" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck3">In Progress (35)</label>
    <input class="radio" id="filtercheck3" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck4">Planned (7)</label>
    <input class="radio" id="filtercheck4" name="radio-example" type="radio"></input>
  </li>
  <li class="list__item">
    <label class="label" for="filtercheck5">Under Consideration (1)</label>
    <input class="radio" id="filtercheck5" name="radio-example" type="radio"></input>
  </li>
</ul>

Sections

Section Default

Section with border

Section Half-Width

Section Half Width

<div class="section">
  <div class="content">
    <h2>Section Default</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--with-border">
  <div class="content">
    <h2>Section with border</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--half-width">
  <div class="content">
    <h2>Section Half-Width</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>
<div class="section section--half-width">
  <div class="content">
    <h2>Section Half Width</h2>
    <p>Nunc a dui vitae odio condimentum dignissim. Nunc vel urna non nibh commodo vehicula at laoreet sem. Donec nisi purus, hendrerit eget eleifend vitae, mollis at justo. Nullam non sollicitudin diam, nec porta erat. Aliquam eget laoreet nisi. Sed orci ante, facilisis quis ornare a, iaculis ac enim. Donec fermentum nulla et sollicitudin viverra. Duis vulputate, dolor quis porttitor feugiat, odio urna semper odio, eu dictum magna lacus sit amet arcu. Curabitur hendrerit nunc id est laoreet, ut venenatis eros iaculis. Etiam placerat porttitor nisi id tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. In non dui in mi malesuada cursus. Nam sit amet ex risus. Sed in leo eleifend, suscipit augue sed, pretium libero.</p>
  </div>
</div>

Table

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>2011/05/03</td>
      <td>$163,500</td>
    </tr>
    <tr>
      <td>Sakura Yamamoto</td>
      <td>Support Engineer</td>
      <td>Tokyo</td>
      <td>37</td>
      <td>2009/08/19</td>
      <td>$139,575</td>
    </tr>
    <tr>
      <td>Thor Walton</td>
      <td>Developer</td>
      <td>New York</td>
      <td>61</td>
      <td>2013/08/11</td>
      <td>$98,540</td>
    </tr>
    <tr>
      <td>Finn Camacho</td>
      <td>Support Engineer</td>
      <td>San Francisco</td>
      <td>47</td>
      <td>2009/07/07</td>
      <td>$87,500</td>
    </tr>
  </tbody>
</table>

Responsive Table

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500

<table class="table--responsive">
  <thead class="table--responsive__head">
    <tr class="table--responsive__row">
      <th class="table--responsive__cell">Name</th>
      <th class="table--responsive__cell">Position</th>
      <th class="table--responsive__cell">Office</th>
      <th class="table--responsive__cell">Age</th>
      <th class="table--responsive__cell">Start date</th>
      <th class="table--responsive__cell">Salary</th>
    </tr>
  </thead>
  <tbody class="table--responsive__body">
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Tiger Nixon</td>
      <td class="table--responsive__cell">System Architect</td>
      <td class="table--responsive__cell">Edinburgh</td>
      <td class="table--responsive__cell">61</td>
      <td class="table--responsive__cell">2011/04/25</td>
      <td class="table--responsive__cell">$320,800</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Garrett Winters</td>
      <td class="table--responsive__cell">Accountant</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">63</td>
      <td class="table--responsive__cell">2011/07/25</td>
      <td class="table--responsive__cell">$170,750</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Ashton Cox</td>
      <td class="table--responsive__cell">Junior Technical Author</td>
      <td class="table--responsive__cell">San Francisco</td>
      <td class="table--responsive__cell">66</td>
      <td class="table--responsive__cell">2009/01/12</td>
      <td class="table--responsive__cell">$86,000</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Cedric Kelly</td>
      <td class="table--responsive__cell">Senior Javascript Developer</td>
      <td class="table--responsive__cell">Edinburgh</td>
      <td class="table--responsive__cell">22</td>
      <td class="table--responsive__cell">2012/03/29</td>
      <td class="table--responsive__cell">$433,060</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Airi Satou</td>
      <td class="table--responsive__cell">Accountant</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">33</td>
      <td class="table--responsive__cell">2008/11/28</td>
      <td class="table--responsive__cell">$162,700</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Bruno Nash</td>
      <td class="table--responsive__cell">Software Engineer</td>
      <td class="table--responsive__cell">London</td>
      <td class="table--responsive__cell">38</td>
      <td class="table--responsive__cell">2011/05/03</td>
      <td class="table--responsive__cell">$163,500</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Sakura Yamamoto</td>
      <td class="table--responsive__cell">Support Engineer</td>
      <td class="table--responsive__cell">Tokyo</td>
      <td class="table--responsive__cell">37</td>
      <td class="table--responsive__cell">2009/08/19</td>
      <td class="table--responsive__cell">$139,575</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Thor Walton</td>
      <td class="table--responsive__cell">Developer</td>
      <td class="table--responsive__cell">New York</td>
      <td class="table--responsive__cell">61</td>
      <td class="table--responsive__cell">2013/08/11</td>
      <td class="table--responsive__cell">$98,540</td>
    </tr>
    <tr class="table--responsive__row">
      <td class="table--responsive__cell">Finn Camacho</td>
      <td class="table--responsive__cell">Support Engineer</td>
      <td class="table--responsive__cell">San Francisco</td>
      <td class="table--responsive__cell">47</td>
      <td class="table--responsive__cell">2009/07/07</td>
      <td class="table--responsive__cell">$87,500</td>
    </tr>
  </tbody>
</table>

Type Selectors

Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.

<p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>

<p>Paragraphs - Nulla mollis nisl sed diam fermentum malesuada. Suspendisse commodo rhoncus ligula, eget commodo neque lacinia ac. Aliquam cursus id tortor nec efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel ornare nisi, at ornare libero. Aenean accumsan sodales massa sit amet ultricies. Vivamus condimentum vehicula magna, eget aliquam ex hendrerit nec. Aenean congue ex orci, imperdiet ultricies justo cursus sed. Phasellus congue nulla et pharetra elementum. Nam sapien ex, pulvinar tempus eros maximus, pulvinar commodo erat. Sed id ipsum elit. Sed auctor turpis eget elit viverra egestas non in massa.</p>

Bold Text

<b>Bold Text</b>

Strong Text

<strong>Strong Text</strong>

Italic Text

<i>Italic Text</i>

Emphasized Text

<em>Emphasized Text</em>

Underlined Text

<u>Underlined Text</u>

~~Strikethrough text~~

<strike>Strikethrough text</strike>

This is an example of ^{Superscript text}

This is an example of <sup>Superscript text</sup>

This is an example of _{Subscript text}

This is an example of <sub>Subscript text</sub>

This is small text

This is <small>small text</small>

abbr is an abbreviation

<abbr title="Abbreviation">abbr</abbr> is an abbreviation

To submit a form, press the key labeled enter

To submit a form, press the key labeled <kbd>enter</kbd>

Quoted text

<q cite="http://example.com">Quoted text</q>

Blockquote - Nunc mi urna, sodales eu varius tincidunt, gravida id nisl. Vestibulum at enim in tortor consectetur sagittis vitae nec tellus. Integer a gravida felis. Suspendisse pharetra elementum enim. Phasellus urna eros, accumsan at ante ut, sollicitudin sodales neque. Proin egestas vitae dui eget scelerisque. Nulla feugiat ex at erat porta, ac porttitor turpis sagittis.
William Shatner

<blockquote>
  <p>Blockquote - Nunc mi urna, sodales eu varius tincidunt, gravida id nisl. Vestibulum at enim in tortor consectetur sagittis vitae nec tellus. Integer a gravida felis. Suspendisse pharetra elementum enim. Phasellus urna eros, accumsan at ante ut, sollicitudin sodales neque. Proin egestas vitae dui eget scelerisque. Nulla feugiat ex at erat porta, ac porttitor turpis sagittis.</p>
  <cite>
    <a>William Shatner</a>
  </cite>
</blockquote>

The definition is the word being defined

<dfn>The definition</dfn>
is the word being defined

Mark text

<mark>Mark text</mark>

Sample Text

<samp>Sample Text</samp>

var = x

var =
<var>x</var>

20:00 May 15

<time>20:00</time>
<time datetime="2001-05-15 19:00">May 15</time>

Our Build Process

Alerts

Buttons

Blog Posts

Checkboxes

Colors

Named Colors

Featured Work

Header

Headings

h1 Hello, World

h2 Hello, World

h3 Hello, World

h4 Hello, World

h5 Hello, World

h6 Hello, World

Hero

From pixels to programming, we make it work & we make it look good.

We never settle for anything less than the best looking sites on the web.

Building a better future your business will love

Connecting the dots for companies since 2007 through

Inputs

Lists

Definition Lists

List Horizontal

Ordered Lists

Unordered Lists

Nav

Nav Horizontal

Panels

Panel Default

Panel with border

Panel Primary

Panel Secondary

Panel Function

Panel Alert

Panel Secure

Panel Warning

Panel Success

Panel Section

Panel Section

Panel Section

Panel Section

Panel Section

Panel Section

Panel Section

Quotes

"Matt is a top-notch developer and paired with his brother Josh's design skills they make for a double whammy. Gorgeous work, fast turn around and a great sense of humor to boot."

Radio Buttons

Sections

Section Default

Section with border

Section Half-Width

Section Half Width

Table

Responsive Table

Tags

Type Selectors

From pixels to programming,
we make it work & we make it look good.

Building a better future your
business will love