Notes

Code has been indented using spaces with a tab-width of two.

Sass files are combined into the styles.css file using CodeKit.

The custom.js file is set up in CodeKit to import all used plugins at the top and is then concatenated and minified to custom.min.js.

Colours

Colour Sass variable HEX
$grey #878786
$greyDark #535352
$greyLight #dadada
$beige #edebe4
$beigeDark #afada7
$red #b40000
$redBright #d80007
PT Sans Bold, 36/48, uppercase

Heading 1

.page-heading

PT Sans Regular, 24/28

Heading 2

Heading 2 spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines

PT Sans Bold, 20/24

Heading 3

Heading 3 spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines

PT Sans Bold, 18/24

Heading 4

Heading 4 spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines spanning multiple lines


Vollkorn Italic, 24/32, $grey

This is a .page-intro paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, sapiente, mollitia, nemo, esse porro impedit cupiditate voluptatibus illum libero optio odit error natus aut. Ratione.

Vollkorn Regular, 16/24

This is a normal paragraph.

Sed ut perspiciatis bold text sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et inline link quasi architecto beatae vitae dicta sunt explicabo. italised text voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem small text.

Sed ut perspiciatis unde subscript text sit voluptatem accusantium doloremque subscript text, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione deleted text.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, enim, officia quam assumenda ipsum expedita! An abbreviation: WWF.


Lists

Unordered list

Ordered List

  1. List item
  2. List item
    1. A nested list
    2. A nested list
  3. Another item which has a bit more text Another item which has a bit more text Another item which has a bit more text

Definition lists

Coffee
- black hot drink
Milk
- white cold drink

Quotes

Blockquote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

Franz Kafka

A short quote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

Image caption

Buttons & Pills

Buttons

The button classes can be applied to any element. For the examples below, an anchor tag is used.

Button Markup
A plain button <a class="btn btn--plain">A plain button</a>
A shouty button <a class="btn btn--shouty">A shouty button</a>
Disabled button <a class="btn btn--disabled">Disabled button</a>

Pills

Pill Markup
A plain pill <a class="pill pill--plain">A plain button</a>

Forms

Sample form
<form action="">
  <fieldset>
   <legend class="visuallyhidden">Sample form</legend>
  
   <div class="fieldwrapper">
     <div class="field--short">
       <label for="name">Name<sup>*</sup></label>
       <input type="text" name="name" id="name" placeholder="John">
     </div>
  
     <div class="field--short">
       <label for="name">Email<sup>*</sup></label>
       <input type="text" name="name" id="name" placeholder="john@email.com">
     </div>
   </div>
   
   <div class="fieldwrapper">
     <label for="message">Message<sup>*</sup></label>
     <textarea name="message" id="message" placeholder="Enter your message..."></textarea>
   </div>
  </fieldset>
  
  <button type="submit" class="btn btn--shouty">Submit</button>
</form>

Form with errors

Sample form
  <form action="">
    <fieldset>
     <legend class="visuallyhidden">Sample form</legend>
    
     <div class="fieldwrapper">
       <div class="field--short">
         <label for="name">Name<sup>*</sup></label>
         <input type="text" name="name" id="name" placeholder="John" class="error">
         <label for="name" class="error">Please enter your name</label>
       </div>
    
       <div class="field--short">
         <label for="name">Email<sup>*</sup></label>
         <input type="text" name="name" id="name" placeholder="john@email.com">
       </div>
     </div>
     
     <div class="fieldwrapper">
       <label for="message">Message<sup>*</sup></label>
       <textarea name="message" id="message" placeholder="Enter your message..." class="error"></textarea>
       <label for="message" class="error">Please enter your message</label>
     </div>
    </fieldset>
    
    <button type="submit" class="btn btn--shouty">Submit</button>
  </form>

Title

Subtitle Published on by Ovalhouse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, totam, dolorum, tempore delectus dolorem inventore adipisci placeat facere accusamus dolores incidunt nulla reiciendis officiis rem.

more
<section class="listing">
    <article itemscope itemtype="http://schema.org/Article" class="listing-item">
        <figure aria-hidden="true" class="listing-item-image">
            <a href="">
              <img src="/assets/images/listing-image-placeholder.gif" alt="Img desc" class="listing-item-image-placeholder"/>
            </a>
        </figure>

        <div class="listing-item-copy">
          <header class="listing-item-header">
            <h2 itemprop="name" class="listing-item-heading">
              <a href="">
                Title
              </a>
            </h2>
            <span class="listing-item-subtitle">Subtitle</span>
                
            <span class="listing-item-publish-details">
              Published on <time datetime="{entry_date format='%Y-%m-%d'}" itemprop="datePublished">{entry_date format="%j %F %Y"}</time> by 
              <span itemprop="publisher">Ovalhouse</span>
            </span>
          </header>
          
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, totam, dolorum, tempore delectus dolorem inventore adipisci placeat facere accusamus dolores incidunt nulla reiciendis officiis rem.</p>

          <a href="{title_permalink='{segment_1}'}" class="btn btn--shouty">more</a>
        </div>        
    </article>
  </section>