LD12: Using BootStrap due Thu 30 Nov 13:20

Preparation for Lab Day

1. In your workspace create a directory named hw12 and work in it.

2. Visit the bootstrap website (http://getbootstrap.com/) and copy the starter template (found in the Introduction section) into a new HTML document called bootstrap.html.

3. Visit your poemlayout.html document from hw03 and copy the contents of the body into bootstrap.html. Also, copy the poemlayout.css document into hw12. (Also copy the logo file if you have one). Add a link to bootstrap.html to include this CSS document AFTER pulling in the Bootstrap CSS document.

4. Remove all commands from hw12/poemlayout.css that involve positioning, margins, padding, floats, and width commands. Also remove the box-sizing commands because bootstrap is doing that for us now. (i.e., remove all CSS commands except for your color scheme!)

5. Our eventual goal is to get bootstrap to produce a responsive design similar to our target found here: responsivelayout.jpg. NOTE: For this lab day assignment you will be making wireframes showing column counts for each row in each of the three sizes/layouts (based on Bootstrap's responsive grid scheme).

6. Take a look, again, at the basic design we will be moving towards. Rather then depending on the exact percentages to guide our design, though, we will “bend to the framework” and view it as a 12-column layout. For example, if we want two panels to be 30% and 70% wide, respectively, then we consider that 30% of 12 columns is 3.6 columns. So, we'll leave 4 (or perhaps 3) columns for the 30% panel with the remaining 8 (or 9) columns for the 70% panel.
7. On paper, draw a new set of diagrams that show the large, medium, and small wireframes but with the number of panels to be reserved for each set of elements. Bring your paper with you to lab day.

On Lab Day

1. Begin by showing your modified diagrams and your bootstrap.html document to the instructor.

2. Recall that bootstrap is designed as a mobile-first framework. So, begin by adding the necessary HTML divs and bootstrap classes to generate a responsive layout that properly renders the small layout.

3. Then continue your modifications until transitions between the small and medium layouts.

4. Then continue your modifications until transitions between the large and medium layouts.

5. Now, replace the menu with one of the bootstrap navigation stylings. See: https://getbootstrap.com/docs/5.1/components/navs-tabs/ for some ideas abouts moving from a vertical to a horizontal arrangement.

6. Show your work to the instructor. If you finish early you can start work on the homework assignment.