We could have just brought over Bootstrap's default bootstrap.css
file, but let's use this opportunity to take a trial run at compiling the LESS files. This will ensure we've got the fundamentals ready for doing more serious work to come.
If you've worked with LESS before, this will be a familiar territory. If you have not worked with LESS before, I'll help you along. However, I highly recommend that you stop and refer to the documentation at http://lesscss.org. Additionally, you may want to find a good basic LESS tutorial and work through it. As you'll soon see, working with LESS is powerful and fun, and the time spent learning will reward well.
For this first step, we won't be writing any LESS files, only compiling.
Navigate to less/bootstrap.less
and open it in your editor. You'll see that this file imports all the other files from the less
folder. When compiled, this file generates the complete bootstrap.css
stylesheet. This is what we want for our first step.
If you've not compiled LESS files before, you'll need to download and install one of the following compilers:
Once your chosen LESS compiler is downloaded, installed, and ready for action, the following are your steps to be performed:
css
in the main directory at the same level as the fonts
, img
, js
, and less
folders.css
, fonts
, img
, less
, and so on) to your compiler:less/bootstrap.less
file.bootstrap.less
. Select Set output path (or your application's similar option). Navigate to the css
folder you created earlier. The file should automatically be named bootstrap.css
. Click on Select.bootstrap.css
was created in the css
folder.If you run into problems, check your compiler's log to ensure it was successful, then double-check your output path. In addition, you may run into a situation where your chosen compiler runs into an error because it has not been updated to stay in sync with the development of LESS. I have recently found this with another free compiler. If your compiler refuses to compile the default Bootstrap LESS files, it's an indication that the compiler needs updating.
css
folder, we only need to coordinate our file's name with the stylesheet link in our index.html
file.index.html
, remove the stylesheet link to css/normalize.css
, as normalize is included in Bootstrap (normalize.less
is the first file imported by bootstrap.less
).css/main.css
file. Because we'll be customizing Bootstrap to generate our own custom stylesheet, let's leave this link as it is. In the forthcoming steps, we'll use main.css
for the custom styles we generate.bootstrap.css
. In the css
folder, create a copy of boostrap.css
. Name the copy as main.css
(in the future steps, we'll overwrite this file with our customizations) as shown in the following screenshot:We now have the default Bootstrap styles in place. Now, let's complete our navbar by making it responsive. As a bonus, this will test to ensure that Bootstrap's JavaScript plugins are working as they should.
To complete our navbar to take advantage of Bootstrap's responsive navbar solution, we need to add two new elements, with appropriate classes and data attributes. You'll find this documented under Bootstrap's Components page, under the Navbar tab at http://getbootstrap.com/components/#navbar.
We'll begin by adding the necessary additional markup as follows:
<div class="navbar-header">
. Inside this element, we'll add the navbar-toggle
button, which will be used to slide the responsive navbar open and closed. The following is what you'll need (and I will include the navbar-header
as the parent element):<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="EB9781782164524_3.html">Project name</a> </div>
A few notes about the preceding code are as follows:
navbar-toggle
for CSS styles.navbar-collapse
class. This element is coming in the next step.icon-bar
class are used by the CSS to create the small horizontal bars in the toggle button.<ul class="nav navbar-nav">
with a div with the appropriate Bootstrap classes as follows:<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="EB9781782164524_3.html">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.nav-collapse -->
In the preceding two steps, I've divided the resulting code into two halves and all within <div class="container">
. To double-check your work, see the full code in the sample code for this chapter.
Now save the file and refresh your browser. Using a modern browser (such as IE9 or a recent version of Firefox, Google Chrome, or Safari), click on and drag the edge of the browser window to make the window narrower than 980px.
If all works as it should, you should see a collapsed version of the navbar, as shown in the following screenshot, with the site name or logo and a toggle button.
This is a good sign! Now click on the toggle button, and it should slide open, as shown in the following screenshot:
Success! Congratulations!
If things are running smoothly at this point, it means that you've successfully compiled Bootstrap's CSS from LESS, and you've also successfully included Bootstrap's JavaScript plugins.
If things are not running smoothly, you should double-check the following things:
index.html
updated as it should be?You might find it helpful to do the following:
When we have so many moving parts to work with, things do happen. And these are some of our best survival methods!
Now, assuming things are working, let's move on to take care of one more potential problem. We intend to support Internet Explorer 8 in our designs. To do this, we need to help this older browser out a little.
To support Internet Explorer 8, we need to add a bit of JavaScript that equips the browser to respond to media queries. This is the respond.js
polyfill by Scott Jehl.
Bootstrap's own documentation recommends this step for IE8 compatibility. You'll find it referenced briefly in the Bootstrap 3 documentation at http://getbootstrap.com/getting-started/#browsers.
You'll also find respond.js
linked in the example HTML templates found in the bootstrap-master
download under the examples
folder, which is found in the docs folder. There you'll see respond.js
linked in the head of the document within an IE conditional comment that limits its use to IE browsers lower than IE9. The HTML5 shiv is also included as follows:
<!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]-->
Because we have already included the HTML5 shiv with Modernizr, we can leave that out here. In addition, Andy Clarke has recommended an improved conditional comment that excludes IE mobile browsers to ensure that we do not unnecessarily feed the script to Windows mobile devices that don't need it. See his repository, 320andup, at https://github.com/malarkey/320andup/.
Clarke's recommended code works as follows:
<!--[if (lt IE 9) & (!IEMobile)]> ... <![endif]-->
Armed with these starting points, we're ready to implement it in our site template files as follows:
respond.js
and find the GitHub link). If you'd like, take a few minutes to scroll down the page and read the documentation to learn more about how it works.respond.min.js
.js/vendor
directory, right alongside the scripts for jQuery and Modernizr.respond.js
file, which is wrapped in the targeted IE conditional comment. We'll do this is in the head of index.html
, directly beneath the line loading Modernizr.<!-- Modernizr --> <script src="js/vendor/modernizr-2.6.2.min.js"></script> <!-- Respond.js for IE 8 or less only --> <!--[if (lt IE 9) & (!IEMobile)]> <script src="js/vendor/respond.min.js"></script> <![endif]-->
If you want to test this and do not have IE8 available, you might use an online service such as Browsershots that is available at http://browsershots.org (free) or BrowserStack that is available at http://www.browserstack.com (premium with free trial).
Our site template is almost complete. Let's pause to take stock before moving on.