Responsive

Web Pagina

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.

HTML Pagina

We gaan beginnen met de HTML pagina te maken.

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

<!DOCTYPE html>

<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>Responsive pagina</title>
<!-- viewport is noodzakelijk om een goede responsive pagina te bouwen Het verteld de ontvanger hoe te reageren op de site.-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Hier de omschrijving va je pagina" />
    <link rel="icon" href="favicon.png" sizes="32x32"/>    
    <link rel="stylesheet" href="./style.css"/>
    <script script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  </head>
  <body>
<!--Header-->    
    <header class="blue padding">
      <div class="row align-items-center">
        <div class="col">
          <div class="fit-content midle">
            <a class="display-none display-r-block" href="https://www.blonk-postuma.nl"><img alt="logo" class="image" src="./logo-f-200x200.png"></a>
            <a class="display-r-none display-block" href="https://www.blonk-postuma.nl"><img alt="logo" class="image" src="./logo-f-50x50.png"></a>
          </div>
        </div>
        <div class="col">
          <h1>Build Things</h1>
        </div>
      </div>
    </header>
<!--Menu-->    
    <a class="toggle" href="javascript:void(0)">Menu</a>
    <ul class="navbar">        
      <li><a class="active" href="index.html">Home</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)">Dropdown 1</a>
        <ul class="dropdown-menu">
          <li><a href="#">Pagina Link 1</a></li>
          <li><a href="#">Pagina Link 1</a></li>
          <li><a href="#">Pagina Link 1</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="javascript:void(0)">Dropdown 2</a>
        <ul class="dropdown-menu">
          <li><a href="#">Pagina Link 2</a></li>
          <li><a href="#">Pagina Link 2</a></li>
          <li><a href="#">Pagina Link 2</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
<!--Inhoud-->
    <main class="container">
      <h1 class="center">Lorem</h1>
      <p>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.</p>
      <h4>Reponsive grid</h4>
      <p class="red"><strong><code>row col col</code></strong></p>
      <div class="row">
        <div class="col">
          <p>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.</p>
        </div>
        <div class="col">
          <p>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.</p>
        </div>
      </div>
      <p class="red"><strong><code>row col-4 col-8</code></strong></p>
      <div class="row">
        <div class="col-4">
          <p>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.</p>
        </div>
        <div class="col-8">
          <p>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.</p>
        </div>
      </div>
    </main>
    <footer>
      <div class="row align-items-center center">
        <div class="col">
          <img alt="logo" class="image image-center" src="./logo-f-50x50.png.png">
        </div>
        <div class="col">
          <p>Copyright Henk Blonk</p>
          <p>All right reserved <span id="year"></span></p>
        </div>
        <div class="col">
          <p><a href="mailto:henk@blonk-postume.nl">Webmaster</a></p>
        </div>
      </div>
    </footer>
<!--Scripts-->
    <script src="./scripts.js"></script>
  </body>
</html>

De belangrijkste code is het volgende in het <head> </head> gedeelte
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Deze meta zorgt er voor dat de ontvangende browser de instellingen in jouw code uitvoert in de verschillende breekpunten.

Download de beide afbeeldingen en sla die op in de zelfde map waar je index.html hebt staan.

Klik met de rechter muisknop en selecteer Afbeelding opslaan als...

Start de pagina index.html op en je pagina ziet er ongeveer als volg uit:

Ziet er nog niet uit... Laten we daarom beginnen met het maken van het CSS script.

CSS Pagina

Type of kopiëer de onderstaande code naar een nieuw document en sla deze op als style.css in de zelfde map als je HTML pagina.

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

Om te beginnen moeten we alle elementen een box-sizing van border-box geven, dit is belangrijk voor het maken van een responsive pagina.

*, *::before, *::after {box-sizing: border-box;} *,::after, ::before{box-sizing: border-box;}

Vervolgens gaan we het font bewerken, de achtergrond en tekst kleur bewerken.

body, html{font-family: Verdana, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; background-color: #fff; color: #000; text-align: left;}

Dan zorgen we dat de volgende elementen als een blok worden weergegeven.

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section{display: block;}

Ons werkveld moet geen marge hebben.

body{margin:0}

Type of kopiëer de onderstaande code in het style.css document en sla het op.

/* */
/*  RESPONSIVE  */
/* */
.container {
  max-width: 1200px;
  padding: 16px;
  margin: 0 auto;
}
.row{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.col,
.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;
  padding: 8px 16px;
  width:100%;
}
@media (min-width:768px){
.col{
  -ms-flex-preferred-size:0;
  flex-basis:0;
  -ms-flex-positive:1;
  flex-grow:1;
  min-width:0;
  max-width:100%;
}
.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%;
}
}

We gaan nu het responsive gedeelte behandelen, zoals je ziet zijn alle width codes niet door px maar door procenten gemaakt

Het eerste wat we doen is een container maken waarin we de inhoud van onze pagina kunnen plaatsen.

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

De container mag niet wijder zijn dan 1200px vandaar max-width: 1200px; maximaal 1200px maar wel minder dus. We geven het ook een padding van 16px rondom en plaatsen de container in het midden van het scherm margin: 0 auto;

Dan gaan we een grid maken met een rij en kolomen.

De rij heeft een flex display .row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}

De col kolom verdeeld de inhoud in het aantal kolommen die je in een rij gebruikt, waar het maximum 12 kolommen is.

col

De kolommen col-1 tot en met col-12 hebben een breedte van 8.333333%; tot 100% en kun je dus met elkaar combineren.

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-12

Het breekpunt is @media (min-width:768px)

Verklein je browser om het effect te zien.

Type of kopiëer de onderstaande code in het style.css document en sla het op.

/* */
/*  HELPERS  */
/* */
a {
  color: #bb2649;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}
.align-items-center{
  -ms-flex-align:center!important;
  align-items:center!important;
}
.blue {
  background-color: #0f4c81;
  color: #f4f4f4;
}
.red {
  color: #bb2649;
}
.fit-content {
  width: fit-content !important;
}
.midle {
  margin: 0 auto !important;
}
.center {
  text-align: center !important;
}
.padding {
  padding: 20px;
}
.image{
  max-width:100%;
  height:auto;
  display:block;
}
.image-center{
  display:block;
  margin:auto;
}
.display-none{
  display:none!important;
}
.display-block{
  display:block!important;
}
@media (min-width:768px){
.display-r-none{
  display:none!important;
}
.display-r-block{
  display:block!important;
}
}
footer {
  border-top: 2px solid #0f4c81;
}

Met de helpers zorgen we dat bv de linken a worden vorm gegeven, het horizontaal uitlijnen van de elementen align-items-center, kleur classes gemaakt blue en red, dat een element de breedte van de inhoud aan neemt fit-content, zet elementen in het midden midle en tekst in het midden center, geef een element een padding van 20px padding, maak afbeeldingen responsive image en plaats die in het midden image-center, met de display classes maak je een element zichtbaar of onzichtbaar naar gelang het breekpunt display-blockdisplay-none responsive: display-r-blockdisplay-r-none. En ten slot wordt de footer vorm gegeven.

Type of kopiëer de onderstaande code in het style.css document en sla het op.

/* */
/*  NAVBAR  */
/* */
a.toggle{
  display: block;
  padding: 20px;
  color: #FFFFFF;
  background: #0f4c81;
  text-decoration: none;
  position: sticky;
  top: 0;
  z-index: 1000;
}
a.toggle::after{
  content:"\2630";
  float: right;
  font-weight: bold;
  font-size: 1.5rem;
}
a.toggle.responsive::after{
  content:"\2716";
  float: right;
  font-weight: bold;
  font-size: 1.5rem;
}
a:hover.toggle{
  text-decoration: underline;
}
ul.navbar{
  display: none;
  padding: 16px;
  list-style: none;
  background: #0f4c81;
  margin: 0;
  position: sticky;
  top: 55px;
  z-index: 1000;
}
ul.navbar li{
  display: block;
  position: relative;
  line-height: 21px;
  text-align: left;
}
ul.navbar li a{
  display: block;
  padding: 8px 16px;
  color: #FFFFFF;
  text-decoration: none;
}
ul.navbar li a:hover:not(.active){
  text-decoration: underline;
}
ul.navbar li.dropdown a::after{
  content:"\A0\A0\25BC";
  float:right;
}
ul.navbar li.dropdown.clickbtn a::after{
  content:"\A0\A0\25B2";
  float:right;
}
ul.navbar li ul.dropdown-menu{
  margin: 0;
  padding: 0;
  min-width: 100%;
  background: #f4f4f4;
  box-shadow: 2px 4px #adb5bd;
  display: none;
  position: absolute;
  z-index: 999;
  left: 0;
}
ul.navbar li ul.dropdown-menu a {
  color: #000000 !important;
}
ul.navbar li ul.dropdown-menu a::after{
  content: "";
}
ul.navbar li.clickbtn ul.dropdown-menu a::after{
  content: "";
}
ul.navbar li ul.dropdown-menu li{
  display: block;
}
ul.navbar .active{
  border: 1px solid;
}
@media (min-width:768px){
  ul.navbar{
    display: block !important;
    position: sticky;
    top: 0;
}
  ul.navbar li{
    display: inline-block;
}  
  a.toggle{
    display: none;
}    
}

Uitleg over het responsive menu navbar vind je in de web-navigatie pagina.

Nu moeten we nog een javascript pagina aanmaken, zodat de menus werken.

Jquery JS Pagina

Type of kopiëer de onderstaande code in een nieuw pagina scripts.js en sla die op in de zelfde map als de overige documenten.

// year
$(document).ready(function(){
    var myDate = new Date();
    var myYear = myDate.getFullYear();
    
    $('#year').text(myYear);
  });
//dropdown menu
$(document).ready(function(){
  // Show hide popover
  $(".dropdown").click(function(){
      $(this).toggleClass("open").toggleClass('clickbtn').find(".dropdown-menu").slideToggle("fast");
      $(".open").not($(this)).find(".dropdown-menu").slideUp("fast");
      $(".open").not($(this)).toggleClass('clickbtn').removeClass("open");
  });
});
$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".dropdown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.dropdown-menu').slideUp("fast");
        $(".open").toggleClass('clickbtn').removeClass("open");
    }
})
//navbar
$(document).ready(function(){
  $("a.toggle").click(function(){
      $("ul.navbar").slideToggle("fast");
      $("a.toggle").toggleClass("responsive");
  });
});

Over de uitleg van dit Jquery javascript verwijs ik naar de volgende site's:

w3schools.com

tutorialrepublic.com

Als je index.html nu opstart ziet het er ongeveer als volgt uit:

Download de bestanden