Een van de meest populaire manieren om een lay-out te maken is op dit moment via Tailwind CSS en de components die je ervan op verschillende websites gratis of tegen betaling kan vinden. Wij zijn alleszins fan!
Wat is Tailwind CSS?
Tailwind CSS is een gratis te gebruiken CSS-framework. Als je niet weet wat CSS is, CSS wordt gebruikt om via code de lay-out van je website vorm te geven.
Tailwind stelt je in staat om zeer snel een mooie lay-out uit te werken doordat het framework vooraf gedefinieerde CSS-classes aanbiedt. Je gaat merken bij het schrijven van je CSS, zeker als je al wat ervaring hebt met HTML en CSS, dat je zeer snel designs zal maken door de intuïtieve benamingen die de makers aan de Tailwind classes hebben gegeven.
Voorbeeld van een basis template HTML-code met de Play CDN van Talwind CSS ingeladen
Als je snel aan de slag wil gaan met Tailwind dan kan je direct de functionaliteit toevoegen aan je bestaande HTML. Die doe je door volgende snippet toe te voegen tussen de <head> tags van je lay-out.
Een kant-en-klare versie om te copy-pasten:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-yellow-700">
Dag Kingmaker!
</h1>
</body>
</html>Zo makkelijk is het, je kan direct aan de slag. Maak de tekst iets kleiner door bijvoorbeeld naar text-xl te gaan en misschien vind je blauw wel mooier qua tekst, dan pas je die text-yellow-700 aan naar text-blue-700.
Kleuren
Wat Tailwind zo leuk maakt, is dat het framework een standaard palet van kleuren voorziet. Als je een element wil kleuren is de naam van de class altijd op dezelfde manier opgebouwd, namelijk:
- Dat wat je wil kleuren (text, bg of border)
- De naam van de kleur zelf (bijvoorbeeld yellow)
- En uiteindelijk de gradatie van je gekozen kleur (van 50 tot 900)
Voor onze geeloranje tekst uit het voorbeeld komen we dan tot text-yellow-700. Klik hier om de kleuren van Tailwind te ontdekken.
Clean code CSS
Tailwind maakt inline CSS terug populair. Hoewel Tailwind een utility-first approach aanmoedigt kan je er ook voor kiezen om veelvoorkomende combinaties van CSS-classes te groeperen via een speciale directive, namelijk @apply. Op die manier blijft je HTML-code overzichtelijk.
We kunnen bijvoorbeeld de styling van onze H1 tag op meerdere plaatsen gaan gebruiken en willen dat niet op iedere pagina van onze website herhaaldelijk uittypen. Met de @apply directive kunnen we een abstractie doen in een aparte CSS-file.
@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
@apply text-3xl font-bold text-yellow-700;
}We builden de CSS file en gebruiken deze om de standaard Play CDN te vervangen. En nu hoeven we niet iedere keer voor iedere H1 tag class=”text-3xl font-bold text-yellow-700″ toe te voegen. Als je al wat onderlegt bent in CSS en javascript kan je hier meer lezen over hoe je Tailwind moet laten builden. Zijn we je kwijt, maar wil je toch een Tailwind lay-out. Contacteer ons dan via e-mail of telefoon.
Je HTML-pagina zal er nu zo uitzien:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mijn-tailwind.css">
</head>
<body>
<h1>Dag Kingmaker!</h1>
</body>
</html>Je weet nu wat Tailwind CSS in essentie is. De echte kracht ligt er in dat je ook volledig kant-en-klare blokken kan toevoegen aan je website. Wat je productiviteit een enorme boost zal geven. Als werkgever of ondernemer is het voordeel van dit CSS-framework dat je werk makkelijk kan uitbesteden aan iemand die met Tailwind kan werken. Het stelt je ook in staat om zelf kleine aanpassingen aan je website te doen. Een kleurtje harder of zachter maken is eenvoudigweg een kwestie van een kleurgradatie van 50 tot 900 te kiezen.
Wat is Tailwind UI?
Tailwind UI is gemaakt door de makers van Tailwind CSS. Via Tailwind UI bieden de makers professionele websiteonderdelen aan tegen betaling. Op die manier steun je het bedrijf achter Tailwind, maar krijg je ook toegang tot een bibliotheek van meer dan 500 professioneel ontworpen componenten om je website mee op te bouwen.
Je betaalt een pittige prijs maar je zult levenslang toegang hebben tot de bibliotheek. En trouwens als klant van Kingmakers hoef je dit niet te betalen, wij hebben namelijk al een licentie om de componenten te mogen gebruiken voor onze klanten.
Hoe gebruik je components?
Als je Tailwind UI te beperkt vindt kan je ook gaan kijken naar andere Tailwind component bibliotheken. Er zijn er een hoop, tot een enkel voorbeeld op jsfiddle tot professioneel uitgewerkte marketplaces. Een van de meer bekende Tailwind component aanbieders is tailwindcomponents.com, zie bieden zowel gratis als betalende componenten aan.
Het gebruiken van deze components is zeer eenvoudig, je kiest uit de overzichten iets wat je mooi vindt en kopieert en plakt de code die er bij hoort in je eigen HTML. Houd er rekening mee dat je eventueel wel nog je CSS moet rebuilden.
Een website of WordPress theme met Tailwind laten maken
Ben je overtuigd door de eenvoud en de kracht van Tailwind dan kan een van onze Tailwind experts een lay-out voor je maken. De CSS developer kan je huidige lay-out een upgrade geven door deze om te zetten naar de standaard styling van het CSS-framework of kan een volledig nieuwe website opbouwen uit de componenten die beschikbaar zijn. Ook op maat gemaakte componenten zijn geen probleem, die maken we aan tijdens de opbouw van je project.
Weet ook dat bij Kingmakers een heel team voor je klaar staat. Zo kan je niet enkel een webdesign of WordPress theme laten maken, maar zorgen wij ook voor de copywriting, SEO-optimalisaties en een complete digitale marketingstrategie voor de lancering van je nieuwe project.
Hoeveel kost een Tailwind lay-out?
Enkel het ontwerpen van een lay-out in CSS kan al vanaf een prijs van 750 euro. Het uitwerken van een complete website start bij ons vanaf 2500 euro.
Neem contact met ons op voor een prijsofferte op maat!