francisoud/index-boostrap.html

## index-boostrap.html
<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="utf-8">

		<title>Title of the document</title>

		<!-- boostrap -->

		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

		<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />

	</head>

	<body class="container">

		<header class="page-header"><h1>This is header</h1></header>

		<nav class="navbar navbar-inner">

			<ul class="nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#about">About</a></li>

              <li><a href="#contact">Contact</a></li>

            </ul>

		</nav>

		<aside class="pull-right">

			<h2>This is right sidebar</h2>

			<ul>

				<li class="active"><a href="#">Home</a></li>

				<li><a href="#">Link</a></li>

				<li><a href="#">Link</a></li>

			</ul>

		</aside>

		<section class="container">

			<header><strong>This is section header</strong></header>

			<article>

				<h2>This is article</h2>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tincidunt tincidunt. Vivamus molestie interdum massa ut aliquam. Duis bibendum imperdiet nisi, ac euismod augue rutrum at. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc erat sem, euismod at semper et, gravida quis enim. Suspendisse sodales aliquam eros non semper. </p>

			</article>

			<footer><em>This is section footer</em></footer>

		</section>

		<footer>This is footer &copy; 2012</footer>

	</body>

</html>

## index.html
<!DOCTYPE HTML>

<html>

	<head>

		<meta charset="utf-8">

		<title>Title of the document</title>

		<!-- my styles -->

		<link rel="stylesheet/less" type="text/css" href="styles.less"/>

		<!-- less -->

		<script src="less-1.3.0.min.js" type="text/javascript"></script>

	</head>

	<body>

		<header><h1>This is header</h1></header>

		<nav class="navbar navbar-inner">

			<ul class="nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#about">About</a></li>

              <li><a href="#contact">Contact</a></li>

            </ul>

		</nav>

		<aside>

			<h2>This is right sidebar</h2>

			<ul>

				<li class="active"><a href="#">Home</a></li>

				<li><a href="#">Link</a></li>

				<li><a href="#">Link</a></li>

			</ul>

		</aside>

		<section>

			<header><strong>This is section header</strong></header>

			<article>

				<h2>This is article</h2>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tincidunt tincidunt. Vivamus molestie interdum massa ut aliquam. Duis bibendum imperdiet nisi, ac euismod augue rutrum at. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc erat sem, euismod at semper et, gravida quis enim. Suspendisse sodales aliquam eros non semper. </p>

			</article>

			<footer><em>This is section footer</em></footer>

		</section>

		<footer>This is footer &copy; 2012</footer>

	</body>

</html>

## styles.less
@import "less/bootstrap.less";


body {

	.makeColumn(15,3);

}

header { .page-header(); }

section>header {

	border-bottom: none;

	margin: 0px 0;

    padding-bottom: 0px;

}

aside { .pull-right(); }
	<!DOCTYPE HTML>

	<html>

	<head>

	<meta charset="utf-8">

	<title>Title of the document</title>

	<!-- boostrap -->

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />

	</head>

	<body class="container">

	<header class="page-header"><h1>This is header</h1></header>

	<nav class="navbar navbar-inner">

	<ul class="nav">

	<li class="active"><a href="#">Home</a></li>

	<li><a href="#about">About</a></li>

	<li><a href="#contact">Contact</a></li>

	</ul>

	</nav>

	<aside class="pull-right">

	<h2>This is right sidebar</h2>

	<ul>

	<li class="active"><a href="#">Home</a></li>

	<li><a href="#">Link</a></li>

	<li><a href="#">Link</a></li>

	</ul>

	</aside>

	<section class="container">

	<header><strong>This is section header</strong></header>

	<article>

	<h2>This is article</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tincidunt tincidunt. Vivamus molestie interdum massa ut aliquam. Duis bibendum imperdiet nisi, ac euismod augue rutrum at. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc erat sem, euismod at semper et, gravida quis enim. Suspendisse sodales aliquam eros non semper. </p>

	</article>

	<footer><em>This is section footer</em></footer>

	</section>

	<footer>This is footer © 2012</footer>

	</body>

	</html>
	@import "less/bootstrap.less";



	body {

	.makeColumn(15,3);

	}

	header { .page-header(); }

	section>header {

	border-bottom: none;

	margin: 0px 0;

	padding-bottom: 0px;

	}

	aside { .pull-right(); }