anchor.diff:  html(lang='en')
     head
       meta(charset="UTF-8")
  -    title Core Styleguide
  +    title Core 
       meta(name='description', content='')
  -    meta(name='viewport', content='width=device-width, initial-scale=1')
  -    link(rel='apple-touch-icon', href='apple-touch-icon.png')
  -    //- Place favicon.ico in the root directory
  +    meta(name='viewport', content='width=device-width, initial-scale=1') 
  +
  +    //- Uncomment and use metaquery insteat of breakpoint?
  +    //- meta(name="breakpoint", content="phone", media="(max-width: 480px)")  
  +    //- meta(name="breakpoint", content="small-tablet", media="(min-width: 480px) and (max-width: 600px)")  
  +    //- meta(name="breakpoint", content="tablet", media="(min-width: 600px) and (max-width: 1024px)")  
  +    //- meta(name="breakpoint", content="widescreen", media="(min-width: 1024px)")  
  +    //- meta(name="breakpoint", content="retina", media="only screen and (-webkit-min-device-pixel-ratio : 2)")
  +    
  +    //- script(src="../components-bower/metaquery/metaquery.min.js")
  +    //- inline metaquery
  +    //- script
  +      include ../components-bower/metaquery/metaquery.min.js
  +
  +    //- Add to homescreen for Chrome on Android
  +    meta(name="mobile-web-app-capable", content="yes")
  +    link(rel="icon", sizes="192x192", href="assets/images/touch/chrome-touch-icon-192x192.png")
  +    
  +    //- Add to homescreen for Safari on iOS
  +    meta(name="apple-mobile-web-app-capable", content="yes")
  +    meta(name="apple-mobile-web-app-status-bar-style", content="black")
  +    meta(name="apple-mobile-web-app-title", content="Core CSS")
  +    link(rel="apple-touch-icon", href="assets/images/touch/apple-touch-icon.png")
  +    
  +    //- Tile icon for Win8 (144x144 + tile color)
  +    meta(name="msapplication-TileImage", content="assets/images/touch/ms-touch-icon-144x144-precomposed.png")
  +    meta(name="msapplication-TileColor", content="#3372DF")
  +    meta(name="theme-color", content="#3372DF")
  +
  +    //- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones
  +    //- <link rel="canonical" href="http://www.example.com/">
  +      
       link(type='text/css', rel='stylesheet', href='assets/css/main.css')
  -  body.body.styleguide
  -    include:markdown _partials/article.md
  -    include _partials/partial
  -    header.l-styleguide-header
  -      h1(class="+u-font-jumbo") Core
  -      h3(class="+u-h2") Styleguide Version 0.0.1
  -    div.l-styleguide-container
  +  body.styleguide
  +    //- include:markdown _partials/article.md
  +    //- include _partials/partial
  +    header.l-styleguide-header.container
  +      h1(class='+u-font-huge  +u-font-600' style='font-family: source-sans-pro') CORE
  +      h3(class='+u-h2  +u-font-300  +u-font-italic'  style='font-family: source-sans-pro') Styleguide Version 0.0.1
  +    div.l-styleguide-container.container
  +      h1(class='styleguide-title +u-font-large') Base
         h1 Colors
         div.styleguide-base.config
  -        div.styleguide-colors.red
  +        h3 Custom Colours
  +        div.styleguide-colors.white
           div.styleguide-colors.yellow
           div.styleguide-colors.orange
  +        div.styleguide-colors.red
  +        div.styleguide-colors.maroon
  +        div.styleguide-colors.pink
           div.styleguide-colors.green
  +        div.styleguide-colors.aqua
           div.styleguide-colors.blue
           div.styleguide-colors.black
  -        div.styleguide-colors.white
           div.styleguide-colors.grey
           div.styleguide-colors.light-grey
           br
  +        h3 Background
  +        div.styleguide-colors.bgc-1
  +        div.styleguide-colors.bgc-2
  +        div.styleguide-colors.bgc-3
  +        br
  +        h3 Buttons
           div.styleguide-colors.c-btn-1
           div.styleguide-colors.c-btn-2
           div.styleguide-colors.bgc-btn-1
           div.styleguide-colors.bgc-btn-2
           br
  +        h3 Links
  +        div.styleguide-colors.c-link
  +        div.styleguide-colors.c-link-hover
  +        div.styleguide-colors.c-link-active
  +        div.styleguide-colors.c-link-visited
  +        h3 Alert
           div.styleguide-colors(class='+success')
           div.styleguide-colors(class='+info')
           div.styleguide-colors(class='+error')
           div.styleguide-colors(class='+warning')
           div.styleguide-colors(class='+danger')
           br
  -        div.styleguide-colors.code-c
  -        div.styleguide-colors.code-bgc
  -        br
  +        h3 Headings
  +        div.styleguide-colors.c-heading-1
  +        div.styleguide-colors.c-heading-2
  +        div.styleguide-colors.c-heading-3
  +        h3 Form
  +        div.styleguide-colors.c-form-1
  +        div.styleguide-colors.c-form-2
  +        div.styleguide-colors.c-form-input
  +        div.styleguide-colors.c-form-hover
  +        div.styleguide-colors.c-form-active
  +        div.styleguide-colors.c-form-focus
  +        br
  +        h3 Code
  +        div.styleguide-colors.c-code
  +        div.styleguide-colors.bgc-code
  +        br
  +        h3 Brands
           div.styleguide-colors.google
           div.styleguide-colors.facebook
           div.styleguide-colors.twitter
  
positive.code:           p this will be code
          div.o-this-or-this
            p(class='o-this-or-this__cols  +u-two-fifths')
              a(href='#') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
            span(class='o-this-or-this__cols  +u-one-fifth')
              | or
            p(class='o-this-or-this__cols  +u-two-fifths')
              a(href='#') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
          .styleguide-code
            p this will be code
        div.styleguide-objects.stat-group
          h1 Stat Group
          .o-stat-group
            dl.o-stat
              dt.o-stat__title Tweets
  
negative.code:         .styleguide-code
            p code here
        div.styleguide-objects.island
          h1 island
          .o-island
            p Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          .styleguide-code
            p code here
        h1 Emphasis
        div.styleguide-objects.emphasis
          p(class='o-emp  +c-error') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +c-info') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +c-warning') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +c-success') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +c-danger') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          br
          p(class='o-emp  +u-p-box  +error') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +u-p-box  +info') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +u-p-box  +warning') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +u-p-box  +success') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          p(class='o-emp  +u-p-box  +danger') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
          .styleguide-code
            p code here
        h1 Breadcrumbs
        div.styleguide-objects.breadcrumb
          h3.styleguide-title--sub Breadcrumb
          ul(class='o-nav  o-breadcrumb')
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
          br
          h3.styleguide-title--sub Line
          ul(class='o-nav  o-breadcrumb  --line')
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
          br
          h3.styleguide-title--sub Path
          ul(class='o-nav  o-breadcrumb  --path')
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
          br
          h3.styleguide-title--sub Data
          ul(class='o-nav  o-breadcrumb  --data')
            li(data-breadcrumb="→")
              a(class="" href='/') one
            li(data-breadcrumb="→")
              a(class="" href='/') one
            li(data-breadcrumb="→")
              a(class="" href='/') one
            li(data-breadcrumb="→")
              a(class="" href='/') one
          br
          h3.styleguide-title--sub Arrow 
          ul(class='o-nav  o-breadcrumb  --arrow')
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
            li
              a(class="" href='/') one
          br
          h3.styleguide-title--sub Arrow 
          ul(class='o-nav  o-breadcrumb  --arrow')
            a(class="" href='/') one
            a(class="" href='/') one
            a(class="" href='/') one
            a(class="" href='/') one
          .styleguide-code
            p code here
        div.styleguide-objects.label-pills
  