JW-NL Framework

Bouw je eigen site of template

Jan W. Webdesign

Jan W. Webdesign bouwt een framework om zelf eenvoudig een website of template te bouwen. De gebruikte Html en Css code voldoen 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 scherm en device juist getoond.

Dit framework is nog in ontwikkeling, download eenvoudig het bestand jw.css en gebruik deze pagina om het bouwen van je site of template te leren.

Vrijwel alle html-elementen kunnen worden opgemaakt met de "classes" uit het jw.css bestand, verderop in deze pagina worden ze beschreven, ze beginnen allemaal met "jw-"

Basis html code om te beginnen

Onderstaand vindt je de basis html-code om een begin te maken, plaats deze code in een leeg .html bestand.

<!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>
<div class="jw-rij">
<div class="jw-kolom-m4">jw-kolom-m4</div>
<div class="jw-kolom-m8">jw-kolom-m8</div>
</div>
</body>
</html>

Resultaat:

jw-kolom-m4
jw-kolom-m8

Responsive grid voor tablets

m1
m11
m2
m10
m3
m9
m4
m8
m5
m7
m6
m6
m7
m5
m8
m4
m9
m3
m10
m2
m11
m1
m12

Verschillende kleuren

jw-lichtrood #ff8080
jw-rood #ff0000
jw-donkerrood #b30000
jw-lichtblauw #add8e6
jw-blauw #0000ff
jw-donkerblauw #00008b
jw-lichtgrijs #d3d3d3
jw-grijs #808080
jw-donkergrijs #696969
jw-lichtgroen #32cd32
jw-groen #008000
jw-donkergroen #006400

jw-tekst-rood, jw-tekst-blauw, jw-tekst-grijs, jw-tekst-groen, Het standaard lettertype is Verdana met een grootte van 14px.

Responsive grid voor desktops

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12

Deze tekst staat met "jw-tekst-midden" in het midden uitgelijnd.

Deze tekst staat met "jw-tekst-rechts" aan de rechterkant uitgelijnd.

Een tabel

Voornaam Achternaam Punten
Wim Willemsen 50
Kees Bos 94
Hans Dijksma 67

Een lijst maken

Een kaart maken

Dit een jw-kaart met schaduw, door er meer tekst in te zetten wordt de kaart wat groter en is het effect van de schaduw beter te zien.

Dit een jw-kaart-2 met schaduw, door meer tekst in te zetten wordt de kaart wat groter en is het effect van de schaduw beter te zien.

Dit een jw-kaart-4 met schaduw, door meer tekst in te zetten wordt de kaart wat groter en is het effect van de schaduw beter te zien.

Class overzicht van jw.css

Footer 1
Footer 2
Footer 3