ProjectinformatieCheatsheet
Snel overzicht van onze GLW tokens, classes en patterns.
🎨Kleuren
| Variabele / Class | Voorbeeld | Waarde | Toelichting |
|---|---|---|---|
--glw-color-primary | var | Primair merk | |
--glw-color-secondary | var | Secundair | |
--glw-color-accent | var | Accent | |
.glw-on-dark | — | Tekststijlen op donkere vlakken |
🅰️Typografie & Spacing
| Token / Selector | Waarde | Toelichting |
|---|---|---|
--glw-font-body | Nunito-globeview, sans-serif | Body-font |
--glw-font-heading | Nunito-globeview, sans-serif | Heading-font |
--glw-base-font-size | clamp(1rem, .8rem + .5vw, 1.125rem) | Basistekst |
--glw-h1 … --glw-h6 | clamp-waarden | Headings schalen |
--glw-section-m-padding | 5rem | Default sectie-padding |
📐Layout & Grid
| Class | Beschrijving |
|---|---|
.glw-container | Max-breedte + side-padding |
.glw-section-(xxl…xxs) | Vaste vert. padding varianten |
.glw-section-hero | Hero hoogte + centrering |
.glw-section-offset | Offset t.o.v. sticky header |
🖼️Media
| Class | Beschrijving |
|---|---|
.glw-img | Responsieve basis-afbeelding |
.glw-img--rounded | Ronde hoeken |
.glw-img--shadow | Zachte schaduw |
.glw-img--cover | Cover binnen container |
✍️Forms
| Class | Beschrijving |
|---|---|
.glw-form | Form-wrapper spacing |
.glw-input | Inputs, textarea, select |
.glw-form--compact | Compacte variant |
📝Content & Rich Text
| Selector | Beschrijving |
|---|---|
.glw-content | Typo-defaults voor tekst |
.glw-divider | Dunne scheidingslijn |
.glw-list-check | Lijst met checks |
🃏Cards
| Class | Beschrijving |
|---|---|
.glw-card | Basis kaart |
.glw-card--shadow | Met schaduw |
.glw-card--hover | Hover-lift |
.glw-card--dark | Donkere variant |
🧰Utilities & Helpers
| Class | Beschrijving |
|---|---|
.u-hidden | Verbergen |
.u-center | Flex center |
.u-max-w | Max-breedte helper |
✨Animations
| Class | Beschrijving |
|---|---|
.glw-anim-fadein | Fade-in (on-view) |
.glw-anim-rise | Rise-in |
Tip: voor complexe animaties liever Elementor Transitions/Transform gebruiken.
🌙Dark Mode
| Class | Beschrijving |
|---|---|
.glw-dark | Dark root (tokens swappen) |
.glw-on-dark | Correcte contrast-tekst |
🔗Links
| Selector | Beschrijving |
|---|---|
a | Basis linkstijl (project) |
.glw-link-reset | Link zonder styling |
🧩Custom CSS site
Plaats hier per project je unieke classes/tokens.
🧰 Tools (Performance, Design, SEO, Dev)
Handige links voor testen, design, performance, SEO en meer.
| Categorie | Naam | Link | Omschrijving |
|---|---|---|---|
| Testing & Performance | PageSpeed Insights | pagespeed.web.dev | Test je snelheid en Core Web Vitals (Google). |
| GTmetrix | gtmetrix.com | Analyseer laadtijd en performance. | |
| WebPageTest | webpagetest.org | Diepgaande performance-analyse. | |
| Lighthouse | Lighthouse | SEO, performance en accessibility check (Chrome). | |
| Pingdom Tools | pingdom.com | Snelheid en uptime tests. | |
| Dareboost | dareboost.com | Performance + best practices check. | |
| CSS & Design | Clippy | clippy | CSS clip-path generator. |
| Animista | animista.net | Kant-en-klare CSS-animaties. | |
| Keyframes | keyframes.app | Visuele CSS animation builder. | |
| Neumorphism.io | neumorphism.io | Soft UI stijl generator. | |
| Glassmorphism | glassmorphism | Frosted glass effecten. | |
| Shadows Brumm | shadows.brumm.af | Mooie box-shadow generator. | |
| Kleuren & Gradients | Coolors | coolors.co | Kleurpaletten generator. |
| Color Hunt | colorhunt.co | Inspiratie voor kleurpaletten. | |
| UI Gradients | uigradients.com | Mooie gradients verzamelen. | |
| CSS Gradient | cssgradient.io | Online gradient generator. | |
| MyColorSpace | mycolor.space | Automatische palet- en gradientmaker. | |
| Paletton | paletton.com | Kleurentheorie tool en combinaties. | |
| Fonts & Typography | Google Fonts | fonts.google.com | Gratis en populaire webfonts. |
| Fontpair | fontpair.co | Combineer fonts slim. | |
| Type Scale | type-scale.com | Typografie schalen met ritme. | |
| Wordmark.it | wordmark.it | Voorbeeldteksten in je geïnstalleerde fonts. | |
| Accessibility | Wave | wave.webaim.org | Accessibility checker. |
| Axe DevTools | axe devtools | Accessibility testing in browser. | |
| Contrast Checker | contrast-ratio.com | Check kleurcontrast (WCAG). | |
| Coblis | Coblis | Kleurenblindheid simuleren. | |
| Development | Can I Use | caniuse.com | Browserondersteuning van CSS/JS features. |
| Regex101 | regex101.com | Reguliere expressies testen. | |
| JSON Formatter | jsonformatter.org | JSON valideren en mooi tonen. | |
| SVGOMG | svgomg | SVG’s optimaliseren voor web. | |
| Lottie & Animations | LottieFiles | lottiefiles.com | Gratis en premium Lottie-animaties. |
| Lordicon | lordicon.com | Animerende iconen met Lottie. | |
| Haikei | haikei.app | SVG backgrounds en blobs. | |
| UI Components | CSS Buttons | cssbuttons.io | Voorbeeldbuttons met pure CSS. |
| Get Waves | getwaves.io | SVG wave generator. | |
| Heroicons | heroicons.com | Gratis |