Tuesday, 22 September 2015

Learning Node.js with Richard Astbury Part 2a: Going solo with Bootstrap

In Part 2 Richard Astbury showed me how to add Hogan to the web app and use a template for all the views in the app. Between us we also added Bootstrap to the app. One of the advantages of a template is that you can have a common navigation bar on every view in your app and one of the advantages of Bootstrap is that it has a ready made ‘navbar’. To add the navbar to the app, I copied and pasted the sample from the Bootstrap website and refreshed the browser:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> {{title}}  </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
  </head>
  <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <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>
        <a class="navbar-brand" href="/">Naked Logs</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          </ul>
        </div>
    </div>
  </div>
    {{{yield}}}
  </body>
</html>
This mostly worked. I had the navbar with one item ‘Naked Logs’ which takes users to the root of the application, but the time stamp was now obscured by the navbar. I investigated a simple example from Bootstrap website and discovered that I needed a little bit of custom CSS to move the body down in the template. I remembered what Richard had taught me about the public area of the project for static files and created a css folder there and a CSS file for the application:

mkdir public/css
touch public/css/nakedlogs.css

I put the CSS that would move the body down into the CSS file:

body {
  padding-top: 50px;
}

and added the CSS file to the template:
<head>
  <meta charset="utf-8">
  <title> {{title}}  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/css/nakedlogs.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
</head>
Refreshed the browser and hey presto, the timestamp was back in the client area!

Then it was time to check in and wait for the next instalment from Richard.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)