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">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>  
    #about, #contact
    {
      padding-top:4em;
    }
    #contact
    {
      margin-bottom:40em;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </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><!-- nav-collapse -->
      </div><!-- container -->
    </div><!-- navbar -->

    <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><!-- container -->
      </div><!-- row -->
    </div><!-- section -->

    <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><!-- container -->
      </div><!-- row -->
    </div><!-- section -->

    <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><!-- container -->
      </div><!-- row -->
    </div><!-- section -->
    <footer class="navbar-default navbar-fixed-bottom">
      <div class="container">
        <a href="#home">Back to top</a>
      </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <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%;
}