0) future projects first

react-skeletor:

open https://trainline.github.io/react-skeletor/demo/

scalable media queries:

open https://github.com/MichaelDimmitt/an_attempt_at_scalable_media_queries/blob/dev/index.html

0) Beginning, the talk. Speak up at any time. Have you run into these css problems how did you solve the issue?

1) Original problem, resizing text and its usecase a banner.

link: I am not the only one

code css-resize-rules/base-level-css.html
open css-resize-rules/base-level-css.html

2) The rules used for this project.

3) Practical application for resizing in general (text and images)

open css-grid-layout-example/uncommented/index.html
code css-grid-layout-example/uncommented/
open css-grid-layout-example/uncommented/index.html

4) Bootstrap and Tachyon aspect ratio's

5) Masonry js (grid layout library)

open https://masonry.desandro.com/layout.html#imagesloaded

notes

<!-- rules
  px stuff at the top...
  html -root font size should be vmin off port size.
  paragraphs font size should be a # px...
  header     font size should be a # rem  variation off font-size
-->

/*
Tricks when using CSS grid,
  1) Inspect with console, put dev tools on the bottom as our media queries are all set to monitor the width ☝️ .
    For scenerios when monitoring vw, have dev tools on the bottom.
  2) For scenerios when monitoring vh, have dev tools on the right.
  3) Images resize based on width, use dev tools at bottom of screen.
  4) get info on your image, write down pixel width view pixels.
*/
/*
I need to write down all the things I did today.

https://css-tricks.com/simple-little-use-case-vmin/
*/