In this chapter, you will create the HTML markup for your UI. You will use the styles provided by the popular Bootstrap CSS framework to give your UI a bit of polish without having to create the CSS yourself. This way, you can focus on the application logic in JavaScript, which you will do in Chapter 10.
You will be creating the UI for the CoffeeRun app in two parts. The first consists of a form into which a user can enter a coffee order with all of its details (Figure 9.1). In the second part, the existing coffee orders will be displayed in a checklist. Each of these parts will have a corresponding JavaScript module to handle user interaction.
The Bootstrap CSS library provides a collection of styles that you can use for your sites and applications. Because of its popularity, you may not want to use Bootstrap for your user-facing production site without making some customizations. Otherwise, your site may end up looking like everyone else’s. However, Bootstrap is great for quickly creating good-looking prototypes.
As you did with normalize.css in Ottergram, you will get Bootstrap by loading it from cdnjs.com. Use version 3.3.6 of Bootstrap, which is at cdnjs.com/libraries/twitter-bootstrap/3.3.6. (To find the most current version for your own projects, search cdnjs.com for “twitter bootstrap.”)
Make sure to get the link for bootstrap.min.css (Figure 9.2), not one for the theme or fonts.
After you have copied the link, open index.html and add a <link> tag
with the URL. (Although we had to wrap the href attribute around to a second line to fit on this page, you should enter it on one line.)
...
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst
rap/3.3.6/css/bootstrap.min.css">
</head>
...
Bootstrap can provide out-of-the-box responsive styling for
your website or web app. Most of the time, you will just need to
include the CSS file and then add classes to your markup. One of
the main classes you will use is the
container class.
Add the container class to your <body> element in index.html.
While you are there, add a header to your page as well.
...
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootst
rap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>
</html>
The container class acts as a wrapper
for all the content that needs to adapt to the size of
the viewport. This provides basic responsive behavior to the
layout.
Save index.html, make sure browser-sync is running, and view your page.
It should resemble Figure 9.3.
Although there is not much to your page yet, notice that there is already a comfortable amount of padding around your header and that it has a font style applied to it.
Bootstrap has styles for a huge number of different visual elements. CoffeeRun will just scratch the surface, but you will get a chance to explore more styles in a later chapter. For now, it is time to add the markup for the order form.