Assignment 2.2: Task Board (CSS)

Written by Michael, with huge help from Kashif Nazir

Due Tue May 9 11:59pm PT

Submissions not accepted after Thu May 11 11:59pm PT.

Backstory: You've made a very functional app. Now it's time to make it look (a little bit) nicer. After all, no one will talk about (or invest in??) your awesome new apps if they look like they came from the 90s.

In this assignment, you will add additional CSS to the task board app you built in assignment 2.1.

Learning goals

Through this assignment, you will

Select and style elements with CSS,
Build a page layout based on an image or visual description, and
Practice using Flexbox and positioning elements.

Overview

You'll start from where you left off with assignment 2.1, with a few adjustments:

Add the following line to index.html after the current <link> tag:
```
<link rel="stylesheet" href="styles2.css">
```
Download static.html and put it in the public folder. This page provides a "static" version of the board which you can use to test your CSS if you don't want to consider your JavaScript from assignment 2.1.
Create a new file in public called styles2.css. You will write all of the CSS for this assignment in this file.

As with assignment 2.1, don't modify the HTML (aside from the additional <link> tag above). Your CSS must work with the HTML as provided.

Note on grading: We will not consider the JavaScript and CSS from assignment 2.1 while reviewing this assignment. You don't need to go back to fix your 2.1 code if you didn't get something working previously (though you may if you'd like to have a completely working and styled app).

To use the static board, point your browser to localhost:1930/static.html. This page has no JavaScript and starts with a few cards. In addition, the Done column includes a card selected for moving and the "Move Here" buttons. (It wouldn't normally be possible to have move here buttons in only one column.)

We encourage you to work from your 2.1 solution instead of the static board if you can, as it may allow you to test more edge cases. Plus, we think it's pretty cool to be able to play with the completed app!

The Layout

Your task is to implement the page layout shown here:

Screenshot of completed page. See below for description — Completed page

Screenshot of page while moving card. See below for description — Page while card is being moved

Requirements

Here are the specific details for how the page should look, including relevant values. Note that these are visual descriptions, not necessarily specifications for how to achieve them. For example, if we say there should be 1rem of spacing above an element, you may need to add/remove margin/padding/etc. to that element, its siblings, and/or its parent to achieve the desired final spacing. Some details may require no additional CSS at all.

Fonts:
- Use sans-serif across the entire page. (This may already be the default in some browsers/OSes, but it isn't consistent, so set it explicitly.)
- The "Task Board" heading is x-large.
Top bar containing the "Task Board" heading and the add card form:
- Background color #202020, text color white (the form inputs will continue to be black-on-white)
- Extends across the top of the page, up to the edges (i.e. there should be no whitespace on the left, top, or right edges)
- "Task Board" is aligned to the left, while the add form is aligned to the right.
- There is 5rem of spacing to the left of "Task Board" and to the right of the add form.
- There is 0.5rem of spacing above and below the tallest part of the bar (which will likely be the add form). The other part of the bar is vertically centered.
- There is no additional vertical spacing (e.g. on the "Task Board" heading).
Add card form
- The controls (inputs and button) are laid out horizontally with 0.5rem of spacing between each. They are all the same height.
- The title input is 20em wide and the color input is 8em wide.
- The add button has background color lightgreen, black text. There is 0.25rem of spacing above and below and 1rem of spacing to the left and right (still within the green).
The board and columns
- The board takes up the full width of the screen, with 5rem of spacing on the left and right (to align with the top bar).
- The three sections of the board (To Do, Doing, and Done) are laid out as equal-width columns. (See the note about the flex property.)
- The To Do and Done columns have a background color of #f0f0f0. The Doing column has a white background.
- There is 0.5rem of spacing on the left and right of the column (within the gray background for To Do and Done).
- There is 1rem of spacing above, left, and right of the column title. This is in addition to the left/right spacing of the column.
- There is no (white) vertical spacing between the column and the top bar.
Columns and cards
- Items inside of a column (e.g. cards and move here buttons) expand horizontally to fill the entire column.
- There is 1rem of vertical spacing between each element in a column.
- Cards have a 0.5rem border-radius and 0.5rem of spacing (within the background) on all sides.
- There is no additional spacing at the top of the card (above the title).
Card buttons
- The card buttons (edit, move, delete) are hidden unless the mouse is inside the card.
- When shown, the buttons are in the top-right corner of the card, 0.5rem away from the top and right edges. (They will partially cover a long title.)
- There is no spacing between the buttons.
Page height: We want the columns (e.g. the background of To Do and Done) to extend to the bottom of the window. Getting this effect is a bit subtle, so we are being more precise/prescriptive about how to do this:
- Make the <body> a flex container, laid out as a column. (Its two flex items are the top bar and the board.)
- Give the body a height of 100vh. Make the board expand to take up all remaining vertical space in its flex container. (If there are more cards than fit on one screen, the page should still scroll.)
- Add 3rem of spacing at the bottom of each column (within the background), to prevent cards from running up against the bottom of the window.
- Cleanup: Since body is now a flex container, its flex items automatically expand horizontally. If you had to explicitly set a width on the flex items, you should be able ot remove it.

Here are a few tips and notes for this assignment:

You do not have to exactly match the image; even if you address everything in the spec, differences between browsers and operating systems (e.g. the exact font used) may still be present. If something is not specified in the above list, feel free to ask about it. But in general, you won't have to handle it, or you may choose any reasonable value.
You can assume the user's viewport will be at least 1000px wide, i.e. you don't have to worry about styling for mobile devices. (For example, you can assume the heading and add form will fit on one line.)
Recall that browsers apply a number of default "user agent styles," which you will sometimes need to override. One of the most common user agent styles are margins, which are applied to, among other things, the body element and headings. Be careful to remove/adjust these when defining your own spacing.
Flexbox makes a few subtle changes that can be easy to overlook. For example, it disables margin collapsing, and it removes whitespace between elements that would be added by inline layouts. If you need to precisely control the spacing of elements (or completely remove it), see if Flexbox can help. (However, don't make every element a flex container--"normal content" should still be laid out with block/inline.)
Recall that the default value for align-items is stretch, which causes flex items to expand along the cross axis (the direction opposite of flex-direction). Between this and flex-grow, you should rarely need to set width or height of a flex item to a percentage.
There is a "shorthand" CSS property, flex, which sets flex-grow and flex-shrink. But it also sets the item's "desired size" (called the basis). This lets you work around the default behavior with Flexbox of first giving each item its desired amount of space before growing/shrinking. In particular, setting flex: 1 on a bunch of items will allow them to flex-grow while ensuring they remain the same size along the main axis, irrespective oh how much space their content takes up.
In addition to the Flexbox properties discussed in class, gap can be useful for adding spacing between flex items.
Recall that, with position: absolute, an element is positioned relative to the first ancestor in its tree that has a non-static (default) position value. You can use this to control the reference point for the positioned element.
Pseudoclasses like :hover are applied by the browser. They can be combined with other selectors as if they were normal CSS classes. But be careful about spaces: s1 :hover is very different than s1:hover.
The appear-on-hover behavior of the buttons doesn't work great for folks using only a keyboard (or a screen reader). In practice, we would want to make sure we support this, but you aren't required to do so for this assignment. (One strategy for doing so is to make the cards focusable using tabindex and showing the buttons on focus. It's a bit tricky to make sure the buttons themselves can be tabbed to, though; we couldn't quite get this to work without a bit of JavaScript.)

Submitting

When you are finished, please submit your assign2 folder (without node_modules of course!) to Paperless.