Omdat CSS layout zo lastig is, zijn er CSS frameworks beschikbaar om het eenvoudiger te maken. Hier zijn er een aantal als je ze wilt proberen. Het gebruik van een framework is alleen een goed idee als het doet wat je site moet gaan doen. Ze zijn niet een vervanger om te weten hoe CSS werkt.

Voor meer info surf naar Bootstrap

Bootstrap's grid-systeem maakt het mogelijk tot 12 kolommen over de pagina.

Surf naar w3schools, verander de opbouw ipv col-md-4 maak je col-md-3 ervan en dubbliceer je een 4de kolom. Belangrijkste regel als je de getallen optelt mag het niet meer zijn dan 12!

Grid Classes

Het Bootstrap grid-systeem heeft vier klassen:
  • xs (Voor telefoons - schermen minder dan 768px breed)
  • sm (Voor tabletten - schermen gelijk aan of groter dan 768px breed)
  • md (Voor kleine laptops - schermen gelijk is aan of groter dan 992px breed)
  • lg (Voor laptops en desktops - schermen gelijk is aan of groter dan 1200px) breed)

De bovenstaande klassen gecombineerd kunnen worden om meer dynamische en flexibele layouts.

Tip: Elke klas schalen, dus als u dezelfde breedte instellen voor xs en sm, hoeft u alleen maar xs specificeren.

Surf naar w3schools, verander de opbouw ipv col-md-4 maak je col-md-3 ervan en dubbliceer je een 4de kolom. Belangrijkste regel als je de getallen optelt mag het niet meer zijn dan 12!

Sommige Bootstrap grid-systeem regels met vooraf gedefinieerde klassen:

  • .container(vaste breedte) of .container-fluid (volledige breedte) voor de juiste uitlijning en opvulling
  • Rijen .row worden binnen de container geplaatst.
  • Content moet binnen de kolommen .col-sm-1 - .col-md-12 worden geplaatst. Bijvoorbeeld drie gelijke kolommen roep je drie x .col-sm-4 op.
  • We gaan padding oproepen binnen de kolom inhoud om afstand te behouden.
Het volgende is een basisstructuur van een Bootstrap raster:
<div class="container">

<div class="row">
<div class="col-*-*"> </div>
<div class="col-*-*"> </div>
</div>

<div class="row">
<div class="col-*-*"> </div>
</div>

<div>

Uit het voorbeeld van vorige tab ziet de code er zo uit voor 3 kolommen.

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
   </div>
  </div>
</div>

Nadeel voor het Bootstrap-grid is dat je heel veel div-tags begint te krijgen. Hierdoor krijg je vaak problemen met het teveel of te weinig afsluiten van een div-tag. We maken gebruik van het CSS-bestand flexboxgrid.css. We gaan de belangrijkste klassen uitleggen.

Geef je structuurelement de klasse 'row' mee = display:flex = weergave flexibel (aanpasbaar van verschillende mediums).
Je kan ook .row-reverse of .col.reverse oproepen. De HTML-code ziet er zo uit:

<header id="section1" class="row">
     ...
</header>
	

De CSS-code van .row staat voor:

.row {
	/* de breedte van een element heeft geen invloed op randen en padding */
  box-sizing: border-box;
	/* flexibele weergave */
  display: flex;
	/* flexibele schaling in de breedte verdeelt -  standaard waarde (alles even breed - maar niet 100% vullend binnen de breedte) */
  flex: 0 1 auto;
	/* flexibele richting in rijen onder elkaar plaatsen */
  flex-direction: row;
	/*  elementen binnen de hoogte mogen onder elkaar komen (rijen maken)  */
  flex-wrap: wrap;
  margin-right: -1rem;
  margin-left: -1rem;
}
	

Bekijk bij elk onder de uitleg op w3school: display - flex & grow & basis - direction - wrap

De kolombreedte klassen zijn hetzelfde van breedte als bij bootstrap. Wil je een kolom oproepen dan doen we dit zoals bootstrap met de klasse '.col-xs-...' van nummer 1 tot nummer 12.

.col-xs-1 {
  flex-basis: 8.333%;
  max-width: 8.333%;
}
.col-xs-2 {
  flex-basis: 16.667%;
  max-width: 16.667%;
}
.col-xs-3 {
  flex-basis: 25%;
  max-width: 25%;
}
.col-xs-4 {
  flex-basis: 33.333%;
  max-width: 33.333%;
}
.col-xs-5 {
  flex-basis: 41.667%;
  max-width: 41.667%;
}
.col-xs-6 {
  flex-basis: 50%;
  max-width: 50%;
}
.col-xs-7 {
  flex-basis: 58.333%;
  max-width: 58.333%;
}
.col-xs-8 {
  flex-basis: 66.667%;
  max-width: 66.667%;
}
.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}
.col-xs-10 {
  flex-basis: 83.333%;
  max-width: 83.333%;
}
.col-xs-11 {
  flex-basis: 91.667%;
  max-width: 91.667%;
}
.col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

Je kan specifieke eigenschappenn oproepen voor enkel mobiel, tablet, kleinder of een groter scherm: col-xs staat voor schermbreedte: max 752px of mobiel

	@media only screen and (max-width: 47em) {
  .container {
		/* 1 rem = root font-size is 16px = 47 x 16 = max. 752px */
    width: 47rem;
  }
	
col-sm staat voor schermbreedte: min. 768px of tablet
	@media only screen and (min-width: 48em) {
		/* 1 rem = root font-size is 16px = 48 x 16 = min. 768px */
  .container {
    width: 46rem;
  }
	
col-md staat voor schermbreedte: min. 992px of klein scherm
	@media only screen and (min-width: 62em) {
		/* 1 rem = root font-size is 16px = 62 x 16 = min. 992px */
  .container {
    width: 61rem;
  }
	
col-lg staat voor schermbreedte: min 1200px of groot scherm
	@media only screen and (min-width: 75em) {
		/* 1 rem = root font-size is 16px = 75 x 16 = min. 1200px */
  .container {
    width: 71rem;
  }

Dan heb je specifieke klassen om de eigenschap horizontaal uitlijnen op te roepen.

.start-xs {
  justify-content: flex-start;
  text-align: start;
}
.center-xs {
  justify-content: center;
  text-align: center;
}
.end-xs {
  justify-content: flex-end;
  text-align: end;
}
.around-xs {
  justify-content: space-around;
}

.between-xs {
  justify-content: space-between;
}

Dan heb je specifieke klassen om de eigenschap verticaal uitlijnen op te roepen.

.top-xs {
  align-items: flex-start;
}
.middle-xs {
  align-items: center;
}
.bottom-xs {
  align-items: flex-end;
}

MockFlow

Voor je de website technisch gaat samen stellen, overleg je eerst met de klant de menu (sitemap) en de inhoud (wireframe). Met behulp van MockFlow kan je dit snel samenstellen.

Mobirise

Via het gratis software pakket Mobirise kan je uit een groot gamma kiezen. Download de software hier.
Je vindt ook eenvoudige uitleg onder deze link. De standaard inhoud is gratis maar voor een ander template of extensies moet je voor betalen.

Een alternatief is nicepage, hier zijn niet alle elementen gratis.