dayne.broderson.org

bootstrapper

2013-11-11 00:00:00 +0000

I am considering my recent conversion of this website to bootstrap a smashing success. This post is to to primarily act as a reminder of the basics and to hopefully help guide Josh on his website rewrite. You can still see a version of my old site archived here which was just a minor modification of the Jekyll author mojombo’s github website

Going to a place like the getting started examples and picking one to view the source of like jumbotron navbar example is the way to go.

For my jekyll website this meant I was tweaking my _layouts/default.html while runnng jekyll server --watch and refreshing http://localhost:7000.

After I got the basics worked out I was pleased with how little work was required to tweak existing content and how well the website looked on mobile platforms like my Nexus 7

Next steps:

basic html

I have kept things fairly simple. Basic of the html is:

<html>
<head>
  # you know, title, metata stuff
  # include css (see below)
</head>
<body>
  <div class="container">

    <div class="header">
    </div> <!-- end header -->

    <div class="hero-unit">
        <!-- main body content  -->
    </div> <!-- end main -->

    </div class="footer">
    </div> <!-- end footer -->

  </div> <!-- end container -->
  <!-- now include your javascript (see below) -->
</body>
</html>

Not a far cry from my first html5 silly sample.

At the top (in header)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- bootstrap jumbotron template css -->
<link rel="stylesheet" href="/css/jumbotron-narrow.css" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>