DigExp - WEB/06 - Static Layout

web/06

Lay-Out Technieken

elementen naast / onder elkaar plaatsen

Float layout

Layout technieken

Float layout

Vanaf 1999 was "floating" de manier tot om een layout te bepalen voor webpagina's.

(Nu is dit echter nog maar voor enkele use-cases in gebruik)

Float layout

Float is een CSS property die letterlijk vertaald -- drijven -- betekent.

Float layout

<img class="first-image" src="img.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat eleifend augue. Aliquam fermentum fringilla pretium. Phasellus rutrum nibh sed orci rutrum varius. Sed mauris felis, viverra consectetur maximus non, dignissim sit amet ligula. Aliquam tempus sodales neque nec rhoncus. Ut eleifend interdum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante leo, blandit eu auctor vel, dapibus vitae purus. Pellentesque vulputate neque sit amet felis feugiat, congue egestas nunc ullamcorper. Nulla elementum arcu mi, id scelerisque lectus consequat a. Nam a ornare neque, eu porttitor nunc. Etiam mattis augue nibh, id aliquam libero varius id. Sed porta lobortis facilisis. Sed hendrerit lobortis varius. Ut ligula massa, laoreet vel gravida id, laoreet non sem. Nullam volutpat, leo at tempor feugiat, elit lorem maximus orci, in varius velit justo sit amet lacus. Nunc pulvinar erat sed malesuada consequat. Phasellus ultricies ac mi id efficitur. Morbi egestas hendrerit est nec semper. Proin id dapibus libero. Nam ullamcorper imperdiet tincidunt. Ut metus diam, auctor non nibh at, ullamcorper elementum nisl. Vestibulum arcu ex, tincidunt vitae turpis sit amet, volutpat dignissim nisi. Praesent rhoncus nibh eget lorem condimentum tristique. Cras lobortis pulvinar interdum. In tincidunt ornare quam, a malesuada felis porttitor eget. Etiam vel metus quam. Donec lobortis iaculis molestie. Proin euismod scelerisque sollicitudin. Proin non nunc enim. Cras aliquam velit lobortis lobortis tristique. Etiam scelerisque, massa eu pellentesque ullamcorper, mauris dui condimentum mauris, sed auctor orci nisi nec lacus. Donec condimentum pretium neque id consequat. Aliquam commodo ullamcorper ipsum, quis feugiat dui interdum id. Pellentesque lacinia semper massa, et porttitor metus luctus congue. Phasellus auctor, massa vitae lacinia pulvinar, justo sapien ultrices dolor, ac molestie nibh justo vel orci. Nunc et lorem sed nisi cursus semper vel tincidunt lectus. Sed molestie ipsum nec dolor pharetra, id interdum quam accumsan. Ut fringilla interdum elit, vel porta erat varius semper. Cras tempor et lectus nec ultrices. Pellentesque fermentum mattis ipsum ac iaculis. Vestibulum ullamcorper sem non diam vestibulum aliquam. Praesent quis fermentum purus. Praesent ut lectus et ante egestas commodo. Sed eu tortor eros. Maecenas molestie, ligula in pharetra ultrices, nunc leo dapibus sapien, sit amet auctor velit felis non erat. Nulla dolor velit, rhoncus sit amet elit ut, fermentum rhoncus libero. Nulla erat ligula, aliquet vehicula sagittis id, consequat eu nisl. Nullam vehicula sapien et magna aliquam scelerisque. Donec rutrum commodo massa lobortis sodales. Ut a dignissim eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Quisque consectetur velit id mi consectetur suscipit. Nulla mauris neque, sollicitudin ac quam ac, lobortis placerat nisl. Morbi laoreet nulla ac lectus dictum, non finibus nulla ultrices. Nulla facilisi. Suspendisse non mi nibh.</p>
<img class="second-image" src="img.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat eleifend augue. Aliquam fermentum fringilla pretium. Phasellus rutrum nibh sed orci rutrum varius. Sed mauris felis, viverra consectetur maximus non, dignissim sit amet ligula. Aliquam tempus sodales neque nec rhoncus. Ut eleifend interdum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante leo, blandit eu auctor vel, dapibus vitae purus. Pellentesque vulputate neque sit amet felis feugiat, congue egestas nunc ullamcorper. Nulla elementum arcu mi, id scelerisque lectus consequat a. Nam a ornare neque, eu porttitor nunc. Etiam mattis augue nibh, id aliquam libero varius id. Sed porta lobortis facilisis. Sed hendrerit lobortis varius. Ut ligula massa, laoreet vel gravida id, laoreet non sem. Nullam volutpat, leo at tempor feugiat, elit lorem maximus orci, in varius velit justo sit amet lacus. Nunc pulvinar erat sed malesuada consequat. Phasellus ultricies ac mi id efficitur. Morbi egestas hendrerit est nec semper. Proin id dapibus libero. Nam ullamcorper imperdiet tincidunt. Ut metus diam, auctor non nibh at, ullamcorper elementum nisl. Vestibulum arcu ex, tincidunt vitae turpis sit amet, volutpat dignissim nisi. Praesent rhoncus nibh eget lorem condimentum tristique. Cras lobortis pulvinar interdum. In tincidunt ornare quam, a malesuada felis porttitor eget. Etiam vel metus quam. Donec lobortis iaculis molestie. Proin euismod scelerisque sollicitudin. Proin non nunc enim. Cras aliquam velit lobortis lobortis tristique. Etiam scelerisque, massa eu pellentesque ullamcorper, mauris dui condimentum mauris, sed auctor orci nisi nec lacus. Donec condimentum pretium neque id consequat. Aliquam commodo ullamcorper ipsum, quis feugiat dui interdum id. Pellentesque lacinia semper massa, et porttitor metus luctus congue. Phasellus auctor, massa vitae lacinia pulvinar, justo sapien ultrices dolor, ac molestie nibh justo vel orci. Nunc et lorem sed nisi cursus semper vel tincidunt lectus. Sed molestie ipsum nec dolor pharetra, id interdum quam accumsan. Ut fringilla interdum elit, vel porta erat varius semper. Cras tempor et lectus nec ultrices. Pellentesque fermentum mattis ipsum ac iaculis. Vestibulum ullamcorper sem non diam vestibulum aliquam. Praesent quis fermentum purus. Praesent ut lectus et ante egestas commodo. Sed eu tortor eros. Maecenas molestie, ligula in pharetra ultrices, nunc leo dapibus sapien, sit amet auctor velit felis non erat. Nulla dolor velit, rhoncus sit amet elit ut, fermentum rhoncus libero. Nulla erat ligula, aliquet vehicula sagittis id, consequat eu nisl. Nullam vehicula sapien et magna aliquam scelerisque. Donec rutrum commodo massa lobortis sodales. Ut a dignissim eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Quisque consectetur velit id mi consectetur suscipit. Nulla mauris neque, sollicitudin ac quam ac, lobortis placerat nisl. Morbi laoreet nulla ac lectus dictum, non finibus nulla ultrices. Nulla facilisi. Suspendisse non mi nibh.</p>

p {
  display: inline;
}

.first-image {
  float: left;
}

.second-image {
  float: right;
}

Float layout

Gebruik "floats" enkel voor deze vorm van layout: een layout waar een afbeelding letterlijk doorheen de tekst mag drijven.

Gebruik een max width (van bv: 40%) voor de afbeeldingen zodat tekst niet abrupt onderbroken wordt op mobiel!

Float layout

Oefening @Campus

A winter night in the forest II - Float

Flexbox layout

Layout technieken

Flexbox layout

Flexbox werd uitgevonden om flexibel ruimte te verdelen tussen children in een container -- zelf wanneer hun grootte ongekend en dynamisch is.

Tot nu toe hebben we nog niet gezien hoe we elementen naast elkaar kunnen plaatsen.

Flexbox layout

<div class="container">
  <div class="item item--first">...</div>
  <div class="item item--second">...</div>
  <div class="item item--third">...</div>
</div>

.container {
  background: purple;
}

.item {
  background: orange;
  margin: 1rem;
  height: 4rem;
  width: 100%;
}

Zonder flexbox gaat alles onder elkaar staan

Flexbox layout

.container {
  background: purple;
  display: flex;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 100%;
  margin: 1rem;
  ...
}

Flexbox layout

.container {
  background: purple;
  display: flex;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: flex-end;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: center;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: space-between;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  justify-content: space-evenly;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Justify content 🤩

Flexbox layout

.container {
  background: purple;
  display: flex;
  flex-wrap: wrap;
  width: 40rem;
}

.item {
  background: orange;
  heigth: 3rem;
  width: 10rem;
  margin: 1rem;
  ...
}

Een flexbox container zal altijd alle items naast elkaar blijven tonen. Maar dit gedrag kunnen we aanpassen.

Flexbox layout

.container {
  display: flex;
  align-items: flex-start;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: flex-end;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: center;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: stretch;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  align-items: baseline;
}

.item {
  heigth: 3rem;
}

.item--second {
  height: 4rem;
}

.item--third {
  height: 2rem;
}

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: row;
}

.item {
  ...
}

In alle bovenstaande slides, gaan we uit van een logische volgorde: links naar rechts!

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: row-reverse;
}

.item {
  ...
}

Maar dit kunnen we omdraaien ook!

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: column;
}

.item {
  ...
}

Maar in plaats dat we flexbox direction op de horizontale as houden, kunnen we dit ook op de verticale as plaatsen

Flexbox layout

.container {
  display: flex;
  /* default */
  flex-direction: column-reverse;
}

.item {
  ...
}

En zelf hier kunnen we ook de omgekeerde versie kiezen

Flexbox layout

Eventjes weer resetten: naast een hele hoop opties dat we kunnen definieren op

de parent, hebben we ook nog opties op de children!

Flexbox layout

.container {
  display: flex;
  justify-content: space-evenly;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* default */
  flex-basis: auto;
}

Flex-basis legt de norm vast van de breedte van het element voor dat de overtollige ruimte verdeeld wordt.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* default */
  flex-grow: 0;
}

.item--second {
  flex-grow: 1;
}

Flex-grow bepaalt als het element mag groeien.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 20rem;
  /* default */
  flex-shrink: 1;
}

.item--second {
  flex-shrink: 0;
}

Flex-shrink bepaalt als het element mag krimpen.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* defaults */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 0 1 auto;
}

Flex combineert flex-grow, flex-shrink en flex-basis in 1 property.

Flexbox layout

.container {
  display: flex;
  width: 40rem;
}

.item {
  margin: 1rem;
  width: 10rem;
  /* defaults */
  order: 0;
}

.item--third {
  order: -1;
}

Order bepaald op welke positie een element komt te staan.

Flexbox layout

Tip:

Een volledig overzicht is te vinden op dit artikel van CSS-tricks

Oefening @Campus

Flexbox Froggy

Flexy menu

Mario V - Flexbox

Opdracht @home

Nesting flexboxes

My avocado project

Grid

Layout technieken

Grid

Grid wordt niet gegeven in dit vak maar je kan hier wel de properties zelf ontdekken.

Grid wordt vooral gebruikt voor wanneer je vastzit met flexbox, en een globale 2-dimensionele layout wilt voorzien.