Responsive Web pagina

Info

We gaan hier een responsive web pagina maken, een pagina die dus goed zichtbaar is zowel in tekst, afbeeldingen en alle andere compomenten die je op de pagina wilt hebben.

We gaan beginnen met de HTML pagina te maken.

HTML document

Type of kopiëer de onderstaande code naar een nieuw document en sla deze op als index.html.

<!DOCTYPE html>
<html>
  <head>
    <!-- Title -->
    <title>Nieuwe pagina</title>
    <!-- Meta -->
    <meta charset="utf-8">
    <!-- BEGIN meta viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- EINDE meta viewport-->
    <meta name="description" content="" />
    <!-- Links -->
    <link rel="icon" href="favicon.png" sizes="32x32" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <!-- BEGIN inhoud -->
    <header class="header">
      <div class="row">
        <div class="col-6"><img alt="logo" class="image" src="logo.png"/></div>
        <div class="col-6"><h1>Header</h1></div>
      </div>
    </header>

    <nav class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
      </a>
    </nav>

    <main class="wrapper">
      <h1>Welkom</h1>
      <div class="row">
        <div class="col-4">
          <p class="lorem-sm"></p>
          <p class="lorem-sm"></p>
        </div>
        <div class="col-8">
          <p class="lorem-lg"></p>
        </div>
      </div>

      <div class="row">
        <div class="col-8">
          <p class="lorem-sm"></p>
        </div>
        <div class="col-4">
          <img alt="delft" class="image" src="delft.png"/>
        </div>
      </div>
    </main>

    <footer class="footer">
      <div class="row">
        <div class="col-6">
          <h5>Copyright</h5>
        </div>
        <div class="col-6">
          <h5>Footer</h5>
        </div>
      </div>    
    </footer>

    <!-- EINDE inhoud -->
    <script>
      function myFunction() {
      var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
        x.className += " responsive";
      } else {
        x.className = "topnav";
      }
      }
    </script>
  </body>
</html>

kopiëer de twee onderstaande foto's door er met je rechter muisknop op te klikken en te kiezen voor Afbeelding opslaan als naar de zelfde folder als waar je index.html hebt opgeslagen.

Als je index.html in je browser opstart, ziet het er ongeveer als volgt uit.

Ziet er niet uit, niet waar?

Laten we daarom maar snel met het stijl document beginnen, want met de CSS die we daar gaan schrijven en met een heel belangrijke code regel in het HTML document zorgen we er voor dat de pagina zich goed gedraagd op elke schermgrootte.

De belangrijke code regel in het HTML documen is:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Deze code staat tussen <head></head> code.

Met deze meta vertel je de ontvangende browsers dat ze de originele waarden van het apparaat moeten volgen. Als je dit niet zou doen dan proberen de meeste browsers de site aan te passen aan het apparaat, en dit gaan we zelf al doen. Dus zonder deze meta zouden er hele rare dingen kunnen gebeuren.

CSS document

Type of kopiëer de onderstaande code naar een nieuw document en sla deze op als style.css in dezelfde map als je index.html document.

*,*::before,
*::after {
  box-sizing: border-box;
}
html,
body{
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  text-align: left;
}
article, 
aside, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section {
  display: block;
}
body{
  margin: 0;
}

Met de code *,*::before,*::after {box-sizing: border-box;} bepalen we dat alle elementen in ons style document de grootte hebben van border-box, dit zorgt er voor dat de elementen netjes op het scherm passen.

Voorts zetten we de de letter font, letter grootte, de achtergrond en letter kleur en zorgen dat de tekst uitlijning standaard links is. Alle belangrijke elementen worden dan standaard als block weer gegeven.

Vervolgens halen we de standaard margin van de pagina weg door deze op nul te zetten. body{margin: 0;}

Nu voegen we een class van een responsive .wrapper toe.

Voeg de volgende regels aan het style.css document toe:

.wrapper{
  max-width: 1200px;
  margin: auto;
  padding: 16px;
}

Met de code max-width: 1200px; geven we aan dat de wrapper niet breder dan 1200 px mag worden maar wel kleiner. Hij wordt dus automatisch smaller als het beeldscerm kleiner is.

Met de code padding: 16px; geven we rondom een white space van 16px voor de inhoud van de wrapper.

Met de code margin: auto; zorgen we dat de wrapper gecentreerd wordt weergegeven.

Nu gaan we het responsive grid maken. Ook nu gaan we weer percentages gebruiken. Het is een goed gebruik om bij het maken van een grid uit te gaan van de kleinere schermen en naar de grotere schermen toe te werken.

Altijd eerst ontwerpen voor mobiel!

Voeg de volgende regels aan het style.css document toe:

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  position: relative;
  width: 100%;
  padding: 6px 16px;
}
@media (min-width: 769px){
  .col-1 {-ms-flex: 0 0 8.333333%;flex: 0 0 8.333333%;max-width: 8.333333%;}
  .col-2 {-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;}
  .col-3 {-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;}
  .col-4 {-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;}
  .col-5 {-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;}
  .col-6 {-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;}
  .col-7 {-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;}
  .col-8 {-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;}
  .col-9 {-ms-flex: 0 0 75%;flex: 0 0 75%;max-width: 75%;}
  .col-10 {-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;}
  .col-11 {-ms-flex: 0 0 91.666667%;flex: 0 0 91.666667%;max-width: 91.666667%;}
  .col-12 {-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;}
}

Voor de grid gaan we een rij maken row en verschillende kolommen col-* waarbij de asterisk staat voor een cijfer van 1 tot 12. Dit komt omdat ons grid uit maximaal 12 kolommen kan bestaan en we geven die kolommen dus een breedte van een gedeelte van 100%.

Zo is bv col-1 = 8.333333% en col-2 = 16.666667% enz.

De totale optelsom van de kolommen in een rij moet dus altijd 12 zijn (12 = 100%)

Dus col-3 + col-3 + col-6 = 12 dus 100%

De rij is een display: flex; van het grid blok en absoluut noodzakelijk!

We beginnen dan met het op 100% zetten van alle kolommen, de mobiel eerst regel.

Dan gaan we de grid geschikt maken voor de grotere schermen, in dit geval vanaf 768px.(tablet)

Dit doen we door het @media commando te gebruiken. Dit commando is ingevoerd sinds CSS3 en zorgt dat alle eigenschappen binnen dat blok uitgevoerd worden als een bepaalde waarde waar is.

In dit geval geven we aan dat het commando de eigenschappen binnen zijn blok moet uitvoeren als een scherm breder is dan 768px min-width: 769px.

Nu gaan we een header en een footer toevoegen.

Voeg de volgende regels aan het style.css document toe:

.header{
  padding: 32px;
  width: 100%;
  color: #fff;
  background-color: #0000ff;
  text-align: center;
}
.footer{
  padding: 16px;
  width: 100%;
  color: #fff;
  background-color: #555;
  text-align: center;
}

De header heeft een padding: van 32px en de footer een padding: van 16px, beiden hebben de breedte van 100%, een tekstkleur en een achtergrondkleur en de tekst is gecentreerd.

Nu gaan we een eenvoudig maar wel responsive menu toevoegen. Over het maken van een mooi responsive menu is een apparte pagina gemaakt. Daarom hier geen uitleg over dit menu.

Voeg de volgende regels aan het style.css document toe:

.topnav {
  overflow: hidden;
  background-color: #333;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.125rem;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
  .topnav .icon {
  display: none;
}
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {float: right;display: block;}
}
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {position: absolute;right: 0;top: 0;}
  .topnav.responsive a {float: none;display: block;text-align: left;}
}

Nu nog een paar ondersteunende classes (helper classes).

Voeg de volgende regels aan het style.css document toe:

.lorem-sm::after{
  content:"Lorem ipsum.Nulla elementum tristique ultricies. Etiam sit amet felis leo, non imperdiet sapien. Suspendisse venenatis, erat ac mollis sagittis, nulla arcu semper felis, a tempus dolor nibh in est."
}
.lorem-lg::after{
  content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies condimentum velit vel scelerisque. Nam id libero sit amet libero ultrices interdum dignissim nec lorem. Maecenas placerat massa sit amet augue interdum rutrum. Fusce vel lectus arcu. Quisque quis elit et lorem suscipit faucibus a ut odio. Proin ut ante consectetur dui mattis pulvinar non quis neque. Proin ultrices lectus vel orci lacinia a iaculis nibh hendrerit. Mauris sagittis aliquam odio vitae pulvinar. Suspendisse id dolor nibh, sed consectetur sem. Phasellus lacinia laoreet sem, ac ultrices libero lobortis quis. Morbi accumsan tempus neque, sed varius lectus molestie imperdiet. Vivamus porttitor facilisis nunc, sed feugiat quam adipiscing ac. Quisque dolor tellus, porta in ultrices sit amet, luctus sed nunc. Quisque sodales scelerisque orci sed ullamcorper. Nunc nisl arcu, dignissim sed tempor eget, blandit a massa. Praesent ut metus enim, in dictum felis. Integer sagittis ipsum eu mauris lacinia rhoncus. Mauris turpis ligula, dapibus nec rhoncus bibendum, tristique eu nunc. Duis dapibus blandit justo et auctor. Nunc non elit vel diam luctus ullamcorper."
}
.image{
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

We hebben een resposive webpagina gemaakt, open index.html in je browser en verklein je browser om de effecten te kunnen zien.

Na het opstarten op een groot scherm ziet de pagina er ongeveer zo ui:

Op een kleiner scherm ongeveer als volgt:

Als je wilt kun je de bovenstaande bestanden ook in zijn geheel dowloaden:

Download de zip