Skip to content

Commit

Permalink
add overall layout of example website
Browse files Browse the repository at this point in the history
  • Loading branch information
@s1gr1d
s1gr1d committed Oct 23, 2020
1 parent a6a1ea8 commit a8ea8c2
Show file tree
Hide file tree
Showing 7 changed files with 361 additions and 17 deletions.
36 changes: 35 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
93 changes: 93 additions & 0 deletions grid-expample-website/_base.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}

14 changes: 0 additions & 14 deletions grid-expample-website/example-website.html
View file

This file was deleted.

231 changes: 231 additions & 0 deletions grid-expample-website/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Grid Examples</title>
<link rel="stylesheet" href="_base.css" type="text/css">
<link rel="stylesheet" href="full-bleed.css" type="text/css">
</head>
<body class="page-container">

<nav class="menu">
<ul>
<li><button onclick="showSection('.full-bleed')">Full Bleed</button></li>
<li><button onclick="showSection('.six-cards')">Six Cards</button></li>
<li><button onclick="showSection('.gallery')">Gallery</button></li>
</ul>

</nav>

<section class="content">
<section class="full-bleed">
<img src="https://picsum.photos/1920/1080" alt="Item Picture 1" class="card__image">

</section>
<section class="six-cards">
<div class="card">
<img src="https://avatars.dicebear.com/api/human/1.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">

<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>

</section>
<section class="gallery">
Gallery

</section>

</section>

<footer class="footer">
<a href="../index.html" class="button">Go back</a>
</footer>

<!--- HERO
<section class="hero">
<img src="https://picsum.photos/1920/1080" alt="Item Picture 1" class="card__image">
</section>
-->

<!--- SIX CARDS
<section class="six-cards">
<div class="card">
<img src="https://avatars.dicebear.com/api/human/1.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
<div class="card">
<img src="https://avatars.dicebear.com/api/human/2.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
<div class="card">
<img src="https://avatars.dicebear.com/api/human/3.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
<div class="card">
<img src="https://avatars.dicebear.com/api/human/4.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
<div class="card">
<img src="https://avatars.dicebear.com/api/human/5.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
<div class="card">
<img src="https://avatars.dicebear.com/api/human/6.svg" alt="Avatar 1" class="card__avatar">
<img src="https://picsum.photos/200/300" alt="Item Picture 1" class="card__image">
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<div class="card___feature">
<img class="card___check-icon" src="assets/check-circle.svg">
<p>Feature</p>
</div>
<button class="button card__button">PICK</button>
</div>
</section>
-->

<!--- GALLERY
<section class="gallery">
<figure class="gallery__item gallery__item--1"><img src="img/gal-1.jpeg" alt="Gallery image 1" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--2"><img src="img/gal-2.jpeg" alt="Gallery image 2" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--3"><img src="img/gal-3.jpeg" alt="Gallery image 3" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--4"><img src="img/gal-4.jpeg" alt="Gallery image 4" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--5"><img src="img/gal-5.jpeg" alt="Gallery image 5" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--6"><img src="img/gal-6.jpeg" alt="Gallery image 6" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--7"><img src="img/gal-7.jpeg" alt="Gallery image 7" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--8"><img src="img/gal-8.jpeg" alt="Gallery image 8" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--9"><img src="img/gal-9.jpeg" alt="Gallery image 9" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--10"><img src="img/gal-10.jpeg" alt="Gallery image 10" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--11"><img src="img/gal-11.jpeg" alt="Gallery image 11" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--12"><img src="img/gal-12.jpeg" alt="Gallery image 12" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--13"><img src="img/gal-13.jpeg" alt="Gallery image 13" class="gallery__img"></figure>
<figure class="gallery__item gallery__item--14"><img src="img/gal-14.jpeg" alt="Gallery image 14" class="gallery__img"></figure>
</section>
-->

<script src="script.js"></script>
</body>
</html>
0 _base.css → grid-foundations/_base.css
View file
File renamed without changes.
Binary file added images/overall-layout.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit a8ea8c2

Please sign in to comment.