Bootstrap

Bootstrap is a HTML/CSS/Javascript framework for designing websites and web applications. Using Bootstrap saves time and effort because common parts of a web site – navigation, buttons, colors, boxes, grids – are all pre-built, but also customizable. Its “mobile-first, responsive design” framework allows you to make websites or web applications that look great on a phone, tablet or desktop. While Bootstrap is only one of many frameworks available, it is very popular one.

With the lesson we return to the teaching method of Tutorial > Practice > Mastery.

Tutorials

• Throughout this lesson, we will extensively refer to the Bootstrap documentation.
• You should also go through the first part of the Tutorial Republic’s Tutorial Republic’s Bootstrap 5 tutorial starting with “Bootstrap Introduction” through “Bootstrap Responsive Layout” – before jumping into this week’s Practice lesson. You are free to go through the rest, or come back to specific tutorial pages as needed.
• There are other tutorials if you are interested, like W3 Schools’ Bootstrap 5 Tutorial or the video-based Net Ninja Bootstrap 5 Crash Course Tutorial.

Goals for this section

We will:

• Discuss the benefits of using a mobile-first framework.
• Add pre-built components like navigation, etc.
• Use Bootstrap’s grid-system to create a responsive website.
• Introduce Sass/SCSS for customization.

Tip

There is a screencast of this lesson with explanations in Canvas under Panopto Video. Look for Bootstrap practice lesson.

Create your project and Github repo

We’ll take some leaps of faith and create our project and get all our files, so we have something to talk about within the lesson.

1. Create a new folder in your icj/ folder called yourname-bootstrap.
2. In VS Code, open a new window and open your new folder.
3. Open the Integrated Terminal.
   • Run degit utdata/icj-bootstrap-template to download the files.
   • Run npm install to install the node packages.
   • Run git init to intilize git.
   • Run git add . to add the files.
   • Run git commit -m "first commit" to commit the files.
4. Go to Github and create a repository of the same name. Use the git remote add command to connect your repos.

The project already has README.md and .gitignore files, but you should update the README with information specific to this assignment.

1. Edit the README file by adding a new section at the top with your name and the date you started the project. Note it is a Bootstrap 5 class project.

Important

When running npm install or when viewing your project on Github, you will see warnings about outdated packages and dependencies. These will not affect our work on this project.

Review the template files

This project is similar to the Sass template in that it uses the Node development environment. There are a couple of differences so we’ll review the files.

The docs folder

The docs/ folder is where all our finished site files go. It is the folder that will be read by the web server.

Warning

DO NOT EDIT FILES IN THE DOCS FOLDER!!! All the files in docs/ get regenerated when you are running gulp dev.

Most web apps like this will use a folder called dist/ or public/ for their published files, but we are using docs/ to take advantage of some free web serving services offered by Github.

Inside our docs folder, you will eventually see the following:

• A css/ folder with all our compiled css. We won’t edit these files, because we will be using Sass and editing from the src/scss/ folder.
• A js/ folder. There are some Node.js server tasks that will copy files here for us.
• An index.html file. This is the HTML page we will be building, but we will will be editing it from the src/ folder.

The src folder

This is where we edit our files. Any change we make here gets compiled or copied into the docs/ folder by our Node.js server.

• Our .html files sit loose in the src/ folder (or put into subfolders). These get copied into docs/ in the same relative location.
• The img folder is for our original image files. They get “minified” and placed in docs/img/.
• The scss folder has styles.scss file were we will add all our Sassy css.

When we run gulp dev we also launch a live server that will rebuild our project when we save our source files.

Inspect the html file

While we are in our src folder, let’s look at our HTML.

1. Open src/index.html and take a look at it.

There are several things going on here with this file beyond the base HTML. In the <head> we are pulling in css file that will be generated through Sass, including for the Bootstrap framework. At the bottom we are pulling in the JavaScript file that we need for Bootstrap, which will also be copied there by our development environment.

Inspect the scss file

1. Open the src/scss/styles.scss file

You’ll see a lot of comments in this file to explain some things. There is an @import command here that pulls in all the Bootstrap css from our node_modules folder that we downloaded when we ran npm install. You don’t see the result yet on our index page, but you will soon. There are also some comments to guide you.

Inspect the configuration files

The remaining files in the root level of the project are configuration files that help make this development ecosystem run.

• The .gitignore file. It’s configured for a Node.js based web app.
• The README.md file explains how to get started with this template.
• The gulpfile.js is our magic task runner. More on that below.
• The package.json and package-lock.json files keep track of all the npm packages we are using. When you run $ npm install, it downloads all the software into the node_modules folder, which is NOT saved into Github because it contains thousands of files.

More about the gulpfile

Gulp is our task runner that creates our server, compiles our CSS and copies files where we need them. The gulpfile.js is the main controller file works works with a series of files in the tasks folder.

Each task file does a single thing, like clean out folders, copy files to different directories, or run the Sass CSS compiler. Each task uses one or more node packages to do its work, and the names of the file indicates more or less what that is. We might review some of these in class and you are free to poke around there, but I’d be careful in editing these files at this point.

This setup gives us the two commands that we will use the most:

• gulp will compile our CSS and copy all our files into the docs/ folder.
• gulp dev will do all of the above, plus start our web server so we can see our page.

I can tell you I did not write all this JavaScript. I found examples on the web that were close to what I needed and I used those, along with documentation, to configure them for my needs.

Launch

Let’s run it and see if it works.

1. In your VS Code Terminal, do this:

   gulp dev

With any luck http://localhost:3000 will load up in the browser and you’ll see some dummy text “Testing: 1, 2, 3, 4” on your screen. This means everything should be good to go.

Congrats! You are now ready to get down to business and build a website.