Jan W. Webdesign

JW-NL Framework, ontwerp je eigen site

Met het JW-NL Framework ontwerp je eenvoudig een eigen website of template. Dit JW-NL Framework werkt met een “jw.css” bestand waar de opmaak in staat beschreven. Ieder Html element kan worden voorzien van een “class” om de opmaak en uitstraling te kiezen. De Css-code voldoet aan de richtlijnen van het W3C, de website of template gemaakt met dit framework is “mobile first” en volledig responsive en wordt hierdoor op ieder device juist getoond, download het jw.css bestand.

Basis html-code om te beginnen

Onderstaand vindt je de basis html-code die nodig is om een begin te maken:

<!DOCTYPE html>
<html lang="NL">
<head>
<title>JW-NL Framework</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="jw.css">
</head>
<body>
<p>Hier komt de inhoud.</p>
</body>
</html>



Ontwerpen met rijen en kolommen

De website of template wordt opgebouwd met rijen en kolommen, er zijn 12 kolommen in verschillende breedtes. Iedere rij kan meerdere kolommen bevatten, maar opgeteld zijn ze 12. Hieronder een voorbeeld om het te verduidelijken:

<div class="jw-rij">
<div class="jw-kolom-12">jw-kolom-12</div></div>

<div class="jw-rij">
<div class="jw-kolom-2">jw-kolom-2</div>
<div class="jw-kolom-7">jw-kolom-7</div>
<div class="jw-kolom-3">jw-kolom-3</div></div>

<div class="jw-rij">
<div class="jw-kolom-4">jw-kolom-4</div>
<div class="jw-kolom-4">jw-kolom-4</div>
<div class="jw-kolom-4">jw-kolom-4</div></div>

De opbouw is met div’s waaraan een “class” wordt toegevoegd, “jw-rij” en “jw-kolom-2” bepalen de opmaak en het uiterlijk van de div’s. Een voorbeeld van bovenstaande code is hier te bekijken.

De werkpagina van het JW-NL Framework kan je hier bekijken.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *