# Session 06 - CSS, Part 4 - including Grid

Harvard Extension School
Fall 2024

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

### Topics

1. CSS Grid
2. Responsive Page Layouts
3. Responsive Page Layouts
4. Responsive Images
5. CSS Custom Properties
6. Other CSS expressions
7. HTML5 Boilerplate

Session 06 - CSS, Part 4 - including Grid, slide1
Main topics, slide2
Contrasting CSS Grid and CSS Flex, slide3
CSS Grid, slide4
Grid Examples, slide5
Grid Examples, slide6
Grid - Lines and Areas, slide7
Grid Example, slide8
Grid Content Example - Solar System, slide9
Responsive Page Layouts, slide10
Classic Responsive Design Example, slide11
Breakpoints and CSS Media Queries, slide12
What about breakpoints?, slide13
Responsive Page Layouts, slide14
A Responsive Example, slide15
Responsive Images, slide16
CSS Custom Properties, slide17
Custom Properties, slide18
Other CSS expressions, slide19
HTML5 Boilerplate, slide20

Presentation contains 20 slides

- img
- img
- img
- img
- img

## Main topics

- CSS Grid
- CSS responsive sites with media queries
  - Responsive images
- Other cool CSS things we haven't touched on
  - CSS custom properties - aka "variables"!
  - Other CSS expressions - <, [], .has()
- HTML + CSS Boilerplate for consideration

## Contrasting CSS Grid and CSS Flex

### Grid

- Two axes
- More complex layouts
- Overlapping items

### Flex

- One primary axis
- Basic layouts for pages and content
- Easier then "grid" (?)

## CSS Grid

- CSS Grid Layout (MDN)
- Basic Concepts of Grid Layout
- Getting Started with CSS Grid (CSS-Tricks)
- Complete Guide to Grid (CSS-Tricks)

### Grid Terms - Lines, Cells, Areas

Lines

Cells

Areas

Column and Row Line Numbers

## Grid Examples

- 2 column layout
- 3 column layout
- Content
- Responsive

## Grid Examples

- Two columns

## Grid - Lines and Areas

## Grid Example

- Three columns

## Grid Content Example - Solar System

    main div.container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2rem;
      row-gap: 2rem;
    }

## Responsive Page Layouts

Site is "responsive" to different devices.

## Classic Responsive Design Example

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

## Breakpoints and CSS Media Queries

- MDN: Using media queries
- CSS Tricks: A Complete Guide to CSS Media Queries

### @media CSS Media Query

    /* rules for small screens and all screens */
    body {
      background-color: #005bbb;
      color: #ffd500;
      font-family: helvetica, sans-serif
    }
    h1 { text-align: center; font-size: 3rem;}
    /* only for widths of 768px and wider
       yes, we could have used 48em as a unit
    */
    @media (min-width: 768px) {
      /* specific rules go here */
      body {
        background-color: #ffd500;
        color: #005bbb;
      }
    }

## What about breakpoints?

- Pay attention to design, not devices (there are simply too many)
- Start with a single breakpoint; introduce others only as needed.
  Put another way, you don't have to have a half dozen different layouts just because you see some definition lists of XS, S, M, L, XL, XXL sizes defined.

### With that said....

Breakpoints defined in certain approaches are:

- 576px, 768px, 992px, 1200px, and 1400px (Bootstrap)
- 600px, 840px, 1200px, and 1600px (Material Design)

## Responsive Page Layouts

CSS media query:

    /* "compact" (no query needed) */

    /* "medium" screens */
    @media (min-width: 600px) { /* specific rules go here */ }

    /* "expanded" screens */
    @media (min-width: 840px) { /* specific rules go here */ }

    /* "large" screens */
    @media (min-width: 1200px) { /* specific rules go here */ }

    /* "extra large" screens */
    @media (min-width: 1600px) { /* specific rules go here */ }

## A Responsive Example

### Small

### Large

## Responsive Images

Deliver the appropriately sized image using `srcset` and `sizes` attributes in the `img` element.

- Guide to the Responsive Images Syntax In HTML | CSS-Tricks
- Responsive Images | MDN
- Responsive Images with srcset | imgix

### srcset and sizes

    <img src="images/gnp.jpg"
    alt="Glacier National Park"
    srcset="images/gnp-600.jpg 600w,
    images/gnp-900.jpg 900w,
    images/gnp-1200.jpg 1200w,
    images/gnp-1500.jpg 1500w"
    sizes="(min-width: 1500px) 1400px,
           (min-width: 1200px) 1100px,
           (min-width: 900px) 800px,
           (min-width: 600px) 500px,
           900px"/>

### Demos

- Demo of srcset with placeholder images
- Demo of srcset with imgix delivery

## CSS Custom Properties

The problem: keeping "DRY" (don't repeat yourself) in CSS can be hard impossible.

CSS Custom Properties provides a way forward!

- MDN: Using CSS custom properties
- CSS Tricks: A Complete Guide to Custom Properties

    section {
        --spacing: 1.2rem;
        padding: var(--spacing);
        margin-bottom: var(--spacing);
    }

Steps:

- Define the property

      --spacing: 1.2rem;

- Use the property

          padding: var(--spacing);
          margin-bottom: var(--spacing);

## Custom Properties

Properties cascade too -- so properties defined in "html" will be available throughout, but they can be overriden by redefining at another level (e.g. "footer")

Sometimes you see ":root" selector used for global custom properties, but that is essentially the same as "html"

See the Pen First @media query by David Heitmeyer (@dpheitmeyer) on CodePen.

## Other CSS expressions

- Children: `>` to select direct children (CSS combinators)
  `nav > ul` vs `nav ul`
  Child vs Descendent
- Attributes: `[ ]` for attribute and attribute value selectors
- Sibling: `+`
  `img + p` (Next-sibling combinator)
  A `p` whose immediate previous sibling is an `img`
- Selector for children with :has() pseudo-class.
  `:has()`

## HTML5 Boilerplate

HTML5 Boilerplate -- this isn't a full-fledged endorsement to use this always for every project, but it is worth considering what's part of this boilerplate and why it is there. And, it very well might be directly helpful!

- index.html
- style.css