Deel 10: Componenten

Web Design

Wat zijn componenten?

Componenten

Wat is een component?

Componenten zijn zelf-gedefinieerde delen van een webpagina, die volledig op zich staan.

Wat is een component?

Wat is een component?

Wat is een component?

Wat is een component?

Wat is een component?

Een component kan herbruikt worden visueel naast andere componenten, op andere pagina's en er bestaan ook variaties van.

 

Van zodra iets herbruikbaar wordt, kan je het een "component" gaan noemen. Hoe klein een component ook is.

Wat is een component?

Een component kan herbruikt worden visueel naast andere componenten, op andere pagina's en er bestaan ook variaties van.

 

Van zodra iets herbruikbaar wordt, kan je het een "component" gaan noemen. Hoe klein een component ook is.

Wat is een component?

Componenten benoemen

Componenten

Componenten benoemen

Componenten kunnen we gaan benoemen in HTML met logische classes.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

Componenten benoemen

Met dezelfde CSS kunnen we dan componenten gaan hergebruiken.

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

Een variatie wordt dan geïdentificeerd door een extra class.

<article class="card card--green">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

<article class="card card--green">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3>Card title</h3>
  <h4>Secondary title</h4>
  <p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a href="...">Action 1</a><a href="...">Action 2</a>
</article>
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}
.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

Class naming convention

Componenten

Class naming convention

Een naamgevings conventie wanneer we onze classes schrijven.

  1. Maakt je selectors meer verstaanbaar door gewoon de naam te lezen.
  2. Maakt duidelijk op welke plaats je classes kunt hergebruiken in HTML
  3. Het maakt de relaties duidelijk tussen classes.

Class naming convention

Wij gaan kiezen voor de Block - Element - Modifier methodologie, kortweg de BEM methodologie.

 

In BEM gaan we classes gaan schrijven met 2 liggende streepjes __

en/of 2 vliegende streepjes --

.block {...}
.block__element {...}
.block--modifier {...}

Class naming convention

Met "__" gaan we een onderdeel van een component benoemen.

Met "--" gaan we een variatie van een component benoemen

.person {...}
.person__hand {...}
.person--female {...}
.person--female__hand {...}
.person__hand--left {...}

Class naming convention

Toegepast op onze "card"-componenten:

Class naming convention

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Toegepast op onze "card"-componenten:

Class naming convention

.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

0 - 1 - 1

0 - 1 - 1

0 - 1 - 0

0 - 1 - 0

0 - 1 - 0

0 - 1 - 0

Componenten benoemen

Een class variatie toevoegen is slechts 1 class toevoegen: "card--green"

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

Let op: Laat de class "card" staan in de HTML, zo hoef je enkel de CSS te schrijven voor die de variatie vereist.

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card h3 {
  font-size: 2rem;
}

.card a {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}
.card--green {
  background: green;
  color: #FFF;
}

.card--green a {
  color: green;
}

Componenten benoemen

Of voeg meerdere variatie classes toe!

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

Of voeg meerdere variatie classes toe!

<article class="card card--green">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

<article class="card">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green .card__button {
  color: green;
}

.card--center {
  text-align: center;
}

Welke variatie kan ik nog maken door de 2 variatie-classes te combineren?

<article class="card card--green card--center">
  <h3 class="card__title">Card title</h3>
  <h4 class="card__subtitle">Secondary title</h4>
  <p class="card__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
  <a class="card__button" href="...">Action 1</a><a href="...">Action 2</a>
</article>

Componenten benoemen

Een groene card die ook gecentreerd is!

Hoeveel variaties van de "card" zijn mogelijk als we deze CSS extra toevoegen?

.card--funky {
  border-radius: 80px 0px 80px 0;
  border: 6px solid black;
}
.card {
  border: 1px solid #333;
  padding: 1rem;
  background: #FFF;
}

.card__title {
  font-size: 2rem;
}

.card__button {
  color: blue;
  text-transform: uppercase;
}

.card--green {
  background: green;
  color: #FFF;
}

.card--green .card__button {
  color: green;
}

.card--center {
  text-align: center;
}

.card--funky {
  border-radius: 80px 0px 80px 0;
  border: 6px solid black;
}

Class naming convention

Een naamgevings conventie wanneer we onze classes schrijven.

  1. Maakt je selectors meer verstaanbaar door gewoon de naam te lezen.
  2. Maakt duidelijk op welke plaats je classes kunt hergebruiken in HTML
  3. Het maakt de relaties duidelijk tussen classes.

Class naming convention

Een meer uitgebreide blogpost over BEM

Kies een classname voor het volgende onderdeel:

 .mario

?

Kies een classname voor het volgende onderdeel:

?

.mario__shoe

 ?

Kies een classname voor het volgende onderdeel:

.mario__glove

?

Kies een classname voor het volgende onderdeel:

 ?

.mario__head

Kies een classname voor het volgende onderdeel:

 .mario__face

?

Kies een classname voor het volgende onderdeel:

 ?

 .mario__eye

Kies een classname voor het volgende onderdeel:

 .mario__eye

 ?

 .mario__eye
 ?

Kies een classname voor het volgende onderdeel:

 .mario__eye

 .mario__eye--left

 .mario__eye
 .mario__eye--right

Kies een classname voor het volgende onderdeel:

 .mario

 ?

Kies een classname voor het volgende onderdeel:

 .mario

 .mario--baby

Class naming convention

Maak logische classnames:

👎 .mario--male__head__eyes--left--blue

👍 .eye--left .eye--blue

 

Elke class doet iets specifiek!

Opdracht @home

Class-based jungle

Media queries

Componenten

Media queries

Media queries worden gebruikt om vanuit CSS een onderscheid te kunnen maken om conditioneel stijl toe te passen in bepaalde scenarios.

 

Conceptueel: Als [media-query] dan [CSS].

Media queries

Als scherm breder is dan 20rem, mag de text in het midden uitgelijnd worden.

 

.card {
  text-align: left;
}

@media(min-width: 20rem) {
  .card {
    text-align: center;
  }
}

Media queries

Als scherm breder is dan 20rem, mag de ".card" 20% breedte hebben.

 

.card {
  text-align: left;
  color: blue;
  padding: 1rem;
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

Media queries

Als scherm tussen 20rem en 50rem is, mag de ".card" 20% breedte hebben.

 

.card {
  ...
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

@media(min-width: 50rem) {
  .card {
    width: 100%;
  }
}

Media queries

Media queries dragen niet bij tot de specificiteit!

.card {
  ...
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

@media(min-width: 50rem) {
  .card {
    width: 100%;
  }
}

0 - 0 - 0

0 - 0 - 0

Media queries

Media queries dragen niet bij tot de specificiteit!

.card {
  ...
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

@media(min-width: 50rem) {
  .card {
    width: 100%;
  }
}

Mobiel is het belangrijkste,

we gaan dus van mobiel naar desktop

Media queries

Zorg er wel voor dat je de media queries in de juiste volgorde plaatst.

@media(min-width: 50rem) {
  .card {
    width: 100%;
  }
}

.card {
  ...
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

👎

Media queries

Plaats de media queries bij het component dat je aan het stijlen bent.

.card {
  ...
  width: 100%;
}

@media(min-width: 20rem) {
  .card {
    width: 20%;
  }
}

.my-title {
  color: green;
} 

@media(min-width: 20rem) {
  .my-title {
    color: blue;
  }
}

Media queries

👎 Gebruik geen max-width als media query, want dat breekt het principe van mobile-first. 

.card {
  ...
  width: 100%;
}

@media(max-width: 20rem) {
  .card {
    width: 20%;
  }
}

Opdracht @home

Mario IV - Queries

Web Design Deel 10: Componenten

By Evelien Rutsaert

Made with Slides.com

Web Design Deel 10: Componenten

class-based theming, class-naming convention, Media queries.

  • 296

More from Evelien Rutsaert