My Raw Notes for the Week of 10-4-2021

ENGLISH:

The resources for the course: https://github.com/jen4web/fem-layout/

The three defining characteristics of responsive web design, according to Kramer:
1) Flexible grid-based layout
2) Media queries (CSS3)
3) Images that resize
A note: There is no JavaScript involved. Occasionally a bit is used, but generally RWD does not include JS. There is no JS required at all.

At the beginning of every CSS file, recall that Brian Holt advises always putting...

* {
  box-sizing: border-box;
}

...but Kramer advises something similar but probably more comprehensive...

html {
  box-sizing: border-box;
}

*, 
*:before, 
*:after {
  box-sizing: inherit;
}

...but, whichever you use, remember that each does this: Makes each element, when referenced, equal 'content'+'padding'+'border' (not 'margin', of course) instead of just 'content'. In other words, the 'width' property normally equals just the 'content', but with the CSS code above being at the top of the file, the 'width' property equals 'content'+'padding'+'border'. And this is very helpful.

Flexbox wasn't meant to be used for whole page grid layouts, but it is very often used that way.
Much better is to use Grid for layouts and Flexbox for positioning specific things on the page.

For the up-to-date state of support for various browsers (i.e., for questions on browser compatibility): https://caniuse.com/

In Flexbox, 'parent' can also be referred to as 'container' or 'row'
In Flexbox, 'child' can also be referred to as 'item' or 'cell'

A note on the parent property 'align-content' (paraphrased from flexboxfroggy.com): 'align-content' determines the spacing between lines, while 'align-items' determines how the items as a whole are aligned within the container; when there is only one line, 'align-content' has no effect

A note on the parent property 'flex-flow': This is shorthand for 'flex-direction: ;' and 'flex-wrap: ;' (e.g., 'flex-flow: column wrap;')

A note on the child properties 'flex-grow' and 'flex-shrink': Jen Kramer says these are very hard to understand

A note on the child property 'flex-basis': Jen Kramer says this is basically the 'width' property but with some flexibility you can't control...and never use 'width' with Flexbox because it's too absolute even when set to a percentage value

A note on the child property 'flex': It takes three values, the first being the 'flex-grow' value, the second being the 'flex-shrink' value, and the third being the 'flex-basis' value. An example is 'flex: 1 1 0;' (the shorthand for which is the oft-used 'flex: 1;')

As made pretty clear by the language used ('parent' and 'child'), remember that ONLY the direct children of the Flexbox parent/container/row element can be Flexbox children/items/cells of that parent element (i.e., grandchildren cannot)

For dealing with resizing images the proper way, remember the HTML <picture> tag and its 'srcset' and 'media' attributes.
FYI: The meta tag '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>' IS needed for this all to work properly...but I always include this.
Example:
<picture>
  <source srcset="img/peace-pie-original.jpg" media="(min-width: 1200px)">
  <source srcset="img/peace-pie-500.jpg" media="(min-width: 800px)">
  <img src="img/peace-pie-150.jpg" alt="My amazing peace pie at the appropriate dimension!">
</picture>
For help, reference...
...https://github.com/jen4web/fem-layout/ -> 'day-1-flexbox' folder -> '6-responsive-images' folder...
...and/or...
...https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images.

For a great (though dated) article on which images (when using HTML and CSS) actually download, reference https://timkadlec.com/2012/04/media-query-asset-downloading-results/. This is relevant to performance/speed of the webpage. Note that the best option of those listed is 'Test 5'.

Regarding HTML forms (<form>), you can find some good tags to use (specifically <fieldset>, which is important for accessibility, and <datalist>) here:
https://github.com/jen4web/fem-layout/ -> 'day-2-grid' folder -> '18-practice' folder -> 'end' folder -> 'contact.html' file

Grid:
- For Jen Kramer's Grid intro slides: https://github.com/jen4web/fem-layout/ -> 'day2.pdf'
- A learning game: https://cssgridgarden.com/
- General Rule: Use Flexbox for UI elements (e.g., image galleries, cards, etc....any little units of content), but use Grid for major layout
- Designed to work in two dimensions (this means we have to specify the horizontal and the vertical, because if two cells have the same two-dimensional layout in Grid, they end up on top of each other, and that's not what we want)
- Just like in Flexbox, in Grid there are Grid 'parents'/'containers' and Grid 'children'/'items'
- The "implicit grid" is when you specify the positions of SOME of the cells in the wrapper (not all of them) and Grid guesses where the rest of the cells go. Bear in mind, Grid is often incorrect in this guess, so don't get thrown off / confused by it
- Note that, looking at the code I've included below, I won't see the 'grid-template-areas' property. This property has its own syntax and I didn't prioritize learning it for now. But of course I can always refer to the relevant course material at https://github.com/jen4web/fem-layout/ -> 'day-2-grid' folder -> '12-grid-area' folder
- For Grid "fallbacks" and overrides: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
- Another useful resource: https://gridbyexample.com/

CODE:

// HTML
<ul>
  <li class="flex1">1 Lorem ipsum dolor sit amet.</li>
  <li class="flex1">2 Illum facere saepe nam praesentium.</li>
  <li class="flex2">3 Vero quia possimus unde sint!</li>
  <li class="flex1">4 Cupiditate, ab molestias aliquam cum.</li>
  <li class="flex2">5 Recusandae inventore distinctio reiciendis id.</li>
  <li class="flex1">6 Laboriosam iure saepe distinctio, sunt.</li>
</ul>

// CSS
body {
  font-family: Arial, Helvetica, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 5px dotted red;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  height: 400px; /* just here for demo purposes...in reality you don't usually need to set 'height' when working with Flexbox */
  align-items: center;
}

li {
  border: 5px solid #999;
  margin: 0.5em;
  padding: 0.5em;
}

.flex2 {
  border: 5px dashed blue;
  order: 2;
  flex: 2 1 25%;
}

//-------------------------------------------------------------------

// HTML
<div class="wrapper">
  <header>
    <h1>My Fine Header</h1>
  </header>
  <article>
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci laborum, ex tempora esse fuga consequuntur dolores excepturi, eaque quis incidunt
    </p>
  </article>
  <aside>
    <h3>My Aside</h3>
    <blockquote>
      A fine quote!
    </blockquote>
  </aside>
</div>

// CSS
.wrapper {
  display: grid;
  grid-gap: 10px;
  font-family: Arial, sans-serif;
}

.wrapper > * {
  padding: 1em;
  border-radius: 1em;
}

header {
  background-color: blue;
  color: white;
}

article {
  background-color: green;
  color: white;
}

aside {
  background-color: yellow;
}

@media (min-width: 650px) { /* what we can call 'tablet' viewport */
    header {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    article {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    aside {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
    }
}

@media (min-width: 1000px) { /* what we can call 'desktop' viewport */
    header {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }

    article {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    aside {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }
}

//-------------------------------------------------------------------

// HTML
<div class="wrapper">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
</div>

// CSS
/* Based on "Composition II in Red, Blue, and Yellow," by Piet Mondrian (1930) */
/* Note that because of the varying border sizes in the painting (to see the painting, uncomment out the '.wrapper' background image and the 'div' opacity setting), the borders that we set (with 'grid-gap' in our CSS) won't EXACTLY match the painting, and this throws things off by a bit. But no big deal for this exercise. Note, though, that using 'grid-column-gap' and 'grid-row-gap', each with its own value, instead of 'grid-gap' for both values, would probably be a solution here */
.wrapper {
  width: 600px;
  height: 600px;
  /* background: url(../img/painting.png) no-repeat; */
  display: grid;
  grid-gap: 30px 20px; /* first value is for top and bottom (i.e., space between rows), second value is for left and right (i.e., space between columns) */
  grid-template-rows: 178px 211px 61px 61px; /* 4 rows, at these heights */
  grid-template-columns: 127px 376px 42px; /* 3 columns, at these widths */
  background-color: black;
}

div {
  border: 1px solid black;
  background-color: white;
  /* opacity: 0.5; */
}

/* note that--just looking at the painting, before adding in the appropriate Grid numbers--this painting has 4 rows and 3 columns */
.a {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.b {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.c {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
  background-color: red;
}

.d {
  grid-row: 3 / 5;
  grid-column: 1 / 2;
  background-color: blue;
}

.e {
  grid-row: 3 / 5;
  grid-column: 2 / 3;
}

.f {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.g {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
  background-color: yellow;
}

//-------------------------------------------------------------------

// HTML
<div class="wrapper">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
  <div class="e">e</div>
  <div class="f">f</div>
  <div class="g">g</div>
  <div class="h">h</div>
  <div class="i">i</div>
  <div class="j">j</div>
</div>

// CSS
/* to see the painting, uncomment out the '.wrapper' background image and the 'div' opacity setting */
.wrapper {
  width: 633px;
  height: 458px;
  font-size: 3em;
  font-family: Arial, Helvetica, sans-serif;
  /* background: url(../img/painting2.png) no-repeat; */
  display: grid;
  grid-gap: 7px;
  grid-template-rows: 70px 15px 58px 54px 80px 146px; /* 6 rows, at these heights */
  grid-template-columns: 302px 88px 153px 69px; /* 4 columns, at these widths */
  background-color: black;
}

div {
  border: 1px solid black;
  background-color: white;
  /* opacity: 0.5; */
}

/* note that--just looking at the painting, before adding in the appropriate Grid numbers--this painting has 6 rows and 4 columns */
.a {
  grid-row: 1 / 6;
  grid-column: 1 / 2;
  background-color: red;
}

.b {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  background-color: yellow;
}

.c {
  grid-row: 1 / 4;
  grid-column: 3 / 4;
}

.d {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
  background-color: red;
}

.e {
  grid-row: 3 / 6;
  grid-column: 2 / 3;
}

.f {
  grid-row: 4 / 5;
  grid-column: 3 / 4;
  background-color: blue;
}

.g {
  grid-row: 2 / 5;
  grid-column: 4 / 5;
}

.h {
  grid-row: 6 / 7;
  grid-column: 1 / 2;
}

.i {
  grid-row: 6 / 7;
  grid-column: 2 / 3;
  background-color: blue;
}

.j {
  grid-row: 5 / 7;
  grid-column: 3 / 5;
  background-color: yellow;
}