From 377f0fc1f017f3f5d3c48704cc9f0a8198a97f37 Mon Sep 17 00:00:00 2001 From: michaeldimmitt Date: Wed, 26 Dec 2018 12:24:56 -0500 Subject: [PATCH 1/5] update during talk. --- README.md | 9 ++++++--- .../3_resize_example/css/style.css | 5 ----- css-resize-rules/base-level-css.html | 11 ++++------- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 201c7e9..9cffc16 100644 --- a/README.md +++ b/README.md @@ -21,9 +21,12 @@ open css-resize-rules/base-level-css.html ## 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 +open css-grid-layout-example/1_uncommented/index.html +code css-grid-layout-example/1_uncommented/ +open css-grid-layout-example/1_uncommented/index.html +open css-grid-layout-example/2_the_problem/index.html +open css-grid-layout-example/3_resize_example/index.html + ``` ## 4) Bootstrap and Tachyon aspect ratio's diff --git a/css-grid-layout-example/3_resize_example/css/style.css b/css-grid-layout-example/3_resize_example/css/style.css index d3043c2..9b35ea6 100644 --- a/css-grid-layout-example/3_resize_example/css/style.css +++ b/css-grid-layout-example/3_resize_example/css/style.css @@ -9,12 +9,7 @@ } .image-size { - height: 32vw; width: 42.66vw; - /* - height: 50vmin; - width: 66vmin; - */ } .grid-container { font-family: "Open Sans"; diff --git a/css-resize-rules/base-level-css.html b/css-resize-rules/base-level-css.html index 9c37b68..56aa4a6 100644 --- a/css-resize-rules/base-level-css.html +++ b/css-resize-rules/base-level-css.html @@ -6,15 +6,12 @@ .largeFont { font-size: 32px; } html { font-size: 3vmin; } + + h1 { font-size: 3rem; } - + @@ -24,7 +21,7 @@

header font size should be a # rem variation off font-size,




-
font-size 16px + 1vmin 😘
+
font-size 16px + 1vmin 😘
html -root font size is overriden by '*' font size of 12 From e95eeeaef3a87aa1678124fe857fe645d3c80e4e Mon Sep 17 00:00:00 2001 From: michaeldimmitt Date: Wed, 26 Dec 2018 16:26:54 -0500 Subject: [PATCH 2/5] checkpoint --- .../3_resize_example/css/style.css | 44 ++++++------------- 1 file changed, 14 insertions(+), 30 deletions(-) diff --git a/css-grid-layout-example/3_resize_example/css/style.css b/css-grid-layout-example/3_resize_example/css/style.css index 9b35ea6..e6f6d49 100644 --- a/css-grid-layout-example/3_resize_example/css/style.css +++ b/css-grid-layout-example/3_resize_example/css/style.css @@ -1,45 +1,28 @@ +body { + font-family: "Open Sans"; +} .text-center { - display: flex; - align-items: center; - justify-content: center; + display: flex; align-items: center; justify-content: center; } -.banner { - font-size: 4vw; -} +.image-size { width: 42.66vw; } -.image-size { - width: 42.66vw; -} .grid-container { - font-family: "Open Sans"; - font-size: 24px; - color: white; - height: calc(100vh - 1em); - background: white; + height: calc(100vh - 1em); display: grid; grid-gap: 15px; } .grid-item { - background: #229fd9ff; + background: #229fd9; text-align: center; - align-content: center; padding: 15px; } -.grid-container { - display: grid; - grid-gap: 15px; -} - -.grid-container header { grid-area: header; } - -.grid-container main { grid-area: main; } - -.grid-container nav { grid-area: navigation; } - -.grid-container aside { grid-area: sidebar; font-size: 14px; } - -.grid-container footer { grid-area: footer; } +/* Map html tags to grid container. */ +header { grid-area: header; } +main { grid-area: main; } +nav { grid-area: navigation; } +aside { grid-area: sidebar; font-size: 14px; } +footer { grid-area: footer; } @media all and (display-mode: fullscreen) { .grid-container { @@ -82,6 +65,7 @@ "sidebar" "footer"; } +.banner { font-size: 4vw; } .align-left { display: flex; align-items: flex-start; From 69c5ef339ff82d7fc6d4e2bfdc126c54736a9dce Mon Sep 17 00:00:00 2001 From: michaeldimmitt Date: Wed, 26 Dec 2018 16:55:07 -0500 Subject: [PATCH 3/5] grid working proper again. --- .../3_resize_example/css/style.css | 21 ++++++++++++------- .../3_resize_example/index.html | 2 +- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/css-grid-layout-example/3_resize_example/css/style.css b/css-grid-layout-example/3_resize_example/css/style.css index e6f6d49..1a8ffae 100644 --- a/css-grid-layout-example/3_resize_example/css/style.css +++ b/css-grid-layout-example/3_resize_example/css/style.css @@ -27,7 +27,7 @@ footer { grid-area: footer; } @media all and (display-mode: fullscreen) { .grid-container { grid-template-columns: 200px 1fr 200px; - grid-template-rows: 12vw 1fr 120px; + grid-template-rows: 120px 1fr 120px; grid-template-areas: "header header header" "navigation main sidebar" "footer footer footer"; @@ -37,7 +37,7 @@ footer { grid-area: footer; } @media not all and (display-mode: fullscreen) { .grid-container { grid-template-columns: 200px 1fr 200px; - grid-template-rows: 12vw 1fr 45px; + grid-template-rows: 45px auto 45px; grid-template-areas: "header header header" "navigation main sidebar" "footer footer footer"; @@ -46,8 +46,8 @@ footer { grid-area: footer; } @media screen and (max-width: 1082px) { .grid-container { - grid-template-columns: 1fr 150px; - grid-template-rows: 12vw 50px 1fr 10px; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-areas: "header header" "navigation navigation" "main sidebar" @@ -65,13 +65,20 @@ footer { grid-area: footer; } "sidebar" "footer"; } -.banner { font-size: 4vw; } - .align-left { + .banner { font-size: 4vw; } + .text-center { display: flex; - align-items: flex-start; justify-content: flex-start; text-align:left; + align-items: center } + .leftalign { + display: flex; + justify-content: flex-start; + text-align:left; + align-items: center + } + .image-size { display: flex; justify-content: flex-start; } } /* diff --git a/css-grid-layout-example/3_resize_example/index.html b/css-grid-layout-example/3_resize_example/index.html index fa3c0a6..798054b 100644 --- a/css-grid-layout-example/3_resize_example/index.html +++ b/css-grid-layout-example/3_resize_example/index.html @@ -22,7 +22,7 @@ Tyler's Face! -