<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
+ <script>less = {env:'development'};</script>
<link rel="stylesheet/less" href="style_01.less" />
<script src="http://lesscss.googlecode.com/files/less-1.0.41.min.js"></script>
<!--~extra-headers~-->
<body>
<div id="centerer">
<header>
+ <h2>Header</h2>
</header>
<nav>
+ <a href="#">nav link 1</a>
+ <a href="#">nav link 2</a>
</nav>
<div id="main-body">
~main_body~
</article>
- <footer>
- </footer>
</div>
+ <footer>
+ <p>footer</p>
+ </footer>
</div>
</body>
</html>
+// dimensions
+@site-width: 940px;
+@nav-width: 200px;
+@gutter-width: 18px;
+@main-body-width: @site-width - @gutter-width - @nav-width;
+
+// colors
+@framing-color: #ccf;
+@gutter-color: #fff;
+
+body {
+ margin: 0;
+ padding: 0;
+ color: #000;
+ background: #fff;
+ font: 14px "Verdana", sans-serif;
+}
+
+#centerer {
+ position: relative;
+ margin: 0 auto;
+ width: @site-width;
+}
+
+header {
+ width: @site-width;
+ height: 100px;
+ background: @framing-color;
+ border-bottom: @gutter-width solid @gutter-color;
+}
+
+nav {
+ float: left;
+ width: @nav-width - 20px;
+ padding: 10px;
+ border-right: @gutter-width solid @gutter-color;
+ background: @framing-color;
+ a {
+ display: block;
+ }
+}
+
+#main-body {
+ float: left;
+ width: @main-body-width;
+}
+
+footer {
+ clear: both;
+ width: @site-width;
+ height: 50px;
+ background: @framing-color;
+ border-top: @gutter-width solid @gutter-color;
+}
+
#wfpl_messages {
border: 2px solid red;
background: #fbb;
Got questions, comments, patches, etc.? Contact Jason Woofenden