Tutorial

Introductie

In deze tutorial gebruiken we het Manon-framework om een basiswebpagina te bouwen. We behandelen de volgende onderwerpen:

Een Manon-project opzetten
Een basispagina maken
Een layout maken met header, main en footer
Componenten aan de pagina toevoegen

We doen dit door ons project stapsgewijs bij te werken, volgens de stappen die je waarschijnlijk zou nemen bij het bouwen van een webpagina met Manon.

Je kunt het eindproject en de broncode op GitHub bekijken.

Installatie

Voor de installatie of het gebruik van Manon hebben we drie opties:

Handmatige installatie
Installatie via een CDN
Installatie via npm

In deze tutorial gaan wij uit van de derde optie: installatie via npm. Dit is de aanbevolen methode voor het gebruik van Manon in een project. Zie de Readme op GitHub voor meer informatie over de andere installatie-opties.

Zoals eerder vermeld, gebruiken we npm om onze dependencies te beheren. Zorg er dus voor dat npm op je systeem is geïnstalleerd. Zodra dit is geïnstalleerd, kunnen we beginnen met het bouwen van ons Manon-project.

Eerst moeten we een nieuwe projectmap aanmaken en initialiseren met npm.

    
    # Maak een nieuwe map voor het project
mkdir manon-tutorial
cd manon-tutorial

# Initialiseer het project met npm
npm init -y

Het commando npm init -y maakt een package.json-bestand aan met standaardwaarden. Dit bestand wordt gebruikt om onze dependencies en scripts te beheren.

Laten we ons package.json bijwerken om de benodigde afhankelijkheden op te nemen. Voor nu vervangen we gewoon de inhoud van het package.json-bestand door het volgende:

    
    {
  "scripts": {
    "build": "sass --load-path=node_modules main.scss css/main.css"
  },
  "dependencies": {
    "@minvws/manon": "^18.0.0",
    "@minvws/manon-themes": "^18.0.0"
  },
  "devDependencies": {
    "sass": "^1.92.1"
  }
}

Laten we uitleggen wat we hier hebben gedefinieerd:

@minvws/manon: Dit is het framework van Manon dat de basisstijlen en componenten levert.
@minvws/manon-themes: Dit pakket bevat de thema’s voor Manon, waardoor we eenvoudig verschillende stijlen op onze componenten kunnen toepassen. We hebben een basisthema genaamd icore-open dat we in ons project gaan gebruiken.
sass: Dit installeert de sass-commandline-tool, die we gebruiken om onze sass-bestanden te compileren naar CSS. Hiermee wordt ons main.scss-bestand omgezet in een css/main.css-bestand. Dit wordt aangeroepen door het build-script.
scripts.build: Dit script roept de sass-commandline-tool aan om ons main.scss-bestand te compileren naar css/main.css, dat we in onze HTML gebruiken.

Nu kunnen we de dependencies installeren door het volgende commando uit te voeren:

    
    npm install

Dit commando leest het package.json-bestand en installeert de benodigde dependencies in een node_modules-directory in ons project. Het maakt ook een package-lock.json-bestand aan dat de versies van de geïnstalleerde dependencies vastzet, zodat dezelfde versies in de toekomst worden gebruikt.

De installatie van de dependencies is voltooid zodra het commando npm install klaar is. Daarna kunnen we beginnen met het bouwen van ons project.

Een basispagina maken

In deze sectie maken we een basispagina om te beginnen en ervoor te zorgen dat alles correct is ingesteld. Maak eerst een index.html-bestand in de root van je projectdirectory. Dit wordt het hoofd-HTML-bestand voor onze pagina.

    
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manon Tutorial</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <h1 class="page-title">Hallo, Manon!</h1>
  </body>
</html>

Maak vervolgens een main.scss-bestand in de root van je projectdirectory. In dit bestand voegen we eerst het thema toe dat wij willen gebruiken. In onze tutorial gebruiken we het icore-open-thema.

Daarna importeren we alle componenten van Manon door het @minvws/manon/components/bundles/all-bestand te gebruiken. Dit bestand bevat alle beschikbare componenten in Manon, zodat we ze allemaal in één keer kunnen laden.

Als je niet de hele bundel wilt importeren, kun je ook alleen de specifieke componenten importeren die je nodig hebt. Voor nu gebruiken we de bundel om het proces te vereenvoudigen. Lees meer informatie over het importeren van specifieke componenten in de installatie documentatie. En voor een lijst van beschikbare componenten, zie de Manon componenten documentatie.

Ons main.scss-bestand zou er nu als volgt uit moeten zien:

    
    // main.scss

// Thema dat we gaan gebruiken voor onze pagina
@use "@minvws/manon-themes/icore-open";

// Importeer alle componenten van Manon
@use "@minvws/manon/components/bundles/all";

Nu kunnen we onze stijlen bouwen door het volgende commando uit te voeren:

    
    npm run build

Dit commando voert het build-script uit dat is gedefinieerd in ons package.json en compileert ons main.scss-bestand naar css/main.css. Dit CSS-bestand wordt gekoppeld in ons index.html-bestand, zodat de stijlen op onze pagina worden toegepast.

Open het index.html-bestand in je browser om het resultaat te zien. Je zou een koptekst moeten zien met de tekst “Hallo, Manon!” gestyled met het Manon-framework.

Layout

We gaan een basislayout maken voor onze pagina met het Manon-framework. We beginnen met de header, hoofdinhoud en footer-secties.

Header

Voor de header gebruiken we het header component en het navigation component. Hiermee kunnen we een navigatiebalk in onze header maken met links naar verschillende secties van onze pagina. We voegen de volgende HTML toe aan ons index.html-bestand om een header met navigatielinks te maken:

    
    <header>
  <a href="#main-content" class="button focus-only skip-to-content">Sla inhoud over</a>
  <nav
    data-open-label="Menu"
    data-close-label="Sluit menu"
    data-media="(min-width: 30rem)"
    aria-label="Hoofdnavigatie"
    class="collapsible"
  >
    <div class="collapsing-element">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Over</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

Nu zou ons index.html-bestand er als volgt uit moeten zien:

    
    <!doctype html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manon Tutorial</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <header>
      <a href="#main-content" class="button focus-only skip-to-content">Sla inhoud over</a>
      <nav
        data-open-label="Menu"
        data-close-label="Sluit menu"
        data-media="(min-width: 30rem)"
        aria-label="Hoofdnavigatie"
        class="collapsible"
      >
        <div class="collapsing-element">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Over</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <h1 class="page-title">Hallo, Manon!</h1>
  </body>
</html>

Main

Voor de hoofdinhoud gebruiken we het main component, en het section component. Hiermee kunnen we een gestructureerde layout voor onze pagina maken.

We updaten ons index.html-bestand om het hoofdinhoudgebied op te nemen. Voeg de volgende HTML toe, direct na de headersectie, ter vervanging van de bestaande <h1>-tag:

    
    <main>
  <section>
    <h1 class="page-title">Hallo, Manon!</h1>
    <h2>Welkom bij de Manon Tutorial</h2>
    <p>
      Welkom bij de Manon-tutorial. In deze tutorial leren we hoe we Manon kunnen gebruiken om een
      basiswebpagina te maken.
    </p>
    <p>We behandelen de volgende onderwerpen:</p>
    <ol>
      <li>Het opzetten van een Manon-project</li>
      <li>Het maken van een basispagina</li>
      <li>Het creëren van een layout met header, hoofdinhoud en footer</li>
      <li>Het toevoegen van componenten aan de pagina</li>
    </ol>
  </section>
</main>

Footer

Voor een footer toe te voegen aan onze pagina gebruiken we het footer component in ons main.scss-bestand. Hiermee kunnen we een footer-sectie aan onze pagina toevoegen. We updaten ons index.html-bestand om de footer-sectie op te nemen. Voeg de volgende HTML toe, net voor de sluitende </body>-tag:

    
    <footer>
  <nav>
    <h1>Manon Tutorial</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</footer>

Alles samenvoegen

Nu we onze basislayout hebben met header, main en footer, kunnen we beginnen met het toevoegen van meer componenten aan onze pagina. We kunnen het Manon-framework gebruiken om verschillende componenten zoals knoppen, formulieren en meer toe te voegen. Zie de Manon-documentatie - Componenten voor een lijst van beschikbare componenten en hoe je ze kunt gebruiken.