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:
- add font magic which was discussed three years ago’s Sweet Fonts post
- create a reveal.js slideshow that fits here
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" />
At the bottom (after footer before end of body)
<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>