Skip to content

Instantly share code, notes, and snippets.

@francisoud

francisoud/index-boostrap.html

Created July 27, 2012 17:01
Show Gist options
  • Save francisoud/3189167 to your computer and use it in GitHub Desktop.
Save francisoud/3189167 to your computer and use it in GitHub Desktop.
Download ZIP
Test Boostrap, Less & nouveau tag HTML5
Raw
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>
Raw
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>
Raw
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(); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment