Welcome!
Everything is fine.

Ottergram using Flexbox

We'll add some additional markup (HTML) to Ottergram.

Then we'll add flexbox and some relative positioning.

Motivation: Flexbox was recently (relatively speaking) added to CSS because it fills a common need: the ability to easily switch between a horizontal layout (for wide screens) and a vertical layout (for smaller screens, like mobile devices). It's important and worth learning.

Second, relative/absolute positioning is crucial to things like drop-down menus (which we'll do later in the course) and some of the games we'll do, such as Jelly Blobs of Doom. Here, they use it for a silly decorative purpose, but don't discount it because they did so. It's rare, but when we need it, we really need it.

Plan

  1. Announcements
  2. Exam Discussion
  3. Flexbox
  4. Absolute/Relative Positioning
  5. Quiz Questions
  6. Breakout session activities

Announcements

  • A3 will use flexbox, absolute positioning and media queries. We'll learn media queries next time, so you won't be able to do phase 3, but you can do phases 1 and 2. You can start even start on phase 3, changing the layout by hand (editing the files or using dev tools).
  • I'll demo
  • This is a solo assignment. Our first pair assignment will be later in the semester.

Today's Partners

  • 2 Eliza+Mako
  • 4 Ashley+Merci
  • 6 Ranyeli+Sandy
  • 8 Emily+Suzanne
  • 10 Marinka+Sofia
  • 12 Abby+Ari
  • 14 Nessa+Nina
  • 16 Cynthia+Erin
  • 18 Claire+Yitzel
  • 20 Caia+Maha
  • 22 Ella+Gwen
  • 24 Maggie+Shirley
  • 26 Isabella+Rebecca

Recap of Reading from Chapter 4

If desired, we'll visit the reading and quickly recap the first part

  • designing for mobile first
  • flexbox and its CSS properties

Flexbox Model

  • main and cross axes, either row or column
  • easy to change layout by changing a CSS rule
  • can nest these as deeply as you want

What "auto" Means

We usually do flex: 0 1 auto or some such. The auto means that the initial size of the item is its "natural" size. That's often what we want, but not always. If we want to specify the natural size, say as a percentage or number of pixels, we can do that.

Flexbox Example

Consider the following HTML markup:

<div id="outer">
<div class="inner">Barry</div>
<div class="inner">Robin</div>
<div class="inner">Maurice</div>
<div class="inner">Leslie</div>
</div>

So far, pretty simple. Let's add some styles:

#outer {
    display: flex;
    flex-direction: column;
    border: 2px solid red;
}
.inner {
    border: 1px solid red;
    margin: 10px;
    padding: 5px;
    width: 100px;
}

Here it is in action:

Barry
Robin
Maurice
Leslie

Here it is again, with just one small change:

#outer {
    display: flex;
    flex-direction: row;  /* was column */
    border: 2px solid red;
}
Barry
Robin
Maurice
Leslie

Let's try the following:

  • justify-content on outer2 with several different values: center, space-between, space-around
  • add flex: 1 1 auto to .inner
  • add flex: 1 1 auto just to Barry
  • add flex: 1 1 100px to .inner or maybe use different values for other elements
  • set order:1 on Robin
  • set flex: 2 1 auto to Barry
  • combinations of those

Ottergram + Flexbox

Here's our before/after these massive changes

In this flexbox version, we

  • Add a class="main-header" to the header element
  • Add a div.detail-image-container with a picture in it
  • Wrap a main.main-content around the two things after the header: the ul and the div.detail-image-container

Position Absolute

Let's play with this from the reading:

pink child
green child
blue child

Quiz Questions

I'll answer your quiz questions

With your partner

  • Work on some of the following examples

Preparing for Flexbox

To save you a bunch of typing, I've given you a starter version of the flexbox version of ottergram, so you can just copy the following:

cp -r ~cs204/pub/ottergram/flex-start public_html/cs204/flex-start

Now, be sure you look at your copy of the HTML both in VS Code and in the browser, so that you understand the new structure and so you have the setup ready for working through adding some CSS.

Let's add some CSS to our styles.css file:

add this:

html, body {
  height: 100%;
}

/* make the detail image big */
.detail-image {
  width: 90%;
}

replace the declaration blocks for these two selectors:

.thumbnail-item {
  display: inline-block;  /* was display:block */
  min-width: 120px;
  max-width: 120px;
  border: 1px solid rgb(100%, 100%, 100%);
  border: 1px solid rgba(100%, 100%, 100%, 0.8);
}

.thumbnail-list {
  list-style: none;
  padding: 0;
  white-space: nowrap;  /* new */
  overflow-x: auto;     /* new */
}

View the result in the browser; make sure you understand it before going on.

Putting in Flexbox

Flexbox requires thinking about parents (flex containers) and children (flex items).

Here, we're going to make body be the first flex container and the children will be header.main-header and main.main-content

body {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  background: rgb(149, 194, 215);
}

.main-header {
  flex: 0 1 auto;
}

.main-content {
  flex: 1 1 auto;
}

Save that and re-load your browser.

Next, we'll make .main-content be a flex container for the thumbnail list and the detail

.main-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.detail-image-container {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnail-list {
  flex: 0 1 auto;
  order: 2;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
}

Finally, let's make the .thumbnail-list a flex container for all the thumbnails:

.thumbnail-list {
  flex: 0 1 auto;
  order: 2;
  display: flex;
  justify-content: space-between;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
}

.detail-image-frame {
  position: relative;
}

Save and reload your page. Pretty good?

Absolute and Relative Positioning

We'll position the detail image's title over the image, just for fun.

.detail-image-frame {
  position: relative;
  text-align: center;
}

.detail-image-title {
  color: white; 
  font-size: 40px;
  text-shadow: rgba(0, 0, 0, 0.9) 1px 2px 9px; 
  position: absolute;
  bottom: -16px;
  left: 4px;
  font-family: airstreamregular;
}

Save and reload!

Image Scaling

Note that if you use an image on the page and scale it to, say, 10% of its natural width, you're downloading 100 times as much data as you are really using, taking 100 times the bandwidth and taking 100 times longer than necessary.

Thus, it often makes sense to use an image editing program (like Photoshop or many others) to create a variety of images at different sizes, and download the most appropriate one.

In the example in this chapter, they use the same image files for both the detail (big version) and the thumbnails (small version). In this case, it's probably fine, because we'll probably view all of the big versions and so no data will be wasted. Still, we have to wait for all the big versions to load when we load the website.

If we expected that only a few of the big versions would be looked at, we should create thumbnail images and load those, and then only load the big versions on demand. We can do that with JavaScript.

Fun fact

Can you guess who these otters are named after?

Barry, Robin, Maurice Gibb, Stayin' Alive