blank template
Gebruik jij zelf ook tailwindcss?
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?
Ozzie PHP op 26/09/2019 00:33:15:
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.
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?
Gewijzigd op 26/09/2019 19:04:17 door Frank Nietbelangrijk
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?
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.
Gewijzigd op 26/09/2019 23:52:40 door Thomas van den Heuvel
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.
Bootstrap alternatives een goede zoekopdracht en vind je bijvoorbeeld:
https://beebom.com/best-front-end-frameworks-for-bootstrap-alternative/
https://hackr.io/blog/top-bootstrap-alternatives-2019
Tooling is geen bijzaak en mag best tijd kosten. En er komt eigenlijk nooit een einde aan, net zoals de eeuwige zoektocht naar de beste code-editor…
Dat is https://beebom.com/best-front-end-frameworks-for-bootstrap-alternative/
https://hackr.io/blog/top-bootstrap-alternatives-2019
Tooling is geen bijzaak en mag best tijd kosten. En er komt eigenlijk nooit een einde aan, net zoals de eeuwige zoektocht naar de beste code-editor…
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.
Persoonlijk vind ik het bijvoorbeeld onhandig om Sass of Less te moeten parsen met server-side JavaScript. Daarvoor hebben we PHP, nietwaar.
Hehe ... er zitten hier toch ook vast wel front-enders? En een (custom) back-end heeft ook een lay-out nodig :-)
Ozzie PHP op 26/09/2019 13:51:48:
@Marthijn
Gebruik jij zelf ook tailwindcss?
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?
Gebruik jij zelf ook tailwindcss?
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.
>> Tailwind CSS is wel een minder featured framework dan Bootstrap bijvoorbeeld.
Kun je dit verder toelichten? Waaraan merk je dat? Wat heeft Bootstrap 'meer' dan Tailwind CSS? En ... waarom gebruik je Bootstrap dan niet?
Met Tailwind CSS voel ik me meer vrij, je dient alles zelf te doen wat meer vrijheid geeft. Netzoals dat je bij je eigen geschreven CSS alles naar je eigen hand kunt zetten qua opbouw etc.
Gewijzigd op 28/09/2019 14:20:39 door Marthijn Buijs
>> ... gebruikt maakt van jQuery (dit gebruik ik liever niet).
Waarom gebruik je jQuery liever niet?
Ooit gehoord trouwens van UIkit? Die kwam ik tegen tijden het Googlen. Die ziet er (op het eerste gezicht) ook wel leuk uit.
Ozzie PHP op 29/09/2019 02:18:41:
@Marthijn
>> ... gebruikt maakt van jQuery (dit gebruik ik liever niet).
Waarom gebruik je jQuery liever niet?
Ooit gehoord trouwens van UIkit? Die kwam ik tegen tijden het Googlen. Die ziet er (op het eerste gezicht) ook wel leuk uit.
>> ... gebruikt maakt van jQuery (dit gebruik ik liever niet).
Waarom gebruik je jQuery liever niet?
Ooit gehoord trouwens van UIkit? Die kwam ik tegen tijden het Googlen. Die ziet er (op het eerste gezicht) ook wel leuk uit.
Het doet z'n werk maar het is volgens mij sloom en oud. Liever gebruik ik iets moderners zoals Vue.js of React.js. Hiermee valt ook makkelijker websites te maken die gegevens via AJAX uitwisselt zonder de pagina te verversen.
Vue.js en React.js hebben een andere werkwijze, en zou ik niet echt kunnen vergelijken met een library zoals jQuery. Het gebruik ervan is leuk als je juist een site hebt die dynamisch en actueel moet blijven. Ik zie het niet als een moderne vervanger van jQuery.
>> Hiermee valt ook makkelijker websites te maken die gegevens via AJAX uitwisselt zonder de pagina te verversen.
Dat kan via jQuery ook gewoon.
React is volgens mij bedoeld voor een heel andere opzet. Wat je normaal met PHP serverside doet, doe je dan cliënt-side. Je routing, controllers enz. maak je dan in React. Voor licht gebruik van javascript (ajax, animaties, user interactie) is juist jQuery de handigere / meer voor de hand liggende optie lijkt me.
Ozzie PHP op 02/10/2019 00:41:15:
Dat kan via jQuery ook gewoon.
Dan moet je alleen niet de slim versie hebben die op de Bootstrap introductie pagina in de starter template staat want daarin zijn de AJAX functies weggelaten.
Gewijzigd op 02/10/2019 14:46:00 door Frank Nietbelangrijk