Lab - Responsive Branching in Week 07

Objectives

• moar CSS Grid
• dark mode
• git branching

In this week’s prep, you completed a responsive grid design that uses two “breakpoints” to distinguish three layouts for a page. In this lab, you will continue with the same code base (but you should start from our version…), but you will work in pairs 🍐🍐 (see below for specific instructions on collaborating). One partner will add a new tiny mode to the grid, while in parallel the other partner will add dark mode 🦇.

Pairing

1. accept the github classroom assignment linked from your canvas course
   • in doing so, tell github classroom that you’re in a group with your neighbor
   • If your instructor doesn’t do things that way ⬆️, (because if they do, you’ll need to start with the github repo provided there to be linked up correctly to their roster and everything) you may want to start by visiting this repo and choosing Use this template.
2. both you and your neighbor: clone the repository to your local machines
3. Make a branch that you name as your EID, so like mine will be named stewarmc
   • you are both doing this on our own computers, so you will each have the main branch you cloned and then 1 more branch, named for your own eid
4. (each of you) Push your new branch to the github repo in a remote branch with a matching name
5. Assign one partner in the pair to the Tiny Grid task below, the other to the Dark Mode task below
   • Each of you complete your task in your own branch and commit the changes to your branch and push your branch to github.
6. When you’re done, work together to merge the branches into main on one of your computers, then push the code to main in the remote repository.
7. Submit however your instructor requests, one way that might be common is to get the commit URL from the preceding step (it might look like https://github.com/SOMETHING/SOMETHING-ELSE/commit/LONG_HEXADECIMAL_HASH) and submit it to the assignment in your learning management system.

Tiny Grid

1. Replace the fake name in the README.md’s Acknowledgements with your own name.
2. add the README.md changes to the staging area, commit the changes, and push the changes to the remote repository.
3. edit the tiny.css such that when the viewport width is less than 375px, the layout changes such that only the “main article area” is displayed.
4. add the tiny.css changes to the staging area, commit the changes, and push the changes to the remote repository.

Dark Mode

1. Create a new file called dark.css
2. edit your index.html to include a link to dark.css in the head of the document just before it links to debug.css
3. edit dark.css such that if the user has a “dark” preference, the page will be styled with a dark theme.
   1. What the dark color scheme should be is your choice!
      • If you’re not feeling creative set the background of the whole page to black and the text color of the content of the whole page to white.
      • Else, do something nice (maybe with a slightly lower contrast than the above suggestion, see the JMU CS Colors on the wiki or the Design and Style section of our Resources page for more.)
4. add a javascript file called script.js and a script tag to the bottom of the body of the html file that loads script.js.
5. in script.js, add an event listener such that when the user clicks any of the 3 nav items, the page will render with the selected color scheme.
   1. most often, dynamic styling is best implemented via (a) defining style rules for corresponding classes in css and (b) adding/removing classes to the necessary elements dynamically

Acknowledgements

Developers:

1. Nay Bored

With huge thanks to the CS 343 cheat code Mozilla Developer Network.