Making our site look nice

I’m not going to pull any punches: right now, our app looks pretty tragic. If only we could hire twenty designers and sixteen HTML genies, our live would be much better: as it stands, though, we have about sixteen minutes to make our app presentable.

We’re going to rely on the exact same shortcuts we rely on every time we want to get something done: libraries and frameworks!

“Oh no!” you say. “Not more libraries and frameworks!”

Yes, more libraries and frameworks! In the same way that Flask is a shortcut to building the backend of our web site, there are libraries that help design the frontend of your site, too.

Introducing: HTML/CSS/JS Frameworks!

Frontend frameworks range from being simple ways of styling a page (e.g. Pure) or fully-featured, everything-under-the-sun factories (e.g. Bootstrap).

We’re going to work with Bootstrap: http://getbootstrap.com/, because once you work with it you’ll realize like 70% of the hip sites on the internet are built with it.

How to use

On the Bootstrap Getting Started page, there’s a basic template. I personally like the Starter Template a little bit more, so we’re going to steal that.

This code going to go into layout.html, since it is, of course, a layout, but I’m going to make two important changes before we save t:

First: On top of stealing it: we don’t want to host a bunch of files: all that .js and .css would just clutter up our directories, right? Luckily, the files are hosted on a CDN, which means someone else can host them and we just get to use them! I’m changing the JavaScript and CSS links in the template to use BootstrapCDN instead of local files.

Second: Where the content goes (they have a header and some text), I’m changing the code to {% block content %}{% endblock %}. As we learned in our introduction to layouts, this will let us frame our content with the layout.

layout.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

    <style>
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
    }
    h1, h2 {
      text-align: center;
    }
    </style>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        {% block content %}{% endblock %}
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  </body>
</html>

And that’s it!

You can now use Bootstrap’s powerful styling tool - take a peek at their CSS introduction. You add special classes to things and wham! Fancy styles.

The components page is also very useful, full of fun bits about how to style your navbar, create breadcrumbs and (one of my favorites) create labels.