layout.jade for Twitters Bootstrap

When moving over to a templating system like Jade it is the silly things you get stuck on. This is probably more for my reference than anyone else but its a simple layout.jade to use with Twitters Bootstrap.

view plain print about

1!!!
2html
3    head
4        title= title
5        link(rel='stylesheet', href='http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css')
6
7    body
8        div.topbar
9            div.fill
10                div.container
11                    a(href='#').brand #{title}
12                    ul.nav
13                        li.active
14                            a(href='#') Home
15                        li
16                            a(href='http://www.andyjarrett.co.uk/blog') Blog
17                        li
18                            a(href='#') Contact
19
20
21    div.container!= body
22        footer
23            p © Company 2011

Each of your views will then be within the container, you just need to add the div.row in each view file. Below is the current index file at andyjarrett.nodester.com (subject to change of course)

view plain print about

1div.hero-unit
2    h1 Hello Node and Nodester
3    p More content coming soon
4
5div.content
6    div.page-header
7    div.row
8        div.span6
9            h2 Currently using
10            p Jade and Express
11        div.span5
12            h2 Starting with Node.js
13            p <a href="http://www.andyjarrett.co.uk/blog/index.cfm/2011/4/20/Developing-with-NodeJs-starting-links">Links to start you off</a>
14        div.span5
15            h2 The message board
16            p.label.notice Coming soon

If you are looking for more documentation then check this out from the Scala communitya href="http://scalate.fusesource.org/documentation/jade-syntax.html">scalate.fusesource.org/documentation/jade-syntax.html

Posted: 21-Dec-2011

Permalink: here

Andy Jarrett

layout.jade for Twitters Bootstrap

Comments