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:
Zoiets noem je CSS Grid Frameworks. Naast dat Bootstrap een enorm populair is, heb je nog een hele hoop anderen, zoals: Foundation, Skeleton, Responsive Grid System 2 en nog meer onbekenderen. Mogelijk zijn er wel een paar die met procenten werken.
Thanks voor je reactie Aar. Heb je zelf ervaring met (een van) deze systemen toevallig? En zijn er ook systemen waarmee je bijv. makkelijk een drop down menu maakt?
Ik gebruik zelf https://tailwindcss.com/. Een zogeheten utility-first framework dat mobile-first geschreven wordt. Dit maakt het gelijk "responsive". Het zal ongetwijfeld wennen zijn, je ziet immers heel veel classes, maar door gebruik te maken van componenten (bijv. met Vue of React) zorg je dat elk element maar één keer bestaat.
Er zijn een hoop projecten waarin ik geen enkele regel CSS heb hoeven schrijven.
Wat heeft een dropdown met responsive-ness te maken?
Meer in de zin van ... een goed layout systeem waarin zaken als (bijv.) menu's en de mogelijkheid voor modals/pop-up boxen al zijn opgenomen. En dan bedoel ik niet zozeer qua layout. Het liefst zijn het allemaal grijstinten en pas je alles zelf naar wens aan. Maar dat het vooral werkt qua responsiveness/positionering, zodat je dat niet zelf allemaal nog hoeft te doen.
Het gaat me er vooral om om tijd te besparen. Ik kan zelf een responsive css layout schrijven, maar als die er gewoon al zijn, volledig uitgekristalliseerd zodat ze in alle browsers goed werken, dan lijkt me dat wel handig.
[size=xsmall]Toevoeging op 24/09/2019 12:02:58:[/size]
Richard Hansma op 24/09/2019 11:25:46
Ik gebruik zelf https://tailwindcss.com/. Een zogeheten utility-first framework dat mobile-first geschreven wordt. Dit maakt het gelijk "responsive". Het zal ongetwijfeld wennen zijn, je ziet immers heel veel classes, maar door gebruik te maken van componenten (bijv. met Vue of React) zorg je dat elk element maar één keer bestaat.
Er zijn een hoop projecten waarin ik geen enkele regel CSS heb hoeven schrijven.
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }
/* Medium (md) */
@media (min-width: 768px) { /* ... */ }
/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }
/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }
Kun je voor vier schermbreedtes aparte opmaak instellen.
waarbij:
sm = small
md = medium
lg = large
xl = extra large
Verder:
m = margin
p = padding
t = top
r = right
b = bottem
l = left.
<div class="mt-4 md:mt-0 md:ml-6">
mt-4 = standaard instelling voor alle schermbreedtes = margin-top: 4 eenheden
md:mt-0 voor de medium schermbreedte = margin-top: 0.
md:ml-6 voor de medium schermbreedte = margin-left: 6 eenheden
Hoe groot een eenheid is is afhankelijk van de instellingen.
Dankjewel voor de heldere uitleg. Werk je zelf ook met dit framework?
Als ik het goed begrijp stelt ie die spacing dus in via javascript aan de hand van de class name? Ik ben wel benieuwd of dat allemaal niet heel traag werkt dan.
Als ik het goed begrijp stelt ie die spacing dus in via javascript aan de hand van de class name? Ik ben wel benieuwd of dat allemaal niet heel traag werkt dan.
Nee. Je houdt zelf bij via een config welke utility-waardes je wilt hebben. Vervolgens worden deze gegenereerd in een css bestand (via gulp/webpack/postcss). Het geeft je de vrijheid om alles uniek te definiëren, binnen je eigen opgegeven restricties.
Klopt. En voor input-velden en knoppen is dit wellicht overdreven. Er zijn hiervoor 2 alternatieven:
1. Een button component maken die je vervolgens kunt gebruiken als "<custom-button></button>"
2. Zelf een .btn class maken in css met de @apply methode. Dit zorgt voor minder mogelijkheden, omdat je meerdere utilities verzameld onder één naam. Maar via @apply kun je blijven gebruik maken van je config waardes. Zie ook https://tailwindcss.com/docs/extracting-components/#extracting-css-components-with-apply
>> Vervolgens worden deze gegenereerd in een css bestand (via gulp/webpack/postcss).
Ah oké, ik dacht ergens te zien dat je die waardes in een .js bestand moest instellen.
Ik vind deze manier overigens nog wel een beetje 'vaag' eigenlijk. Want als je het op deze manier doet, ben je in feite in de html-code je opmaak aan het regelen. Volgens mij gaat dat in tegen het principe van code en lay-out gescheiden houden. In plaats van al die vele classes zou je ook inline-styling kunnen gebruiken en normaliter is dat niet echt wenselijk. Je wil al je opmaak in je css-file hebben zitten, maar hiermee verplaats je de opmaak juist naar de html-code.
