Matt Lambert

Check out my blog, or sign up to receive articles by email.

Bootstrap Site Blueprints 2 sample content

By admin on December 16th, 2015 in Updates

We’re getting closer to the launch of my new book Bootstrap Site Blueprints 2! In the coming weeks the book will be available in print and eBook format in a number of locations. To tide you over, I’m releasing a portion of the first chapter today on my blog. This chapter explains how to setup a development environment for Bootstrap website projects. If you have any questions, feel free to leave a comment at the bottom. Please keep in mind the book is still in final edits so the content may still change a little bit.

Advanced Bootstrap Development Tools

Although Bootstrap is the most popular CSS framework on the block, which polarizes web developers of all skill levels, one of the main complaints against it is that it’s too large and hard to use. The primary goal of this book is to give you an advanced set of tools to make building websites with Bootstrap easier and even enjoyable. We’ll start out by showing you how to create a development environment and workflow that is easy to set up and reuse in all your Bootstrap projects. From there on, we’ll tackle a number of common website designs to get you comfortable with the advanced techniques. Finally, we’ll include some JavaScript libraries and really take our Bootstrap projects to the next level. Sit back, fire up your code editor of choice, and get ready to dive into some advanced Bootstrap blueprints. In this chapter, you’ll learn:

  • How to create a development environment with Harp.js
  • How to run a localhost server with Node.js to preview your project
  • How to write templates with EJS and use variables and partials
  • How to set up your theme with Less in the most efficient manner
  • How to compile your project for production

Theming is hard!@

I won’t lie. Bootstrap theming can be really challenging. There is a large library of components that take some time to understand, and learning the best ways to customize them also takes time. But what if there was an easier way? I’m happy to say that I’ve designed a workflow using some modern frontend development tools that make it much easier to work with Bootstrap. The problem with frontend languages such as HTML and CSS is that they lack some core programming features, such as variables and includes. Thanks to tools such as Less for CSS and Harp.js for templating, these missing features are now available for building static websites.

Harp.js – the static web server with built-in preprocessing

The title says it all, and it is taken from the official harpjs.com website. Harp is an open source project from some of the same people who brought us PhoneGap, and it is my tool of choice for any static website project I work on. Why is Harp so great? Here are just a few reasons:

  • It includes automatic preprocessing of languages such as EJS, Jade, Markdown, CoffeeScript, Less, Sass, and Stylus
  • Harp converts the aforementioned languages into vanilla HTML, CSS, and JavaScript and feeds it to the browser
  • It allows powerful templating through the use of common layouts and partials or includes for PHP people
  • It includes a lightweight web server that compiles your code in the background for quick and easy testing
  • It passes in custom metadata through JSON to save your time
  • It compiles all of your code into production-friendly files that you can deploy on your server

Creating a development environment

Everything that I outlined earlier basically creates a development environment for your Bootstrap websites. The advantage of using a development environment is that you can use tools such as Harp to make your website development faster and easier. It provides you with a working copy on your local computer, and you can use that copy to develop your projects. When you’re done, you can compile it into the production version and deploy it on the Internet. It’s a good idea to get into the habit of creating a development environment because it’s a better coding practice and makes it easier to maintain your project in the future. This is because the production code is totally separate from the source development files. Running a localhost server for testing also allows you to build new features without having to worry about negatively affecting your live production website.

Installing Node.js

The web server that is built into Harp runs on Node.js. Therefore, you will need to install Node on your computer before you can set up Harp. If you don’t have Node already installed, head over to the following link to download the version you need:

nodejs.org/download

Once you’ve downloaded and installed Node, you’ll have to open and use the command line to test the installation. If you’re on a Mac, I’d recommend that you use the terminal or an app such as iTerm to access the command line. If you’re working on Windows, you can use Cygwin. Once you’ve opened up your command-line app, type in the following line:

$ node -v

If you have installed Node correctly, the number of the version you have installed should be printed on the terminal. You should see something like this:

$ v0.10.33

Great! Now we can move on to installing Harp.

Installing Harp.js

Actually, setting up Harp.js is really easy. If you have closed your terminal, open it again. Insert this command if you’re on a Mac:

$ sudo npm install -g harp

If you’re on Windows, use the following command:

$ npm install -g harp

After you execute this command, you should see a bunch of packages being installed in the terminal window. Once everything stops loading, Harp is installed. To verify that it has worked, enter the following in the terminal and hit Enter:

$ harp version

This should give you the version number, which means that Harp was successfully installed.

Since Less preprocessing is included with Harp, we don’t need to install anything special to use Less. This is great news, because we don’t need to rely on less.js or a standalone compiler app. Once we compile our Harp project and run the web server, any changes to Less files will be picked up automatically. For now, just celebrate, and we’ll cover compiling Less in more detail a little later.

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

Screen Shot 2015-12-16 at 11.25.31 AM

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.
That brings the sample content to an end. I hope you enjoyed reading this portion of the first chapter. The book will be released in a couple weeks at which time I’ll be offering a launch discount to my email list members. Sign up now near the top of the page so you don’t miss out!
Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.