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 Timber. 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

0 Reacties

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *