Wireframe layout template file.

layout.jade

- var site_url = 'https://s3.amazonaws.com/creative_loupe/website/demos/wireframing'
- var site_name = 'Wireframing Inc'
- var layout = ''
- var section = ''
- var sidebar_content = ''

block vars

doctype
//if IE 8
  html.no-js.lt-ie9
//[if gt IE 8]><!
html.no-js
  //<![endif]
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title #{page_name} #{site_name}
    link(rel='stylesheet', href='#{site_url}/css/app.css')
    link(rel='stylesheet', href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css')
    script(src="#{site_url}/js/custom.modernizr.js")
    block head
  body(class="#{slug}")
    block header-top
    header(role="banner")
      .row
        .large-12.columns
          h1: a(href="#{site_url}/index.html") #{site_name}
      #main-nav
        .row
          .large-12.columns
            nav.top-bar.main-nav
              ul.title-area
                li.name
                li.toggle-topbar.menu-icon
                  a(href="#"): span Menu
              section.top-bar-section
                ul.left
                  li(class=(section === 'about') ? 'active has-dropdown' : 'has-dropdown')
                    a(href="#{site_url}/about/index.html") About
                    ul.dropdown
                      include partials/nav-about
                  li
                    a(href="#{site_url}/contact.html") Contact
                ul.right
                  li.has-form
                    form
                      .row.collapse
                        .small-8.columns
                          input(type="text")
                        .small-4.columns
                          a.button.secondary(href="#") <i class="icon-search"></i>
    #main
      div(class="content-wrapper row #{layout}")
        .content
          block content

        .sidebar
          block sidebar-top
          block sidebar
          if section == 'about'
            .sidebar-block
              h3.sidebar-header About Nav
              ul.side-nav
                include partials/nav-about
          if slug == 'press'
            include partials/sidebar-press
          block sidebar-bottom

    footer(role="contentinfo")
      .connect-bar
        .row
          .large-5.columns
            h3 Connect:&nbsp;&nbsp;
            include partials/social-icons
          .large-5.large-offset-2.columns
            form
              .row.collapse
                .large-7.columns: input(type="text")
                .large-5.columns: a.button.secondary.expand(href="#",placeholder="email address") Email Signup
      .footer-info
        .row
          .large-5.columns
            h3(style="margin-bottom: 0;") Lorim ipsum Donate Dolar
            p Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
            p: a.button.secondary.large Hire Us
          .large-7.columns.text-right
            h1: a(href="#{site_url}/index.html") #{site_name}
            p: small 2013 &copy; #{site_name}
    block footer-bottom

    script(src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js")
    script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.2/js/foundation.min.js")
    script(src="#{site_url}/js/app-ck.js")