Bootstrap Site Blueprints Volume II
Description
Key Features
[*] Build Bootstrap projects quickly and easily with Harp.js, Node, and Less
[*] Learn how to extend Bootstrap with the use of open source JavaScript and icon web font libraries
[*] Get acquainted with building complex social networking, wiki, and dashboard projects with Bootstrap
Book DescriptionBootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion. The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we'll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you're warmed up, we'll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites. What you will learn
[*] Customize and extend existing Bootstrap JavaScript components
[*] Combine the Google Material Design look and feel with Bootstrap
[*] Use flexbox and other cutting-edge CSS3 techniques in Bootstrap
[*] Implement and customize open source JavaScript chart libraries in Bootstrap
[*] Optimize and implement an optimal user experience for all your projects
[*] Implement the Disqus commenting platform into your projects
Who this book is forBootstrap Site Blueprints Volume II is geared for developers of all experience levels. It is written in a concise, easy-to-understand way. Each project follows a step-by-step process that anyone can understand. Some experience with Bootstrap beforehand would definitely be an asset but is not required.
All prices
More details
Other editions
Additional editions
Person
Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Content
Advanced Bootstrap Development Tools
Building a Restaurant Website
Mobile First Bootstrap
Bootstrap Wiki
Bootstrap News Magazine
Bootstrap Dashboard
Bootstrap Social Network
Setting up a boilerplate project
For the rest of this chapter, I'm going to teach you how to set up a Bootstrap boilerplate project in Harp. Moving forward, this boilerplate will be the basis for all the projects in the book. One of the great things about Harp is that you can simply copy and paste a project to create a new instance of it on your local machine. There are also some other commands that you can run to generate project scaffolding, and I welcome you to check them out at http://harpjs.com/docs/. However, for this book, we aren't going to take any shortcuts, and I'm going to show you how to manually set up a project. The best practice is to do it the hard way first so that you learn how it works. This will save you a headache down the road if you are troubleshooting a problem. The first thing you should do is navigate to a directory on your computer where you want to store your project. In the directory you created the following files and sub directories. For the time being, just leave the .json and .ejs files blank. We'll fill them in a little later. Take a look at the following image to see how your project directory should look.
Note
Note that there is a project boilerplate available for download or forking from GitHub at https://github.com/cardeo/booterator.
This is the root of our project, and here we'll find everything at a high level:
/css: This directory will contain all our custom CSS and the Bootstrap framework CSS files./fonts: This directory will be for holding any web fonts or icon web fonts. The directory isn't totally necessary, but I always include Font Awesome with all my projects so that I have an icon library to pull from./img: This directory will hold all the images for the project. For the boilerplate, we won't actually need any images, but we're setting this up for future projects too./js: This directory will hold any custom libraries and the Bootstrap framework's JavaScript file./partial: This directory will hold the pieces of code that we want to reuse in our templates, such as our header and footer._data.json: This is the file in which we will define any metadata that we want to use in our template. An example of this could be the page title for each web page._harp.json: This is a file for setting global properties, such as the title of the website, which is used on all pages._layout.ejs: This file is the scaffolding for our page. It includes the<head>and<body>sections of our document. At the very least, you need one layout in every Harp project. It is possible to have multiple layouts if you want to load in JavaScript libraries to only some pages.index.ejs: This file holds the actual code for our boilerplate home page. This is the body or content of the page minus the wrapping template pieces that are held in_layout.ejs.
Note
The Embedded JavaScript (EJS) template language is very similar to HTML and is therefore really easy to grasp. The advantage of using EJS is that it allows the use of elements such as variables.
Setting up the CSS
Now that the root of our project is set up, let's set up the subdirectories. We'll start with the CSS directory by adding the following files. Now would be a good time to download the latest version of Bootstrap from http://getbootstrap.com if you haven't done so already. Again, just leave theme.less blank for now.
Within the components directory, create a Less file and name it _variables.less. Leave this file blank for the time being.
Note
Starting a file with an underscore in Harp will mark it as a template file that should not be a straight copy to the production directory. It is file that should be compiled into another to create a full HTML page or CSS style sheet.
Let's quickly walk through the files in the /css directory:
bootstrap.min.css: This is the Bootstrap CSS framework. When you download the Bootstrap package, there are a number of other CSS files. We don't need any of those files; we only need the minified version of the framework./components: This is a directory for storing the Bootstrap component's Less files. If you are customizing a Bootstrap component, you should create a Less file for it and enter the custom CSS.theme.less: This is the master file for our CSS. All our components should be imported into this file so that upon compilation, it will be a singletheme.cssfile for our project.
Setting up the fonts
Bootstrap comes with Glyphicons out of the box, which is fine. I, however, prefer to use font awesome because their license is more flexible. To add font awesome to your project, head to http://fontawesome.io and download the package. Unzip it into your computer after downloading and copy the contents of the /fonts directory to your project's /fonts directory. Next, go to the /css folder and copy font-awesome.min.css to your project's /css directory. For now, that's all you need to do; we'll hook up everything else a little later. The /fonts directory should now look like this:
Setting up the JavaScript
For our boilerplate, all that we need to do is copy bootstrap.min.js to our /js directory. Like the Bootstrap CSS, there are a few JavaScript files included in the download package. You can ignore the other files as we won't need them.
Setting up the partials
The last directory that we need to set up is our partials. If you come from the PHP world, note that partials are includes. They are little snippets of code that are reused across all or many of your pages, such as your header, footer, and navigation. Partials are one of the best features of Harp because you can update these template pieces in one place when changes occur, instead of updating on every page! For now, create two files in your /partial directory, called _header.ejs and _footer.ejs.
Now that we've finished setting up the basic structure of our project, we can move on to actually filling in some code for our .json and .ejs files.
Setting up _harp.json
I'm going to start with _harp.json before _data.json. This is because the first file deals with the global settings for our project. In this case, we're going to use _harp.json to set up a global variable that will map to the website name for our project. Later on, we'll insert this variable into our layout so that it appears on every page of our website. Enter the following code and save it:
What we've done here is set up a global variable named siteTitle and set its value to My Bootstrap Boilerplate. Once we insert this variable into our layout, the title will be shown on every page of our project.
Note
This is only a fraction of what you can do here. Check out http://harpjs.com/docs/development/globals to learn more about globals.
Configuring _data.json
If _harp.json applies to all the pages in our website, _data.json contains page-specific data for our project. In this case, I'm going to set up a variable that can be used to insert the page name for each page of my project:
Here's how this data works:
- The
indexrefers to the name of myejstemplate that I want to target. Currently, we have only one, calledindex.ejs. - The
pageTitleis a variable I created for the title of each of my pages. We'll need to insert this variable into the layout later on. - Finally, I entered a value of
Homefor my variable.
Again, there is more that you can do with metadata in Harp, but at this point, this is all that we need. To learn more about Harp metadata, visit http://harpjs.com/docs/development/metadata.
Setting up the layout
As I mentioned previously, _layout.ejs is the wrapper file for my index.ejs page template. Layouts can be reused, and pages will always default to using _layout.ejs unless you tell them otherwise. If you want to create a second layout for use on a specific page, you simply have to create a new file called something like _layout-two.ejs. Then, in your _data.json file, you have to add a second line to your template declaration that points to the new layout:
