From a8ea8c299dc8d7e00954793037a4357ffe36da40 Mon Sep 17 00:00:00 2001 From: Sigrid Date: Fri, 23 Oct 2020 21:00:19 +0200 Subject: [PATCH] add overall layout of example website --- README.md | 36 +++- grid-expample-website/_base.css | 93 +++++++++ grid-expample-website/example-website.html | 14 -- grid-expample-website/index.html | 231 +++++++++++++++++++++ _base.css => grid-foundations/_base.css | 0 images/overall-layout.png | Bin 0 -> 8434 bytes index.html | 4 +- 7 files changed, 361 insertions(+), 17 deletions(-) create mode 100644 grid-expample-website/_base.css delete mode 100644 grid-expample-website/example-website.html create mode 100644 grid-expample-website/index.html rename _base.css => grid-foundations/_base.css (100%) create mode 100644 images/overall-layout.png diff --git a/README.md b/README.md index 9344f91..7b5bbf1 100644 --- a/README.md +++ b/README.md @@ -192,9 +192,43 @@ If we want the tracks to have a defined height or width we can use the **propert ## Grid Examples from Practice --- TODO: add common use-cases and examples +All those examples can are implemented in the grid-example-website folder. +#### Creating an Overall Layout (media-queries) +The overall composition of our page should look like this on desktop and on mobile: + +![overall-layout](images\overall-layout.png) + +To accomplish such a layout, we have to define a column with a **fixed width for the menu** and a column for the content. The menu should switch to the top, when the screen gets smaller. For the footer, we can just use the `min-content` value. + +We can get such a layout with defining it with **template-areas and media-queries**. + +```css +.page-container { + height: 100vh; + + display: grid; + grid-template-columns: 5rem 1fr; + grid-template-rows: 1fr min-content; + grid-template-areas: "menu content " + "footer footer "; +} + +@media only screen and (max-width: 800px) { + .page-container { + grid-template-columns: 1fr; + grid-template-rows: 5rem 1fr min-content; + grid-template-areas: "menu" + "content" + "footer"; + } +} +``` + + + +#### fixed columns that shrink with the viewport ## Links diff --git a/grid-expample-website/_base.css b/grid-expample-website/_base.css new file mode 100644 index 0000000..e90c82e --- /dev/null +++ b/grid-expample-website/_base.css @@ -0,0 +1,93 @@ +:root { + font-size: 1em; + box-sizing: border-box; + + /* COLORS */ + --color-olive: #A5A58D; + --color-sand: #DDBEA9; + --color-creme: #F0EFEB; + --color-black: #1D120B; + --color-grey: #7d7d7d; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: inherit; +} + + +/* Definition of top-level page grid (overall layout) */ +.page-container { + height: 100vh; + display: grid; + grid-template-columns: 5rem 1fr; + grid-template-rows: 1fr min-content; + grid-template-areas: "menu content " + "footer footer "; +} + +@media only screen and (max-width: 800px) { + .page-container { + grid-template-columns: 1fr; + grid-template-rows: 5rem 1fr min-content; + grid-template-areas: "menu" + "content" + "footer"; + } +} + +.menu { + grid-area: menu; + background-color: var(--color-sand); +} +.content { + grid-area: content; + background-color: var(--color-creme); +} +.footer { + grid-area: footer; + background-color: var(--color-olive); +} + + + +/*** just custom styling ***/ +* { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +h1 { + text-align: center; + margin: 1em 0; +} + +.button { + display: block; + + width: 160px; + height: min-content; + padding: 0.7em; + margin: 3rem auto; + + border: none; + border-radius: 1em; + background-color: var(--color-sand); + box-shadow: 0px 0px 20px 0px var(--color-grey); + + color: var(--color-creme); + text-decoration: none; + text-align: center; + font-style: normal; + font-weight: normal; + box-sizing: border-box; +} + +.button:hover { + color: var(--color-sand); + border-color: var(--color-sand); + background-color: var(--color-creme); +} + diff --git a/grid-expample-website/example-website.html b/grid-expample-website/example-website.html deleted file mode 100644 index eb9310f..0000000 --- a/grid-expample-website/example-website.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - CSS Grid Examples - - - - - - - Go back - - diff --git a/grid-expample-website/index.html b/grid-expample-website/index.html new file mode 100644 index 0000000..9efa681 --- /dev/null +++ b/grid-expample-website/index.html @@ -0,0 +1,231 @@ + + + + + CSS Grid Examples + + + + + + + +
+
+ Item Picture 1 + +
+
+
+ Avatar 1 + Item Picture 1 + +
+ +

Feature

+
+
+ +

Feature

+
+
+ +

Feature

+
+
+ +

Feature

+
+ +
+ +
+
+ Gallery + +
+ +
+ + + + + + + + + + + + diff --git a/_base.css b/grid-foundations/_base.css similarity index 100% rename from _base.css rename to grid-foundations/_base.css diff --git a/images/overall-layout.png b/images/overall-layout.png new file mode 100644 index 0000000000000000000000000000000000000000..cd79332b149a5bf89fbb920206f79a487fed2d43 GIT binary patch literal 8434 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 EUz>>VPyhe` literal 0 HcmV?d00001 diff --git a/index.html b/index.html index fcb2689..f9386e1 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ CSS Grid Examples - + @@ -57,6 +57,6 @@

Implicit and Explicit Grid

Item 8
- Show Grid Example Website + Show Grid Example Website