Level Up Lunch - Style Guide

Headers

h1-h6

Example

h1. Level Up Lunch Page title

h2. Example, Exercise, Tutorial Subheading

Header 3

Header 4

Header 5
Header 6

Markup

 <h1>h1. Level Up Lunch Page title</h1>
 <h2>h2. Example, Exercise, Tutorial Subheading</h2>
 <h3>Header 3</h3>
 <h4>Header 4</h4>
 <h5>Header 5</h5>
 <h6>Header 6</h6>

Breadcumbs

Simple breadcrumbs for navigating back from a specific page to the parent page

Example

Java / Examples

Markup

 <div class="breadcrumbs">
   Java / <a href="#">Examples</a>
 </div>

Buttons

Buttons with different colors.

Example

Markup

 <div>
   <button class="btn btn-primary">Button Primary</button>
   <button class="btn btn-secondary">Button Secondary</button>
   <button class="btn btn-tertiary">Button Tertiary</button>
 </div>

Share Buttons

Buttons for tweeting, liking, plussing a post, etc...

Example

Markup

 <button class="btn btn-social btn-twitter"><i class="icon-twitter"></i> Twitter</button>
 <button class="btn btn-social btn-facebook"><i class="icon-facebook"></i> Facebook</button>
 <button class="btn btn-social btn-google"><i class="icon-google"></i> Google+</button>

Social Buttons

Links to LUL's social media profiles to go in the footer

Example

Markup

 <div class="card-content section-dark">
   <a href="https://twitter.com/leveluplunch" class="social-link" title="Twitter">
     <span class="sr-only">Twitter</span>
     <i class="icon-twitter-white"></i>
   </a>
   <a href="https://www.facebook.com/leveluplunch" class="social-link" title="Facebook">
     <span class="sr-only">Facebook</span>
     <i class="icon-facebook-white"></i>
   </a>
   <a href="https://google.com/+Leveluplunch" rel="publisher" class="social-link" title="Google+">
     <span class="sr-only">google+</span>
     <i class="icon-google-white"></i>
   </a>
   <a href="https://github.com/leveluplunch" class="social-link" title="GitHub">
     <span class="sr-only">GitHub</span>
     <i class="icon-github"></i>
   </a>
   <a href="http://www.youtube.com/user/LevelUpLunch" class="social-link" title="YouTube">
     <span class="sr-only">YouTube</span>
     <i class="icon-youtube"></i>
   </a>
 </div>

Card List

Example

  • Item 1
  • Item 2

Markup

 <div class="card">
   <ul class="card-list">
    <li class="card-list-item">Item 1</li>
    <li class="card-list-item">Item 2</li>
   </ul>
 </div>

Card List with Active Item

An active state

Example

Markup

 <div class="card">
   <ul class="card-list">
    <li class="card-list-link card-list-active">
      <a href="#">Link 1</a>
    </li>
    <li class="card-list-link">
      <a href="#">Link 2</a>
    </li>
   </ul>
 </div>

Cards

A white card with a slight box shadow. A card can be made up of a header, image, embed (video), content, and a footer. Any buttons in the footer should not be "solid."

Example

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, saepe at ex sed eius nam explicabo autem quia error quis eum doloribus.
Card Button

Card With Video

Dicta, ab, vitae laudantium culpa similique saepe unde repudiandae aperiam quibusdam molestias ex amet enim qui nulla iusto repellendus corporis officia eius.

Markup

 <div class="row">
   <div class="col col-half">
     <div class="card">
       <div class="card-header">
         <h2 class="card-title">Card Title</h2>
       </div>
       <img class="card-img" src="http://placehold.it/320x180" alt="">
       <div class="card-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Hic, saepe at ex sed eius nam explicabo autem quia error quis eum doloribus.
       </div>
       <a href="#" class="card-btn card-btn-primary">Card Button</a>
     </div>
   </div>
   <div class="col col-half">
     <div class="card">
       <div class="card-header">
         <h2 class="card-title">Card With Video</h2>
       </div>
       <div class="card-embed">
         <iframe src="//www.youtube.com/embed/cmSbXsFE3l8" frameborder="0" allowfullscreen></iframe>
       </div>
       <div class="card-content">
          Dicta, ab, vitae laudantium culpa similique saepe unde repudiandae aperiam quibusdam 
          molestias ex amet enim qui nulla iusto repellendus corporis officia eius.
       </div>
     </div>
   </div>
 </div>

Card Colapsible

A card list with a header, that on small screen will change to an accordion.

Example

Card Title

Markup

 <div class="card card-collapsible">
   <div class="card-header">
     <h2 class="card-title">Card Title</h2>
   </div>
   <ul class="card-list card-collapse">
    <li class="card-list-link">
      <a href="#">Link 1</a>
    </li>
    <li class="card-list-link">
      <a href="#">Link 2</a>
    </li>
   </ul>
 </div>

Icons

Icons are SVGs run through grunticon. The main use is social media icons as links for tweeting/liking/etc...

Example

Markup

 <div class="card-content section-dark">
   <i class="icon-twitter-white"></i>
   <i class="icon-facebook-white"></i>
   <i class="icon-google-white"></i>
   <i class="icon-github"></i>
   <i class="icon-youtube"></i>
 </div>

Logo and Slogan

The main banner with the Level Up Lunch logo and slogan

Example

Markup

 <header class="logo">
   <img src="http://leveluplunch.com/images/leveluplunch.svg" alt="Level Up Lunch">
   <h2 class="logo-slogan">learn. code. eat.</h2>
 </header>

Top Navigation

The top navigation bar

Example

Markup

 <nav class="navbar">
   <div class="navbar-container">
     <a href="#" class="navbar-logo"><img src="http://www.leveluplunch.com/images/leveluplunch.svg" alt=""></a>
     <div class="navbar-menu">
       <a href="#main-menu">M<span class="hamburger">&#x2261;</span>NU</a>
       <ul class="navbar-dropdown">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li>
           <form action="http://google.com/search" method="get" class="search">
             <input type="hidden" name="q" value="site:leveluplunch.com">
             <input class="search-input type="text" name="q" results="0">
             <button type="submit" class="btn btn-primary">Search</button>
           </form>
         </li>
       </ul>
     </div>
   </div>
 </nav>

Inline Nav List

A list of links inline

Example

Markup

 <ul class="nav-inline">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
 </ul>

Paginator

Pagination control for blog posts

Example

  1. «
  2. 1
  3. 2
  4. 3
  5. »

Markup

 <div class="paginator">
   <ol class="paginator-list">
     <li class="disabled"><a href="#">&laquo;</a></li>
     <li class="active"><a href="1">1</a></li>
     <li><a href="2">2</a></li>
     <li><a href="3">3</a></li>
     <li><a href="next">&raquo;</a></li>
   </ol>
 </div>

Post Excerpt

A short excerpt of a blog post

Example

Post Title

| Tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Read more

Markup

 <div class="post">
   <h4 class="post-title"><a href="#">Post Title</a></h4>
   <div class="post-info">
     <time datetime="2014-01-01">Date</time> | Tags
   </div>
   <div class="post-excerpt">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
     sed diam nonummy nibh euismod tincidunt ut laoreet dolore
     magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
     quis nostrud exerci tation ullamcorper suscipit lobortis nisl
     ut aliquip ex ea commodo consequat.</p>
   </div>
   <a href="#" class="btn btn-secondary">Read more</a>
 </div>

Sections

A section can have a background color and is used as differnt stripes of content on the page.

Example

Primary Section
Secondary Section
Tertiary Section
Dark Section (for footer)
Gray Section

Markup

 <section class="section section-primary">
   <div class="container">Primary Section</div>
 </section>
 <section class="section section-secondary">
   <div class="container">Secondary Section</div>
 </section>
 <section class="section section-tertiary">
   <div class="container">Tertiary Section</div>
 </section>
 <section class="section section-dark">
   <div class="container">Dark Section (for footer)</div>
 </section>
 <section class="section section-gray">
   <div class="container">Gray Section</div>
 </section>

Tables

Content tables.

Example

Header 1Header 2Header 3
Entry 1Entry 2Entry 3
Entry 1Entry 2Entry 3
Entry 1Entry 2Entry 3
Entry 1Entry 2Entry 3

Markup

 <table>
   <thead>
     <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
   </thead>
   <tbody>
     <tr><td>Entry 1</td><td>Entry 2</td><td>Entry 3</td></tr>
     <tr><td>Entry 1</td><td>Entry 2</td><td>Entry 3</td></tr>
     <tr><td>Entry 1</td><td>Entry 2</td><td>Entry 3</td></tr>
     <tr><td>Entry 1</td><td>Entry 2</td><td>Entry 3</td></tr>
   </tbody>
 </table>

Title

The name title on the page

Example

The Title of the Page

Markup

 <header class="section section-primary section-header">
   <div class="container">
     <h1 class="title">The Title of the Page</h1>
   </div>
 </header>