De meesten van ons kennen wel bootstrap. Ik vroeg me af of er tegenwoordig eigenlijk nog meer/andere/nieuwere (???)handige tools zijn (gratis of betaald) om makkelijk een responsive template te maken.
Ik denk dan aan een situatie waarbij je gewoon begint met een volledig wit scherm, maar waar je op de een of andere manier makkelijk componenten aan kunt toevoegen die dan ook gelijk al responsive zijn.
Ja, het klinkt een beetje vaag wellicht wat ik zeg, maar hopelijk begrijpt iemand wat ik bedoel.
Je begint dus met een leeg canvas, maar in plaats van dat je ieder element zelf aan de html-code moet toevoegen en via css moet positioneren, hoef je bijv. alleen dit in te voeren:
<div class="header-200px"></div>
en dan komt er op het scherm een header te staan van 200px hoog. En als je daar dan bijv. 2 kolommen in wil plaatsen doe je:
Een andere vraag ... is tailwindcss "beter" of handiger dan bijv. Bootstrap? En zijn er nog andere leuke en vooral handige grid-systemen waar jullie bekend mee zijn?
Stel ik heb een mooie product layout gemaakt waarbij een product bestaat uit een aantal geneste div'jes en spans. Alles is mooi opgemaakt op de productpagina en in de buitenste div van ieder product staat de class="product". Aan de hand van die ene class kan ik het complete product stylen. Wil ik nu op een andere pagina ook een product tonen, dan hoef ik alleen die class="product" toe te voegen en de lay-out klopt.
Met tailwindcss zou ik dan weer ieder divje en span al die classes moeten meegeven.
Toevallig heb ik dat bij de hand gehad zelfde product weergave op twee verschillende pagina's. Toen heb ik gewoon een nieuwe Twig template aangemaakt welke door beiden pagina's ingevoegd wordt. Dit in het kader van DRY. Maar al zou je er twee templates op na houden dan weet ik zeker dat ook jij een supersnelle copy & paste manoeuvre zou verrichten ;-)
Ozzie PHP op 26/09/2019 00:33:15
PS Dit is overigens geen kritiek of aanval op tailwindcss ... ik probeer juist door met jullie te discussiëren uit te vinden of het interessant is om dit (of een vergelijkbaar) systeem voor mezelf toe te gaan passen.
Ha nee Ozzie dit is gewoon even leuk met elkaar sparren toch?
>> Ha nee Ozzie dit is gewoon even leuk met elkaar sparren toch?
Exact! :-)
Maar goed ... de vraag blijft .. wat is nu het beste grid-systeem waarmee je snel de basis van een lay-out kan maken. Is er nog iets beters dan Bootstrap?
"Beter" en "slechter" is een kwestie van perspectief. Dit kun je nu sowieso niet in perspectief zien omdat je niet redeneert vanuit een doel.
Een hamer is voor bepaalde klussen het perfecte gereedschap maar waarschijnlijk suboptimaal om bijvoorbeeld de heg mee te snoeien.
Waar jij dus naar op zoek bent zijn alternatieven die mogelijk in bepaalde omstandigheden fijner werken dan bijvoorbeeld Bootstrap. Dit zou je kunnen kwantificeren in "pros" en "cons" in bepaalde rubrieken in bepaalde situaties.
Maar zonder dit ergens op toe te passen wordt dit mogelijk een nogal loze/abstracte discussie omdat je dit op geen enkele manier tastbaar/meetbaar kan maken. Wanneer is iets "beter"? Tenzij Bootstrap inmiddels achterhaald is en er inderdaad betere alternatieven zijn?
En in zekere zin ben je al met implementatie(technieken) bezig. Als je je werkwijze verandert zou je misschien in het ontwerp al een heleboel dingen kunnen proberen en ook elimineren? Nog zonder aan een bepaalde techniek gebonden te zijn. Denk aan wireframes/mockups and the like?
Implementeren komt meestal neer op "uitrollen wat je al eerder bedacht hebt". De vorm waarin dat gebeurt is ondergeschikt aan de tijd en het denkwerk die je in het ontwerp hebt gestoken lijkt mij. Dus daar zou je dan ook de nadruk op moeten leggen. De "drager" is gewoon minder interessant.
Daar heb je volledig gelijk in. De vraag is enigszins abstract. Wat ik wil is gemakkelijk een basis lay-out kunnen neerzetten die van zichzelf 100% responsive en cross-browser compatible is. Heel simplistisch gezegd, ik wil in m'n html-code kunnen zeggen: dit element is een header, dit is een menu, dit is een rij en dit is een kolom. Vervolgens zou je dan al een pagina moeten hebben met de juiste elementen, zonder opmaak maar wel op de juiste positie en volledig responsive. Dat is eigenlijk wat ik primair zoek. Dus iets wat het opzetten van een basis-grid vereenvoudigt. Natuurlijk kan dit in Bootstrap, maar ik ben dus benieuwd naar bruikbare alternatieven. Ik ken zelf lang niet alle systemen en vandaar dat ik benieuwd ben of mensen hier met andere systemen werken. Tot nu toe hebben we het nog alleen over tailwindcss gehad, maar dat heeft (mijns inziens) al een interessante discussie opgeleverd. Ik hoop dat er nog meer systemen de revue zullen passeren.
Ik had al even gezocht, maar het zijn er aardig wat en allemaal beloven ze natuurlijk mooie verhalen en zeggen ze dat ze de beste zijn. Ik ben juist benieuwd naar persoonlijke ervaringen van mede-forumgenoten. En ik ben ook benieuwd of er eentje is die er met kop en schouders boven uitsteekt.
Zo zie ik in de "lijstjes" geregeld "Foundation" voorbij komen, maar ik hoor daar niemand over.
Een andere vraag ... is tailwindcss "beter" of handiger dan bijv. Bootstrap? En zijn er nog andere leuke en vooral handige grid-systemen waar jullie bekend mee zijn?
Ja, ik gebruik het zelf ook. Vind het zelf ook fijn om het te gebruiken omdat ik niet zelf de classnames moet bedenken als gebruik ik geen custom classes. Geen rotzooi dus met hoe BEM-classnames het beste geformuleerd moeten worden.
Tailwind CSS is wel een minder featured framework dan Bootstrap bijvoorbeeld.
