webMapWorkshop-logo-01

Using Bootstrap: Website Frameworks and Templates

Prerequisite: Websites Part 1 - Introduction to Web Pages, HTML, and CSS


Download the Workshop Materials. This is Session 2.


This session builds on the concepts introduced in Intro to Websites (HTML/CSS) and focuses on a different angle of utilizing frameworks and templates to get you started, how to customize them by changing CSS, what is javascript and how to reference a library, and use what is called an IDE. We will continue with the concept of building an online portfolio page, using these additional technologies to build a rich, highly stylized web site for our portfolio, yet create a new page.

Before getting started download the materials. They contain a template provided for you, we will use this folder to build out our website.

1. Templates and Frameworks

When developing a new web page, the best way to get ideas and learn is to look at other web sites and find things that inspire you. Look for page layouts, colors, interactivity, and structures you like, and note them for inclusion in your site. There is often no reason to reinvent the wheel, and for many tasks and layouts, templates will exist that you can download, modify, customize, and make your own. Most of them are even available open source at no cost. Templates provide code for you get started on your page. Frameworks are templates that provide the code for common components and tasks that users will want to complete on your website. Templates and frameworks are designed to be a base for you to modify and build on.

A couple template galleries:

(Many more exist, just get on Google!)

The Bootstrap Framework

The framework we are going to focus on today is called Bootstrap. Bootstrap is a website framework built with HTML, CSS, and Javascript. A framework means that many page elements, common functions, and foundational components are already created for you to use and customize. You can use the pieces of the framework and customize the pieces and components for your own page, and even create your own. The components can be customized using HTML, CSS (for styling), and Javascript (for functionality, ie what happens when you click on something). Bootstrap was developed by Twitter, and is one of the most common frameworks for websites on the web today. More reading on Bootstrap, including lots of examples, can be found on the Bootstrap homepage.

Why Bootstrap?

Why are we focusing on Bootstrap? One of the most important is that Bootstrap is designed to be friendly on mobile, meaning your site will resize to be viewable on mobile devices. Another is that Bootstrap has an excellent grid system that allows us a nice ability to layout our site into columns and divisions. The grid system uses the div element (remember, these are containers for the elements on our page), and arranges them into rows. More on the grid system: http://getbootstrap.com/examples/grid/

The components provided by the Bootstrap framework and templates are on the Bootstrap components site, note that there are tables, dropdown menus, panels, dividers, and more. Don't worry if this is confusing or there are words you don't understand, we are just getting started. The point is to notice the HTML, you will recognize some elements!

i. Download a Bootstrap Template

This will all make more sense if we look through a template. Our first step will be to download a Bootstrap template, load it in our working space, and explore the code. Two recommended sites for Bootstrap templates are:

Today we are going to use a template found on StartBootstrap called 3 Col Portfolio. The files are included in the tutorial materials in a folder named startbootstrap-3-col-portfolio-1.0.2. The template looks like the following, which will be great for our site.

three-column-template

Right now, it is full of placeholders and default text. We can customize just about everything and populate it with our materials.

An Overview of the Materials Package

In the materials package, you will find the following folders and files. Keep them all in the same directory.

  • css: Folder containing stylesheets for our site.
  • js: Folder containing JavaScript used on the site.
  • fonts: Folder containing special fonts for our site.
  • images: Folder containing images for our site.
  • custom-sample.css: A sample of the custom css code created in this tutorial.
  • index.html: Our template index.html. Use this for the tutorial.
  • index-sample.html: A sample of what the index.html will look like when completed.
  • LICENSE: The use license for our template.
  • README: A read me on the materials.

ii. View the File Structure

As we learned in Code your First Website, when you navigate to a webpage, you browser requests an index.html file, and there will be other files and folders on the server that contain items our website will use, such as images and CSS. Opening up startbootstrap-3-col-portfolio-1.0.2, you will notice a familiar structure... it is just a basic webpage!

bootstrap-file-structure

Test it out. Open index.html in a web browser and observe our template. This is being created from nothing but the files in our folder.

iii. View the Code

To investigate further, open up the index.html file in Sublime Text (or your text editor of choice). It is a HTML file, with tags, elements, style, and various links to other components. Notice the head, body, img, and div tags, among others.

index-html-screeny

Given that we have all the source files for this template, lets customize this to make it our own, adding our own images, text, and colors, along with any other additional flair we care to include.

2. Prepare for Editing

To edit our templates, we can open and change the code in our text editor (Sublime Text, Notepad++, etc.), save our file, then view locally in a web browser to see our code changes. This process will work just fine for our customization. There is web development specific software that exists, such as Adobe Dreamweaver and Microsoft Expression, that is designed to help streamline this process and allows us to see everything in a single comprehensive package. The following steps detail working with Adobe Dreamweaver, which provides a What You See Is What You Get (WYSIWYG) interface that will let you view the location and style of elements on your HTML page in real time. A tip up front, never modify the elements in the visual editor, change the code and see what it does visually.

Edit Code Visually in Adobe Dreamweaver

These steps assume Adobe Dreamweaver is installed on your machine. If not, use Sublime Text to make the changes to the code. To start, start Adobe Dreamweaver on your machine. When the program has started, navigate to the menu and select Site -> New Site.... In the dialog, name the site "Portfolio", and set the Local Site Folder to be startbootstrap-3-col-portfolio-1.0.2, the template we downloaded in the tutorial materials.

Locate the Files explore for your site, it is simply a map to your website folder, and double click on index.html to open it.

dreamweaver-file-structure

You will see our template appear within the Adobe Dreamweaver interface. It will have a split screen, with code on the bottom and a visual editor on the top.

dreamweaver-interface

Modify the code on the bottom, and see how it changes the top. This can be a great way to learn HTML!

Local and Network Files

The concept of local and network files is an important one when working with webpages. The goal is to never, ever edit the document you have live on your server. The reason for this that if you break something or make a change that does not work, you actually break your live website. For this reason, always work on your files locally, and when you are ready and satisfied with changes, put those files to your server.

Using a Text Editor

To complete this process using a text editor, simply keep a carbon copy of your website in a folder on a local drive. Make changes in your text editor, save, and view the changes by opening your document locally with your web browser. This will work for most components of simple static sites. You can also set up a localhost server. A localhost server is a folder that broadcasts as if it were on the internet, but is only on your local machine. There are a handful of option for doing this. If you have python on your machine, a good tutorial for doing this located here.

When happy with files, copy and paste them from your local folder to your actual web server.

Using Adobe Dreamweaver

We just set up the location of our local folder when we created our new web site project above. In order put items on our actual web server when complete, we can set up Dreamweaver to access our web folder, then tell Dreamweaver to put our files when we are ready.

In the Files browser, click on Connect to Remote Server. Click on the + to add a new location. This can be your Athena Space (local/network), an FTP (if you are using outside hosting), or a few other options. Enter your credentials to connect, and navigate to your web folder containing your documents. Now, when you click the up or down arrows in the Files browser in Dreamweaver, it will transfer copies between your local and server folders.

remote-server-dreamweaver

3. Edit our Template

With a editing plan determined, and working within our website folder, we can now begin editing our code and seeing the changes to our template. Lets begin doing by customizing of our HTML to include our content, then setting up a CSS file that will hold our styling properties.

i. Customize the HTML

Customizing our HTML involves running through our code and observing the structure. Scan through and note the head section, body section, and various elements on the page. Note where the rows of images appear in our code (div class="row"), along with the navigation bar (navbar), and the various headings and paragraph tags. Lets modify some of the following to include our content. We have three images in our images folder in the materials we would like to turn into the first row of our portfolio, and we can get rid of the rest of the rows.

a. Change the title and navigation bar

Locate the title tag within the head part of your page.. Change this to state that it is your portfolio (ie "Mike's Portfolio").

<title>Mike's Portfolio</title>

Scan down to our body, here you see a number of items. The navigation bar, at the top of the bootstrap page, falls after the <!-- Navigation --> comment in our code. Here, locate "navbar-brand", it will look like the following, and change it from Start Bootstrap to Your Portfolio Website.

<a class="navbar-brand" href="#">Mike's Portfolio Website</a>

There are a handful of navigation links in our header (About, Services, and Contact) in a div with the id="bs-example-navbar-collapse-1". We can change these to be what we want, and eventually link to other pages on our site that contain this content. The block looks like the following. I changed mine to say Maps, Resume/CV, and Contact.

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li>
            <a href="#">Maps</a>
        </li>
        <li>
            <a href="#">Resume/CV</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</div>
<!-- /.navbar-collapse -->

Click save and refresh your page (of if you are in Dreamweaver, observer the changes). Not much changed, but we have customized the text on the header and navigation bar to work with our desired page.

new-navbar

b. Customize Page Content: Header and Projects

In the next section of the body HTML code, you see a comment that says <!-- Page Content -->. This signifies the start of the code for the page content, which includes our page heading and secondary text, and the rows of projects and images that we see on the page. The page content is all located within a single div element of class="container". Within this div, there are all the elements, including nested divs, a tags, headings, paragraphs, images, and more.


Page Heading

Locate the <!-- Page Header --> comment. This signifies the location of our header. The page heading is contained in an h1 tag with the class="page-header". Change Page Heading to be your Name, and then modify the small Secondary Text to say Urban Designer and Planner

<!-- Page Header -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Page Heading
            <small>Secondary Text</small>
        </h1>
    </div>
</div>
<!-- /.row -->

Save and view your changes, your page will look something similar to the following.

header-change

Projects and Images

Locate the next comment, <!-- Projects Row -->. In our template, this is where the rows of images and projects are located. Note there are three rows of projects, so this comment and the following code is repeated three times. Edit the first one, it is the one that appears at the top of our screen. Lets add change the images to be the images found in our tutorial material package in the image folder, and adjust the name of the projects. Our goal will be a project row that looks like the following.

project-row

Observer, copy, and paste the following code in place of your first projects row. Make sure to get the whole thing, and not miss any tags, this might break the code. Make sure the images folder is in the same folder as your index.html document. Note the modified img tags, and edited h3 and p elements. These are referring to the images in the images folder, and modifying the headings and text.

<!-- Projects Row -->
<div class="row">
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/boston.jpg" alt="">
        </a>
        <h3>
            <a href="#">Welcome to Boston!</a>
        </h3>
        <p>Boston is the capital and largest city of the Commonwealth of Massachusetts in the United States. Boston also serves as county seat of Suffolk County.</p>
    </div>
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/mit.jpg" alt="">
        </a>
        <h3>
            <a href="#">Massachusetts Institute of Technology</a>
        </h3>
        <p>The Massachusetts Institute of Technology (MIT) is a private research university in Cambridge, Massachusetts that stresses laboratory instruction in applied science and engineering.</p>
    </div>
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/cat.jpg" alt="">
        </a>
        <h3>
            <a href="#">Grumpy Cat</a>
        </h3>
        <p>This cat is grumpy.</p>
    </div>
</div>
<!-- /.row -->

Note we are using alot of placeholders. All of the Project Rows contain a href="#" tags that are links. We can change the "#" to be the URL for another page, and we can link to them from our project listings.

Delete or populate the other project rows code blocks with content of your choice.

The next section is called <!-- Pagination -->. We aren't going to utilize this component, but if we had multiple pages of projects, we can organize them into separate pages set up links to those here. Delete this div from the code.


Footer

Towards the end of the document, our page contains a footer. It commented with <!-- Footer -->. Change the Your Website text to state your name.

footer

Javascript: JQuery and Bootstrap Core

Finally, at the end of the body tag, you will two lines of code with script tags. These import Javascript files from a location on our server, or a location on the internet. When we downloaded our template, these files were included in the folder called js. Bootstrap is driven by Javascript, a scripting language that increases the functionality of your site. For example, it can add interaction, such as popups, dropdowns; it can add 'events', such as what happens when you click; and loading of outside content, such as data, into your HTML code. The following lines import Javascript libraries into our document so that the website can use them. Javascript libraries are collections of functions and events.

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
  • JQuery: JQuery is a Javascript Library for event handling, animation, and document manipulation. Read about it on the JQuery homepage.
  • Bootstrap Core: Bootstrap Core is the Javascript Library that defines the bootstrap elements, such as the grid system, what the classes mean, and how the site responds when the screen is resized. Read more about it on the Bootstrap Javascript homepage.

Importing these libraries using the script tag the link to their locations allow us to use all of the features of the libraries in our website. Many mapping libraries are in Javascript, we will revisit this later.


Our Page

Save all of your modifications to the index.html. Remember, syntax is important! Make sure every tag has a start and end, and that images are linking to the proper location. Our page, with minimal styling, looks like the following.

after-html

ii. Style our Site: Edit the CSS

Next we can change the color and layout of the items on our page by editing the Cascading Style Sheets (CSS). When we download the Bootstrap template, it includes two CSS files, one is the Bootstrap CSS document, which styles the Bootstrap components, and the other is the Template CSS file, in our case 3-col-portfolio.css.

These CSS files are imported into our document in the head section with the following code. These are found in our file structure in the css folder.

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">

It is not recommended to modify the default Bootstrap CSS, so we are going to create a new CSS document for our custom styling.


a. Create and import a new CSS document

Again, modifying default documents is not recommended, best practice is to use a unique CSS style file custom to your site. The way the browser reads your file is from the top down. If there are duplicate lines of CSS, the last one the browser reads on your site will be the one used to style our elements. Therefore, we should create a new CSS file and call it custom.css. More reading on this here.

  • In your Text Editor (or Dreamweaver), go to File -> New and create a blank CSS document.
  • In that blank document, copy and paste the following CSS code. It will style some of text, including the headers, and change the color of our links.
  • /* Body Styling properties example */
    body {
    	font-family: Garamond, ‘Book Antiqua’, Palatino, serif;
    	font-size: 16px;
    }
    
    h1 {
    	font-style: oblique;
    	font-size:48px;
    }
    
    h3 {
    	font-family: 'Franklin Gothic', sans-serif;
    	font-size:24px;
    }
    
    a {
    	color: #34576d;
    }
    
    a:hover {
    	color: #333333;
    }
  • Save this file as custom.css, and make sure it is saved in the css folder along with the other CSS files.
  • Import your custom.css document into your HTML. Use the following line of code in the head section of your document. Make sure you place it AFTER the other imported stylesheets.
  • <link href="css/custom.css" rel="stylesheet">

In our head section, our code for the CSS looks like the following:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Save and refresh your page in your browser. The styling elements, properties, and values set in custom.css document will have been applied to our index.html. Adjust these and save again to view the changes.

Our Page

first-styling

b. Style the Navigation Bar

In order to style our navigation bar, we need to adjust the Bootstrap CSS. We will do this in our new custom.css file to not modify the default Bootstrap CSS file.

Use browser Developer Tools to locate the element we want to customize

In Firefox or Chrome (not Internet Explorer please!), refresh your site, and then right click on the name you gave your site in the navigation bar. Mine was "Mike's Portfolio Website". When you right click, select Inspect Element. The browser developer tools will appear. Note the box on the right, it is CSS!

developer-tools-highlighted

The color of the text in this location is under the selector .navbar-inverse .navbar-brand. Double click on the color value, which is currently #9d9d9d, a medium grey. Let's make this text white. Adjust the color to be white by using the hex color code: #ffffff. The brand text changes in our browser window to white. This change is not permanent however, if we refresh it will return to what the server is sending it.

More reading on the browser developer tools.


Incorporate the Nav Bar change into your custom.css

If we want to make this change to the header on our site, we need to add this selector, property, and value to our custom.css. In your custom.css, add the following line of code.

/* Navigation Bar styling */
.navbar-inverse .navbar-brand {
	color: #ffffff;
	font-size: 28px;
}

Save the custom.css document, and refresh your index.html. Note the change to your navigation bar.

updated-brand

Continue customization of your navigation bar

The following code snippet will change the color of our header, and then add a drop shadow. Copy and paste the following into your custom.css. Place it after the .navbar-inverse .navbar-brand selector.

.navbar-inverse {
	background-color: #34576d;
	border-color: #666666;
	-moz-box-shadow: 2px 2px 7px #000;
	-webkit-box-shadow: 2px 2px 7px #000;
}

.navbar-inverse .navbar-nav>li>a {
	color: #ffffff;
}

.navbar-inverse .navbar-nav>li>a:hover {
	color: #999999;
}

Save your CSS document and refresh your browser to view the changes made by the CSS styling. Use the references let you know how to signify a selector, and then what properties and values are available for your customization. CSS references can be found at the following links.

Our Customized Page

customized-page

Put your webpage on your webserver

Save all of our files, making sure everything has stayed in the same directory. To make our website live, we have to put all of our documents, HTML, CSS, and Javascript, into our web folder that is serving to the internet. If you are using Dreamweaver, 'put' your files to your server. If you are using another text editor, use your FTP to place your files in your server folder. Instructions on connecting to FTP can be found here.

4. Whats this Javascript Business?

Above, we discussed how the Bootstrap framework and templates are built with HTML, CSS, and Javascript. We have gotten dirty with HTML and CSS to customize our page, but what about Javacript? We did not modify the Javascript in this exercise, but it is driving Bootstrap behind the scene. Remember, the Javascript libraries are imported at the bottom of the body section of our HTML code.

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

Modifying and customizing the Javascript on this website, or including other Javascript Libraries, can add additional functionality. This functionality includes what happens when we click on buttons, add animations, populates and changes code on the fly, and can load data and other outside information on to our webpage through the use of APIs and functions. Javascript will be covered during Part 4 of the Web Map Workshop series.

Let's make a map already, huh?!

Another question you might be asking, what does this all have to do with web mapping? The online mapping libraries we are going to use in subsequent sessions are built on Javascript, and incorporated and styled into our websites using HTML and CSS. We will introduce Javascript in the next session by utilizing a Javascript mapping library to add maps to our webpages, then expand upon it the session after, teaching fundamentals and concepts.

The map div element

Our web map will sit within the structure of our web page in a div element, we will call it the map div. This div element, like all other page elements, can then be styled, manipulated, and displayed. All of the content and functionality in the map will be specified using JavaScript. We will use a mapping library written in Javascript called Leaflet to perform all kinds of operations on this div element, including loading, displaying, and manipulating data, and use other elements on our page for contextual information and to control the map.

Next week: we move on to web mapping! We have learned some basics of websites, now its time to talk about how to turn one into a map. We will introduce the concepts and fundamentals of web maps, then walk through the creation of a basic Leaflet map, adding data and some interaction.

Ultimately, in the end, we will wrap this all together, and incorporate a rich, interactive web map right in to our web page! Next week, the lay of the land... and your first web map.



Return to DUSPVIZ tutorials page