Mick Redman: February 2014

Monday, 17 February 2014

Twitter Bootstrap single page website without the need for yet another plugin

The code below creates a page using Twitter Bootstrap. It contains one of those fashionable single page navigations. I needed to create one for a site I was developing for a client recently. When I started to look into it all the examples seemed to use a plugin. For performance purposes, I didn't want to use another plugin. Especially since jQuery already comes with the 'animate' class. See code below for solution.

<!DOCTYPE html>
<html>
<head>
<title>Single page website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#about, #contact
{
padding-top:4em;
}
#contact
{
margin-bottom:40em;
}
</style>



</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li ><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>

<div id="home">
<div class="row">
<div class="container">
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<article class="col-md-4">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
</div>
</div>
</div>

<div id="about">
<div class="row">
<div class="container">
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
<figure class="col-md-4">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
</div>
</div>
</div>

<div id="contact">
<div class="row">
<div class="container">
<article class="col-md-6">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</article>
<aside class="col-md-6">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
</aside>
</div>
</div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="container">
<a href="#home">Back to top</a>
</div>
</footer>

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
<script>
(function()
{
$('.nav a, footer a').click(function()
{
var target = $(this).attr('href');
var targetLoc = $(target).offset().top;
$('html, body').stop().animate(
{
scrollTop:targetLoc,
easing:'swing'
}, 1000);
return false;
});
})();
</script>
</body>
</html>

Twitter Bootstrap CSS snippets

When creating a website using Twitter Bootstrap you often find yourself using the same CSS code snippets. Below are some of mine.

/*Standard bootstrap colour palette*/
.gray-darker
{
background:#222222;
color:white;
}
.gray-dark
{
background:#333333;
color:white;
}
.gray
{
background:#555555;
color:white;
}
.gray-light
{
background:#999999;
color:white;
}
.gray-lighter
{
background:#EEEEEE;
color:#222222;
}
.brand-primary
{
background:#428BCA;
color:white;
}
.brand-success
{
background:#5CB85C;
color:white;
}
.brand-info
{
background:#5BC0DE;
color:white;
}
.brand-warning
{
background:#F0AD4E;
color:white;
}
.brand-danger
{
background:#D9534F;
color:white;
}

/* Remove colours of navigation bar */
.navbar-default, .navbar-inverse
{
background-image:none;
background-color:white;
border-color:white;
box-shadow:none;
}

/* Set default colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a
{
background:#222222;
color:white;
}

/* Set hover colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a:hover
{
background:#333333;
color:white;
}

/* Set default colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a
{
background:#555555;
color:white;
}

/* Set hover colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a:hover
{
background:#999999;
color:white;
}

/* Set default colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a
{
background:#222222;
color:white;
}

/* Set hover colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a:hover
{
background:#333333;
color:white;
}

/* Set default colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a
{
background:#555555;
color:white;
}

/* Set hover colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a:hover
{
background:#999999;
color:white;
}

/* Align figure text to centre */
figure
{
text-align:center;
}

/* Align figure images to centre */
figure img
{
margin:0 auto;
}

/* Change size and colour of glyph icons */
span.glyphicon
{
font-size:6em;
color:#222222;
}

/* Make the carousel images centre and take up the whole carousel */
.carousel > .carousel-inner > .item > img
{
margin:0 auto;
width:100%;
}

/* Lift the arrows a little higher to vertical middle and dim */
.carousel-control > .icon-prev, .carousel-control > .icon-next, .carousel-control > .glyphicon-chevron-left, .carousel-control > .glyphicon-chevron-right
{
top:40%;
opacity:0.5;
}

/* Remove the awful background gradient */
.carousel-control.right, .carousel-control.left
{
background-image:none;
}

/* Take the right arrow closer to the edge */
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right
{
right:20%;
}

/* Take the left arrow closer to the edge */
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left
{
left:20%;
}