M'n wordpress start theme is open-source
Het is een thema dat ik altijd gebruik bij het maken van een wordpress site. Door de jaren heen is het een langzaam groeiende verzameling best practices geworden. En ik blijf dit thema ook uitbreiden als ik betere ideeën tegenkom. De bestanden zijn te vinden op https://github.com/Eworm/template.
De belangrijkste tips & tricks
Kleuren als variabelen
Voor het genereren van sass variabelen voor m'n kleuren gebruik ik deze tool: http://chir.ag/projects/name-that-color/. Met deze tool krijgt elke kleur een unieke naam. Dus #0067c5 krijgt als naam science-blue in plaats van blue. Op deze manier kun je veel meer kleuren gebruiken en zijn de namen gemakkelijker te onthouden.
Grijzen in je design
De naamgeving van je grijzen blijft lastig. Hoe noem je je grijzen zodat er later nog eentje tussen kan? grey-1,
grey-1.1? Grey-10, grey-11? Letters uit het alfabet? Het blijft onhandig. Wat wel werkt is je grijzen noemen zoals ik het hier doe. Op deze manier kun je heel veel grijzen toevoegen, en zijn de variabele namen gemakkelijker te onthouden. Meer informatie over dit systeem (en nog meer over kleuren in design systemen) lees je hier: https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.w5cudfcy9
Om het mezelf gemakklijk te maken heb ik een tooltje gebouwd om snel de juiste variabelen te maken.
8 Point grid system
Om consistentie in m'n front-end te krijgen gebruik ik dit idee: https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632. Met behulp van deze functie kan ik gemakkelijk meervouden van 8 gebruiken in m'n sass.
Timber
Een recente toevoeging is het werken met <a href="timber.github.io/timber/" rel="external">Timber</a>. Het maakt je html superoverzichtelijk en het werken met bijvoorbeeld de loop veel gemakkelijker! Het fijne van Timber is dat de documentatie (redelijk) goed is. Dat maakt het overdragen van een project gemakkelijker.
Andere tips & tricks
Bad practices waar je het bezoekers met dyslexie moeilijk mee maakt.
Lazy loading om de site snel op het scherm te krijgen en mobiele gebruikers niet op te zadelen met teveel mb's.
Ik gebruik BEM voor m'n classnames. Dit zorgt voor een duidelijkere naamgeving.
De EWWW image optimizer plugin genereert Webp bestanden (mits deze kleiner zijn als de jpg of png). Via een extra stukje code in de htaccess krijgt een bezoeker dan het kleinere webp bestand.
Webfonts lokaal gebruiken voor een betere pagespeed score.