# Session 05 - CSS and Flex and Responsive CSS

Harvard Extension School
Fall 2021

Course Web Site: https://cscie12.dce.harvard.edu/

### Topics

1. A CSS Example: WebAIM
2. CSS Best Practices
3. CSS Rules and Specificity
4. Box Sizing - How do you measure width?
5. CSS calc()
6. CSS Normalize and Reset
7. CSS Flexbox and Grid
8. CSS Flexbox
9. Solar System
10. Responsive Layouts
11. Responsive Example - Birds!

Session 05 - CSS and Flex and Responsive CSS, slide1
A CSS Example: WebAIM, slide2
CSS Best Practices, slide3
CSS Best Practices, slide4
Beware of Divitis and Classitis, slide5
Avoid Divitis, Classitis, Tagitis, etc., slide6
CSS Rules and Specificity, slide7
CSS Selector Specificity, slide8
Box Sizing - How do you measure width?, slide9
CSS calc(), slide10
CSS Normalize and Reset, slide11
CSS "Reset", slide12
CSS Normalize, slide13
CSS Flexbox and Grid, slide14
CSS Flexbox, slide15
flex-basis, slide16
flex-grow and flex-shrink, slide17
Flex and Wrap, slide18
Flex and Simple Layouts, slide19
Solar System, slide20
Responsive Layouts, slide21
Responsive Web Design: CSS Media Query, slide22
Responsive Example - Birds!, slide23

Presentation contains 23 slides

- img
- img
- img
- img
- img

## A CSS Example: WebAIM

## CSS Best Practices

MDN: Organizing Your CSS

- Format consistently (e.g. use the default in your text editor)
- Comment `/* || General Styles */`
- Have logical sections in your CSS (e.g. General Styles, Header, Footer, content specific, etc.)
- Use semantic names

## CSS Best Practices

### Use semantic "class" and "id" values

You can choose `class` and `id` values when authoring your CSS and HTML. A good rule is to create "logical" `class` and `id` values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names | Poor Class Names
--- | ---
pageheader pagefooter globalnav gallery aside callout warn info error | blueborder rightcolumn rightnav thinborder redbold center

Choosing class and id names appropriately will help with:

- evolution
  Your `#rightnav` may very well become navigation positioned on the left side or the top.
  Your `.redbold` may very be changed to another color or background entirely.
- specificity and semantics
  If you have a `.dottedborder` class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

## Beware of Divitis and Classitis

divitis
  An unhealthy markup condition characterized by the profligate use of the "div" element
classitis
  An unhealthy markup condition characterized by the profligate use of "class" attributes

## Avoid Divitis, Classitis, Tagitis, etc.

Instead of...

    <div class="header">Our Solar System</div>

or even

    <div class="header"><h1>Our Solar System</h1></div>

why not...

    <h1>Our Solar System</h1>

Instead of...

    <div class="basketball">
                <ul>
                  <li>Mark Few</li>
                  <li>Roy Williams</li>
                  <li>John Calipari</li>
                  ...

why not...

    <ul class="basketball">
                  <li>Mark Few</li>
                  <li>Roy Williams</li>
                  <li>John Calipari</li>
                  ...

## CSS Rules and Specificity

See: Calculating a selector's specificity.

Image from Flickr user Cayusa, used under Creative Commons license.

### Stylesheet Origin

- author stylesheet
- reader (user) stylesheet
- browser (user agent) stylesheet

### Specificity of Selector

- style attribute
- count "id" attributes
- count number of other attributes ("class")
- count element names

### Order

- last occurence has higher specificity

  `@import`-ed stylesheets come before rules in the importing sheet.

## CSS Selector Specificity

Specificity is expressed in a form of a list of four numbers: `(a,b,c,d)`

1. inline style
2. id
3. class, pseudo-class and attributes
4. element and pseudo-elements

Start comparing at "a", if equal go to "b", etc.

    nav li {...}                     /* (0,0,0,2) */
    nav.primary {...}                /* (0,0,1,1) */
    nav.primary li {...}             /* (0,0,1,2) */
    nav.primary li:first-child {...} /* (0,0,2,2) */
    nav.primary li.getinfo {...}     /* (0,0,2,2) */
    #globalnav {...}                 /* (0,1,0,0) */

And for a fun take on CSS Specificity, take a look at CSS SpeciFISHity

## Box Sizing - How do you measure width?

By default, box sizing (width or height) is measured in terms of the "content-box". So any padding or border is "in addition to" the width set in CSS.

Example 5.1 - box sizing - Example 5.1<img src="https://via.placeholder.com/400x50/000000/ffffff.png?text=400px+wide+image"/><div class="dog sizing"> Dog <pre>width: 400px; box-sizing: border-box;</pre></div><div class="cat"> Cat <pre>width: 400px; box-sizing: content-box;</pre></div><img src="https://via.placeholder.com/520x50/000000/ffffff.png?text=520px+wide+image"/><div class="goat"> Goat <pre>width: 400px;</pre></div> .dog { box-sizing: border-box; } .cat { box-sizing: content-box; } .goat { box-sizing: unset; } div { margin: 20px; font-size: xx-large; background-color: rgb(230,230,230); padding: 20px 40px; text-align: left; width: 400px; border: 20px outset rgb(220,220,255); } div pre { font-size: x-large;} img { margin-left: 20px;}

- Markup
- Style
- Screenshot

     <img src="https://via.placeholder.com/400x50/000000/ffffff.png?text=400px+wide+image"/>

     <div class="dog sizing">Dog
       <pre>width: 400px; box-sizing: border-box;   </pre>
     </div>
     <div class="cat">Cat
       <pre>width: 400px; box-sizing: content-box;   </pre>
     </div>
     <img src="https://via.placeholder.com/520x50/000000/ffffff.png?text=520px+wide+image"/>

     <div class="goat">Goat
       <pre>width: 400px;   </pre>
     </div>

In `style` element (`<style>`) within `head` element:

      .dog {
        box-sizing: border-box;
      }
      .cat {
        box-sizing: content-box;
      }
      .goat {
        box-sizing: unset;
      }
      div {
        margin: 20px;
        font-size: xx-large;
        background-color: rgb(230,230,230);
        padding: 20px 40px;
        text-align: left;
        width: 400px;
        border: 20px outset rgb(220,220,255);
      }
      div pre { font-size: x-large;}

      img { margin-left: 20px;}

## CSS calc()

CSS `calc()` function give a way to calculate values. See: calc() function on MDN

`width: calc(33% - 2rem);`

Example 5.2 - box sizing - Example 5.2<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul> ul, li { margin-left: 0; padding-left: 0;} ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;} li { box-sizing: border-box; padding: 1rem; margin: 1rem; float: left; width: calc(33% - 2rem); font-weight: bold; text-align: center; border: 5px dotted green; }

- Markup
- Style
- Screenshot

     <ul>
       <li>Item One
       </li>
       <li>Item Two
       </li>
       <li>Item Three
       </li> </ul>

In `style` element (`<style>`) within `head` element:

      ul, li { margin-left: 0; padding-left: 0;}
      ul { list-style: none; overflow: auto; background-color: #ffffdd; border: thin solid black;}
      li { box-sizing: border-box; padding: 1rem; margin: 1rem; float: left; width: calc(33% - 2rem);
        font-weight: bold; text-align: center; border: 5px dotted green; }

## CSS Normalize and Reset

Two approaches:

- CSS Reset: give yourself a "blank slate" to build upon; that is, effectively remove all browser default styles.
- CSS Normalize: give yourself consistency across browsers.

## CSS "Reset"

Sometimes it is useful to use a CSS stylesheet to "reset" styling for all elements. This attempts to start your styling with a "blank slate" instead of the browser defaults.

- Eric Meyer's Reset CSS
- Andy Bell's "A Modern CSS Reset"

- Basic Markup
- Basic Markup with Eric Meyer CSS Reset
- Basic Markup with Andy Bell "A Modern CSS Reset"

## CSS Normalize

- normalize.css project
- normalize.css

- HTML Demo Page
- HTML Demo Page with normalize.css

## CSS Flexbox and Grid

### Flexbox

- One primary axis
- Basic layouts
- Easier than "Grid"

### Grid

- Two axes
- Layouts and more complex layouts
- Overlapping items

## CSS Flexbox

- MDN: Basic Concepts of Flexbox
- CSS Tricks: A complete Guide to Flexbox

### Container and Items

1. Set up your flex container
2. Set the "flex" properties on the items within your container

Example 5.3 - Flex - Example 5.3<div id="f3container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div>#f3container { display: flex; } .box1, .box2, .box3, .box4, .box5 { flex-grow: 0; flex-shrink: 0; flex-basis: 5em; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f3container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
       <div class="box box4">4
       </div>
       <div class="box box5">5
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

    #f3container {
      display: flex;
    }
    .box1, .box2, .box3, .box4, .box5 {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 5em;
    }
    .box1 { background-color: lightpink;}
    .box2 { background-color: lightsteelblue;}
    .box3 { background-color: wheat;}
    .box4 { background-color: plum;}
    .box5 { background-color: palegreen;}
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3
4
5

## flex-basis

Example 5.4 - Flex - Example 5.4<div id="f4container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>#f4container { display: flex; } .box1 { flex-basis: 15%; background-color: lightpink; } .box2 { flex-basis: 25%; background-color: lightsteelblue; } .box3 { flex-basis: 50%; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f4container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

    #f4container {
      display: flex;
    }
    .box1 {
      flex-basis: 15%;
      background-color: lightpink;
    }
    .box2 {
      flex-basis: 25%;
      background-color: lightsteelblue;
    }
    .box3 {
      flex-basis: 50%;
      background-color: wheat;
    }
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3

## flex-grow and flex-shrink

Example 5.5 - Flex - Example 5.5<div id="f5container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div> #f5container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; background-color: lightpink; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; background-color: lightsteelblue; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; background-color: wheat; } .box { padding: 2em; border: medium solid black; width: 3em; }

- Markup
- Style
- Display

     <div id="f5container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

    #f5container {
      display: flex;
    }
    .box1 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 200px;
      background-color: lightpink;
    }
    .box2 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 100px;
      background-color: lightsteelblue;
    }
    .box3 {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 500px;
      background-color: wheat;
    }
    .box {
      padding: 2em;
      border: medium solid black;
      width: 3em;
    }

1
2
3

## Flex and Wrap

Example 5.6 - Flex Wrap - Example 5.6<div id="f6container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div><div class="box box6">6</div></div>#f6container { display: flex; flex-wrap: wrap; justify-content: space-evenly; background-color: linen; border: thin solid black; } .box1, .box2, .box3, .box4, .box5, .box6 { flex-grow: 0; flex-shrink: 0; flex-basis: 28%; box-sizing: border-box; margin: 1rem 0; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;} .box6 { background-color: turquoise;} .box { padding: 2em; border: medium solid black; }

- Markup
- Style
- Display

     <div id="f6container">
       <div class="box box1">1
       </div>
       <div class="box box2">2
       </div>
       <div class="box box3">3
       </div>
       <div class="box box4">4
       </div>
       <div class="box box5">5
       </div>
       <div class="box box6">6
       </div>
     </div>

In `style` element (`<style>`) within `head` element:

    #f6container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      background-color: linen;
      border: thin solid black;
    }
    .box1, .box2, .box3, .box4, .box5, .box6 {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 28%;
      box-sizing: border-box;
      margin: 1rem 0;
    }
    .box1 { background-color: lightpink;}
    .box2 { background-color: lightsteelblue;}
    .box3 { background-color: wheat;}
    .box4 { background-color: plum;}
    .box5 { background-color: palegreen;}
    .box6 { background-color: turquoise;}
    .box {
      padding: 2em;
      border: medium solid black;
    }

1
2
3
4
5
6

## Flex and Simple Layouts

- Layout with Flex - 1
- Layout with Flex - 2

## Solar System

## Responsive Layouts

Site is "responsive" to different devices.

CSS media query:

    /* Larger than mobile */
    @media (min-width: 400px) { /* specific rules go here */ }

    /* Larger than phablet (also point when grid becomes active) */
    @media (min-width: 550px) { /* specific rules go here */ }

    /* Larger than tablet */
    @media (min-width: 750px) { /* specific rules go here */ }

    /* Larger than desktop */
    @media (min-width: 1000px) { /* specific rules go here */ }

    /* Larger than Desktop HD */
    @media (min-width: 1200px) { /* specific rules go here */ }

## Responsive Web Design: CSS Media Query

Media queries can be used to include style sheets (`media` attribute) or in CSS rules (`@media` rule) or `@import` statement

Link to stylesheet

    <link rel="stylesheet" type="text/css"
      media="screen and (max-device-width: 480px)"
      href="smallscreen.css" />

CSS rule

    @media screen and (max-device-width: 480px) {
      /* rules for small screens */
      .column { float: none; }
    }

- Responsive Web Design by Ethan Marcotte on A List Apart
- Live Example

## Responsive Example - Birds!