In 2011, Mark Otto and Jacob Thornton were working at Twitter on a number of projects. The two creators of the Bootstrap framework needed a way to achieve consistency across them all. The solution they developed was the Bootstrap CSS framework. Over time, more developers came on board and the project quickly became the most popular repository on GitHub. As time has passed, the framework has become the backbone of websites and web applications across the Internet. Other companies have tried to emulate their success by creating their own internal frameworks, but Bootstrap still remains the gold standard of open source CSS frameworks.
Bootstrap provides developers with all the CSS tools that they need to quickly develop websites. It has a deep feature set, is easy to learn, is mobile-first, and is cross-browser compatible. Hundreds of additional components and plugins have been developed by programmers, making it the go-to tool for web designers everywhere.
Bootstrap Site Blueprints Volume II provides you with detailed instructions on how to develop some of the most common website and web application types on the Internet. If you have struggled with using Bootstrap in the past or applying a custom look and feel to your projects, this book will give you the foundation that you need to become a Bootstrap master.
Chapter 1, Advanced Bootstrap Development Tools, is a quick introduction to Bootstrap. This chapter also covers some advanced development tools that can be used to make Bootstrap site development easier, such as Less, Node.js, EJS, and Harp.js.
Chapter 2, Building a Restaurant Website, is where we take our Harp.js development environment and build a restaurant website. This will include building more page templates, introducing Google web fonts, customizing Bootstrap components, and much more.
Chapter 3, Mobile-First Bootstrap, covers how to do the following: create a mobile-first website using Bootstrap, design a mobile-first website, use Google material design colors and styles, do advanced customizations on the Bootstrap modal component, use jQuery to make a search bar hide/show effect, and create a static, single-page app using Bootstrap.
Chapter 4, Bootstrap Wiki, tells us how to create a wiki layout with Bootstrap and how to add multiple templates to a project in Harp. You also get to learn how to customize the navigation modal you made in the previous chapter, how to use Harp partials for more than just the header and footer, and how to code your template in a modular fashion to save time and produce Less code.
Chapter 5, Bootstrap News Magazine, illustrates the creation of a magazine website using Bootstrap, and a new way to lay out a header using inline divs. Here, we see how to construct a complex footer using multiple parts, how to use flexbox with a Bootstrap grid, and how to use a basic jQuery to improve the experience of your article page. We also implement a Disqus-powered comments section.
Chapter 6, Bootstrap Dashboard, teaches you how to code a dashboard using Bootstrap, how to create a project with a dark look and feel, and how to implement and customize the Chartist JavaScript library. In this chapter, we customize the Bootstrap panels component, the Bootstrap table component, and the Boostrap nav and navbar components. We also see how to use a mobile nav outside of the default navbar.
Chapter 7, Bootstrap Social Network, covers the coding of a social network using Bootstrap. We customize the Bootstrap well component, the Bootstrap navbar component, and the Bootstrap alert and button components. Finally, we see how to create a highly modular design for easy reuse of code and components.
To run the pieces of example code outlined in this book, you'll need a modern browser, such as Google Chrome, Apple Safari, Mozilla Firefox or Microsoft Internet Explorer. To work with the projects outlined in each chapter, you'll also need the following:
A text editor tool, such as Notepad or Sublime Text 2
The full code package for each chapter
You'll need to install Node.js and Harp.js
A command-line tool such as a terminal or Cygwin
This book is for developers who are interested in learning how to build common website and web application projects with the Bootstrap CSS framework. Basic knowledge of HTML, CSS, and JavaScript is required to get the most out of this book. It will also be helpful to have some experience with a command-line tool.
By reading this book, you'll learn the syntax and inner workings of Bootstrap (the latest version 3.3.4 at the time of publishing this book), Less, Harp.js, HTML, and CSS. You'll also learn a bit about JavaScript and jQuery.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, folder names, filenames, file extensions, pathnames, and dummy URLs s are shown as follows:
A block of code is set as follows:
.red1 {
color: @red1;
}
.red1-bg {
background: @red1;
}
.red2 {
color: @red2;
}
.red2-bg {
background: @red2;
}Any command-line input or output is written as follows:
$ harp server --port 9000
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose the Share or Embed Map option from the menu."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: https://www.packtpub.com/sites/default/files/downloads/1099OS_ColorImages.pdf.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.