Lambert Bootstrap Site Blueprints Volume II

Maximize the potential of Bootstrap for faster and more responsive web applications
1. Auflage 2025
ISBN: 978-1-78528-491-5
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 328 Seiten

Bootstrap 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.

Autoren/Hrsg.

Lambert, Matt

Fachgebiete

• Mathematik | Informatik EDV | Informatik EDV & Informatik Allgemein

Leseproben

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 and 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:

• : This directory will contain all our custom CSS and the Bootstrap framework CSS files.
• : 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.
• : 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.
• : This directory will hold any custom libraries and the Bootstrap framework's JavaScript file.
• : This directory will hold the pieces of code that we want to reuse in our templates, such as our header and footer.
• : 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.
• : This is a file for setting global properties, such as the title of the website, which is used on all pages.
• : This file is the scaffolding for our page. It includes the and 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.
• : 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 .

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 blank for now.

Within the components directory, create a Less file and name it . 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 directory:

• : 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.
• : 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.
• : 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 single file 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 directory to your project's directory. Next, go to the folder and copy to your project's directory. For now, that's all you need to do; we'll hook up everything else a little later. The directory should now look like this:

Setting up the JavaScript

For our boilerplate, all that we need to do is copy to our 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 directory, called and .

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 and files.

Setting up _harp.json

I'm going to start with before . This is because the first file deals with the global settings for our project. In this case, we're going to use 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:

{ "globals": { "siteTitle": "My Bootstrap Boilerplate" } }

What we've done here is set up a global variable named and set its value to . 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 applies to all the pages in our website, 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:

{ "index": { "pageTitle": "Home" } }

Here's how this data works:

• The refers to the name of my template that I want to target. Currently, we have only one, called .
• The is 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 for 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, is the wrapper file for my page template. Layouts can be reused, and pages will always default to using 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 . Then, in your file, you have to add a second line to your template declaration that points to the new layout:

{ "index": { "pageTitle": "Home", "layout": "_layout-two" ...

Über Autor(innen)

Lambert Matt :

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.