code icon

CSCI 1720

Intermediate Web


Bootstrap

  1. On your external drive, inside your userid.csci1720.net/labs folder, make a new folder named bs-1

    Download the lab’s starter files (bs-1.zip) and save the .zip file in the userid.csci1720.net/labs/bs-1 folder. Extract grid.png, bootstrap.png, and content.html to the bs-1 folder
  2. Launch Brackets. Click 'File' → 'Open Folder'. Navigate to your \labs folder, click bs-1, and click Select Folder
  3. Right-click in the file tree and select 'New File'. Name the file bs1.html
  4. Edit bs1.html: Enter the doctype declaration, the html opening and closing tags, and the head opening and closing tags
setting up HTML document
Figure 2- Setting up the
HTML Document
  1. Save your file
  2. Several things need to be included in the head element of our document:
    • First is the character set declaration
    • Next, a series of meta-elements that include author, description, keywords, and date (these are used by search engines for indexing pages)
Meta-information for the document
Figure 3- Meta-information for the document
  1. Now we need to add the Bootstrap CDN link. Instead of typing it all out, you can go to http://getbootstrap.com and copy the link, pasting it into your document
Copy the BS CDN link
Figure 4- Copy the BS CDN link
...and paste it into your HTML document (after the meta-elements)
Figure 5- ...and paste it into your HTML document (after the meta-elements)
  1. We want to add a link to our custom CSS stylesheet after the BS link
Figure 6- Custom CSS (we'll get to that in a bit)
Figure 6- Custom CSS (we'll get to that in a bit)
  1. We want to use a custom font for our project, so add the following link below your style.css link
Figure 7- Custom Google Fonts, uh, font
Figure 7- Custom Google Fonts, uh, font
If you don’t feel like typing all of that, you can copy and paste the following
<link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet'>
  1. Oh yeah…we need to add a title element
Figure 8- Title element
Figure 8- Title element
  1. That concludes the head element of your document
Figure 9- Lab 2's HTML head element
Figure 9- Lab 2's HTML head element

Content

  1. Now, here’s where the fun begins. Our content. You’re going to create a single page that looks something like
Figure 10- Lab 2 deliverable
Figure 10- Lab 2 deliverable

Figure 10- Lab 2 deliverable

Feel free to refer to Figure 10 as you work your way through the lab. In some cases, what you create may not be exactly like the above screen shot, but it should be close Note, all the text above will be provided to you to copy/paste into your document. Like I said, this is a web design class, not a typing class. Besides, this mirrors real-life, where content is provided to developers by the design team

Content

  1. Now, the thing to understand about frameworks like Bootstrap is that constructing your pages is similar, conceptually, to constructing a table in HTML. We create a series of one or more rows (using class=”row”) and next a series of one or more columns within each. In the above example, today’s lab, we see three rows. The first has three columns; the second, one; and the third, two. The number of columns must add up to 12. So, in the first row, we have three columns, each 4 units wide; the second, one column 12 units wide; and the third, two columns 6 units wide. Gutters (the space between columns) are built in to the framework
Columns in BS can be defined for several different sized displays: xs (extra-small), s (small), md (medium), and lg (large). So we can define different column widths to be used depending on the device accessing the page. For a general use-case, medium works well. For smaller displays, depending on how we define the document’s structure, content will either scale or rearrange itself vertically to fit the display. For today’s project, we’ll keep it simple and specify a medium-sized (e.g., tablet) display that will scale as the display grows smaller
  1. Add an opening and closing body tag below your head element
Figure 11- Adding the body container
Figure 11- Adding the body container
  1. We need a ‘container’ div element
Figure 12- Container for the content
Figure 12- Container for the content
  1. We’ll do a simple header, content, footer structure for this exercise
Figure 13- Basic document structure
Figure 13- Basic document structure
  1. Add a heading one element inside the header element that reads, Welcome to Bootstrap!
Figure 14- Completing the header element
Figure 14- Completing the header element
  1. Since we know we’re going to have a total of three rows, let’s set that up before adding the columns for each row. Place the cursor at the beginning of the <div> class=”row”> line. Highlight down to the beginning of the <footer> element
Figure 15- Preparing to duplicate rows
Figure 15- Preparing to duplicate rows
  1. Press ‘Ctrl+d’ two times (this is a super-cool keyboard shortcut that you may or may not have learned from CSCI 1710. If you have one or more lines that contain the same content, you can set up one instance of the line(s) in your code, highlight those (the) row(s) and use Ctrl+d to duplicate it/them, saving you a ton of typing)
Figure 16- Creating additional rows
Figure 16- Creating additional rows
  1. Now we have the outer structure of our document. So, the first row has three columns nested within it. We’re going to define them as medium, i.e., class=”col-md-4” (remember, 12 divided by 4 gives us 3 - bet you didn’t expect to have to do math, huh?)
Figure 17- First row
Figure 17- First row
It isn’t necessarily necessary to add the comment (<!-- row 1 -->), but in complex documents, it does make it easier to navigate
  1. Add a heading 2 to your row (see below). Now, you can copy and paste the content for each column in from the file content.html (open content.html in NPP - a browser will run all of the content together, which is annoying)
Figure 18- Copy/pasting the content into your first row
Figure 18- Copy/pasting the content into your first row
  1. Our second row, containing the grid picture, is going to span all 12 columns. So the nested div will look like this:
Figure 19- Setting up the second row
Figure 19- Setting up the second row
  1. We want to insert a <figure> element here, with a link to the grid image, grid.png, and a <figcaption>
Figure 20- Adding a figure
Figure 20- Adding a figure
So, what’s going on here? We’ve associated two classes with our image - img-center and img-fluid. img-center is a custom CSS class we’ll define later, but it will center the image in its container, set its min- and max-width, and add a blue border around it. img-fluid is a BS class that will make the image scale to its display size: on smaller displays, it will be smaller; on larger displays, larger
  1. Now, let’s create our third row. We know that it’ll contain two columns, so we’ll nest two columns, each 6 units wide
Figure 21- Creating the third row
Figure 21- Creating the third row
  1. Now you can copy/paste the content from content.html to your columns. Referring to the screen shot below, make sure you set up your links, span, and such
Figure 22- Content for the third row
Figure 22- Content for the third row
    Some things to note here:
  • The first span element is used to make the words “Twitter Blueprint” display in italic
  • Both links have a target=”_blank” attribute. Remember what that does?
  • What does <br> do?
  • The second span element has style='display:block; text-align:right' associated with it. What does that do?
  1. Now, we can complete our footer element
Figure 23- Completing the footer element
Figure 23- Completing the footer element
  1. So let’s save our work in our bs-1 folder as bs-1.html. Then, click 'Live Preview' on the right
Figure 24- Not terribly awe-inspiring, is it?
Figure 24- Not terribly awe-inspiring, is it?
  1. Well, here’s the thing. Bootstrap gives us a lot, ‘out of the box,’ but it doesn’t relieve us of the responsibility for styling our pages. That’s where our custom CSS stylesheet comes in. So, in Brackets, open the provided css/style.css starter file
  2. Complete the comment block
Figure 25- Comment block for style.css
Figure 25- Comment block for style.css
  1. Remember, the /* … */ syntax is how we add comments to CSS. For those of you familiar with Java, C, C++, etc., // doesn’t work in vanilla CSS
  2. Now here are a few ‘rules of thumb’ I try to follow when I’m creating vanilla CSS (as opposed to using Sass, which we’re going to look at later -- a whole different kettle of fish, but awesome!)
  1. I try to put major structural element selectors -- body, html, header, footer, etc. -- first
  2. Everything else, I try to arrange in alphabetical order (which often means cutting and pasting, since the need to style elements doesn’t always present itself alphabetically). But on down the road, it makes it easier to find selectors that need to be changed
  1. So, let’s start populating our custom CSS file so that the end result will display the way we want it to
  2. First, the body selector and .container class (you don’t have to add the comments. I put them there to tell you what each one does). After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 26: the body selector and .container class
Figure 26: the body selector and .container class
  1. Now, the header and footer elements (again, feel free to NOT type in the comments. They’re there for your benefit) After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 27- Rules for both header and footer
Figure 27- Rules for both header and footer
  1. Now, we want some of the rules for the footer element to be different, e.g., the height. So by re-declaring the footer selector, we can set up rules for the footer, specifically, that will over-ride the above rules. After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 28- Footer override rules
Figure 28- Footer override rules
  1. Now, let’s make the blockquote more distinctive. After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 29- blockquote rules
Figure 29- blockquote rules
  1. Now, the figure and figcaption selectors. After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought… [I’m really liking the word ‘wrought’ 🙂]
Figure 30- Styling the figure and figcaption selectors
Figure 30- Styling the figure and figcaption selectors
  1. Let’s add a little white space above h2 elements (remember: white-space == good!). After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 31- Adding white space above h2 elements
Figure 31- Adding white space above h2 elements
  1. Now, we need to define a class that allows us to (selectively) center images -- and wrap them in a blue border (remember that the box-sizing: border-box property/value rule makes the element’s display width a combination of its content, padding, and border properties (margin is still added to the overall width). After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 32- Class for images that centers them and adds a border
Figure 32- Class for images that centers them and adds a border
  1. Finally, a little fine-tuning. After you’re done, save your changes, return to the browser, and reload/refresh the page to see what your changes have wrought…
Figure 33- Adding indentation to paragraphs and underlining to rows
Figure 33- Adding indentation to paragraphs and underlining to rows
  1. One of the neat things to be aware of, when using frameworks, is that the framework gives you a starting point that you can then modify to meet your requirements. For example, go back to your style.css page. In the header, footer rule, change the background value to #041E42 and the color value to #FFC72C. Save your changes, return to your browser, and refresh the page
  2. Now that we’ve completed our CSS over-rides, save all of your work. Log in to your csci1720.net account (userid.csci1720.net) using FileZilla (host: csci1720.net; userid: etsuid; password: *********)
  3. Double-click on your labs folder
  4. Right-click in the whitespace in the lower-right pane and select Create new directory and enter it
  5. Name your new directory bs-1
  6. From left to right, copy your files and folders -- bs1.html, css, and image -- to your /labs/bs-1 directory
  7. Return to your browser and open a new tab
  8. The URL for your new page will be:

    http://your_id.csci1720.net/labs/bs-1/bs1.html
    for example:
    http://ramseyjw.csci1720.net/labs/bs-1/bs1.html
  9. After entering your URL, hit ‘Enter’. Admire your work
  1. When all is well, copy the URL of your HTML file to a new text file in NPP. Save the file as bs-1.txt and upload it to the D2L BS 1 folder.

Have a nice day 🙂