Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Wireframe layout template file.
- 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")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment