Dreambits Framework

Geen nieuwe cursus ditmaal, maar een frontend framework! Wat is dat? Dat is een verzameling bestanden (HTML, CSS en Javascript) waarmee je snel zelf een geheel eigen site kunt bouwen. Een framework is dus een soort blokkendoos van meteen te gebruiken bouwblokken waar je meteen mee aan de slag kunt.

Want, ondanks dat je op deze site HTML en CSS kunt leren, is het daarna altijd nog een uitdaging: hoe ga ik nu een site bouwen? Dit framework sluit daar op aan.

Wat is het

Met dit framework kun je een sjabloonpagina openen in je eigen HTML editor, en deze aanpassen hoe je maar wilt.

In beginsel start je met 3 blokken: Navigatie (en eventueel een Header), Content en Footer. In de content komt de inhoud van de pagina. De header en footer worden op iedere pagina ingeladen met javascript. Dat is steeds hetzelfde bestand, zodat je door heel je site dezelfde hebt. Pas je dus de navigatie aan (een link erbij of eentje weg) dan wordt dat automatisch door je hele site doorgevoerd. Net zo werkt de footer.

Alles is geheel responsive, dus je site zal ook op mobiel goed werken. Een mobiel menu is ingebouwd. Alle opmaak is geregeld in handige CSS custom properties (dat zijn een soort van variabelen). Dus je kunt makkkelijk aanpassingen maken die door de hele site worden doorgevoerd.

Alles is gemaakt met standaard HTML, CSS en Javascript. Het werkt dus overal, je hoeft het nooit te updaten en je kunt het helemaal aanpassen zoals je zelf wilt. Wil je bijvoorbeeld een andere navigatie op een bepaalde pagina, dan is dat heel simpel door te voeren. Idem dito voor de footer. Je kunt ook simpelweg navigatie en footer weglaten, bijvoorbeeld voor landing pages.

Wat zit er in

Pagina sjablonen:

  • Simpele basispagina zonder javascript
  • Basispagina met content gedeelte en javascript voor automatisch inladen van header en footer. Dit is de basis voor alle verdere pagina sjablonen
  • Basis met extra zijbalk
  • Basis met twee zijbalken
  • Basis met content in kolommen opgedeeld
  • Drie pagina’s met varianten in de header en navigatie
  • Pagina met vaste breedte

Modules

Dit zijn uitbreidingen die je in elke pagina kunt toepasen, ongeacht het gebruikte sjabloon.

  • Button
  • Cards
  • Picture Lightbox
  • Picture / Text section

De modules zijn toe te passen door het toevoegen van een stukje HTML code in je pagina, soms enkel door het toevoegen van een attribuut.

Javascript

In dit framework zal javascript een vrij belangrijke plaats innemen om de site dynamischer te maken. Om te beginnen is er ingebouwd dat navigatie (header) en footer automatisch ingeladen worden. Want het is bijzonder omslachtig om in een website elke pagina te moeten aanpassen als je een pagina toevoegt en daardoor je navigatie moet aanpassen.
Daarbovenop is nu al toegevoegd dat je andere pagina’s of delen van pagina’s kunt inladen op plaatsen waar je zelf wilt.

Let op !

Consequentie van het gebruik van deze nieuwste vorm van javascript is wel, dat de beveiliging vergroot is door CORS. Het inladen van deze pagina (-delen) kan enkel via het http-protocol, dus het zal niet zomaar meteen vanaf je harde schijf werken! Je zult vanaf een server moeten werken. Gelukkig zijn er tegenwoordig veel mogelijkheden om dit relatief eenvoudig te doen, maar het werpt wel een drempel op. We zullen hier later uitgebreid op in gaan.

Voor nu enkele tips: Sommige webediting software heeft het al ingebouwd, ik gebruik zelf geen Windows, maar Visual Studio (Code) heeft het, zie het nieuwsbericht over deze html editor. Ook met Pinegrow, mijn favorite editor, kun je prima previews krijgen, ook in de browser als je ook Browsersync installeert.

Download en meer info

Framework pages en documentatie
Hier zul je altijd de huidige versie vinden. Let wel op, de documentatie is onvolledig en zal waarschijnlijk ook nooit volledig worden. (Zie verderop)

Download dreamFrame 0.5
Klik op de knop “Code” en daarna download zip

Documentatie

We gaan een aparte cursus inrichten voor het framework, waarin een zo uitgebreid mogelijke documentatie zal komen, inclusief video’s. De cursus is uiteraard inbegrepen in het VIP pakket. Het framework zelf is verder opensource en voor iedereen te downloaden en te gebruiken, maar de documentatie kost weer erg veel extra werk en zal dus niet gratis zijn voor iedereen.

Nieuwe oefeningen HTML5 en CSS3

We hebben uitgebreide oefeningen toegevoegd voor de cursussen HTML5 en CSS3 basis. Na het volgen van elk hoofdstuk van de cursus kun je de bijbehorende oefeningen zelf maken.

Het zip bestand met het Word bestand, alle benodigde bestanden en alle oplossingen van de oefeningen is te downloaden boven de cursusvideo’s. (Je moet wel geabonneerd zijn op de cursus of VIP lid zijn)

Oude cursus HTML-CSS

Help! Heb je een abonnement op de cursus HTML5-CSS3 en kun je hem niet meer vinden? Kijk dan hier.

Natuurlijk is de cursus nog steeds beschikbaar voor abonnees.

Sterker nog: stuur ons een mail en je krijgt gratis en voor niks toegang tot de nieuwe, afzonderlijke cursussen HTML5 en CSS3 gedurende de looptijd van je huidige abonnement.

Cursus HTML5

Leer HTML5 in twee uur! Door middel van 47 video’s leer je vanaf het allereerste begin hoe je een HTML pagina maakt volgens de standaard van het W3C.

Tot en met het opnemen van audio, video en de nieuwste HTML5 semantische tags voor layout elementen.

Alle bestanden die in deze cursus zijn gemaakt zijn bijgevoegd als download, inclusief opdrachten waarmee je het geleerde in de praktijk brengt.

Neem een kijkje en bekijk de gratis bestanden uit deze cursus

Super simpel CSS kolommen maken

Wist je dat je tegenwoordig super simpel kolommen kunt maken? Eén regeltje CSS is voldoende. Bijvoorbeeld twee kolommen definieer je op een HTML element door aan te geven in de CSS: columns:2; zo simpel is het. Alles in deze kolom zal dan in twee even brede kolommen gezet worden, en de kolommen zullen even hoog zijn. Dit is gedefinieerd in de CSS Multi-Column Layout Module van het W3C. Het is een uitbreiding op block layout mode en wordt ondersteund door alle moderne browsers, en zelfs IE 10 en 11.

Aantal kolommen

Hoe werkt het? Stel, je hebt een div element met hierin een paar koppen en verschillende paragrafen. Het is voldoende om aan de div de volgende CSS regel mee te geven: div { column-count:2 } Dit zal er toe leiden dat alle inhoud van de div altijd in twee kolommen wordt weergegeven. Maar, natuurlijk leidt dit tot problemen op bijvoorbeeld telefoons, waar je dit niet zult willen. Lees verder!

Kolom breedte

Naast het aantal kolommen kun je echter ook een breedte van de kolommen opgeven. Deze zal echter niet absoluut gelden, maar is een aanduiding voor de “optimale” breedte van een kolom. Als er meer ruimte is, zullen er meer kolommen worden gemaakt, bij minder ruimte minder.  Bij het opgeven van enkel een breedte, zal het aantal kolommen responsive worden aangepast! div { column-width:20em; }

Aantal en breedte samen

Je kunt echter ook breedte en aantal samenvoegen. Neem de volgende CSS regel: div { column-count:3; column-width:20em; } Er zullen nu drie kolommen worden weergegeven die steeds breder worden op grote schermen. Wanneer er echter niet meer voldoende breedte is, zal het aantal kolommen gereduceerd worden om zoveel mogelijk de gewenste breedte te benaderen. Perfect responsive, zonder media queries!

Kolom marge en rand

Daarnaast biedt de specificatie nog de mogelijkheid om de ruimte tussen kolommen aan te passen met column-gap, en een lijn tussen de kolommen te plaatsen met column-rule. Deze laatste werkt hetzelfde als borders: er kan een soort worden opgegeven, een breedte en een kleur. Bijvoorbeeld: div { columns: 3 20em; column-gap:50px; column-rule: thin solid grey; } Het resultaat en alle code kun je hier bekijken: https://codepen.io/zomtek/pen/xQOgXZ