Grid of Flexbox of toch Bootstrap
Tegelijkertijd is er Bootstrap framework, zoals jullie het weten, en dat leent zich ook heel goed voor lay-outs maken en met name de responsive lay-outs. Ik kon alleen op het net niet achterhalen of Bootstrap CSS Grid gebruikt of CSS Flexbox.
Daarom zou ik graag van jullie willen weten waar ik mij moet gaan op focussen als ik:
1. Snelle lay-outs wil maken, met name meerdere divs en/of kolommen naast elkaar.
2. Responsive website
Ik hoor het graag.
Ikzelf gebruik Bootstrap, maar misschien is dat te 'bloated' voor je?
Tailwind of Bulma schijnt ook een goede te zijn.
Voor de rest kan het geen kwaad om ook te leren hoe de CSS Flexbox in elkaar steekt. De Bootstrap is daarop gebaseerd, weet ik.
Gewijzigd op 11/10/2022 23:46:40 door - Ariën -
That Bulma ziet er zo in de gauwigheid wel aardig uit.
Maar dat Tailwind ... een stukje code gekopieerd van de homepage:
Code (php)
1
2
3
2
3
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
<div class="pt-6 md:p-8 text-center md:text-left space-y-4">
Persoonlijk vind ik deze manier van 'css' niet echt prettig. In feite is het gewoon inline css, maar dan op een andere manier geschreven. Althans zo komt het op mij over. In de praktijk lijkt me dit niet een werkwijze die je gemakkelijk kunt toepassen, omdat het lastig te onthouden is.
Gewijzigd op 12/10/2022 00:24:31 door Ozzie PHP
Voor de PC maakt het inmiddels niet veel meer uit, er is Gecko (Firefox) en Webkit (de andere grote browsers, inclusief Edge), dus die verschillen hoeven tegenwoordig niet meer zo nodig weggewerkt. Hoe het momenteel zit met browsers op smartphones weet ik niet, maar ik ga er van uit dat daarvoor hetzelfde geldt.
CSS grid is wat de naam al zegt, een 2-dimensionaal opmaaksysteem. CSS flex is een eendimensionaal systeem. Je kunt met CSS flex ook een grid maken, maar als je dat van plan bent kan je beter CSS grid gebruiken. De twee systemen werken prima samen, het is allemaal gewoon CSS.
Links die ik vaker heb gepost hiervoor zijn:
- https://css-tricks.com/snippets/css/complete-guide-grid
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
Interessante links en handig als naslagwerk. Ik heb ze toegevoegd aan het Handige Links topic.
- Ariën - op 11/10/2022 23:46:27:
Ikzelf raad aan om een grid-framework te gebruiken.
Ikzelf gebruik Bootstrap, maar misschien is dat te 'bloated' voor je?
Tailwind of Bulma schijnt ook een goede te zijn.
Voor de rest kan het geen kwaad om ook te leren hoe de CSS Flexbox in elkaar steekt. De Bootstrap is daarop gebaseerd, weet ik.
Ikzelf gebruik Bootstrap, maar misschien is dat te 'bloated' voor je?
Tailwind of Bulma schijnt ook een goede te zijn.
Voor de rest kan het geen kwaad om ook te leren hoe de CSS Flexbox in elkaar steekt. De Bootstrap is daarop gebaseerd, weet ik.
Inmiddels ben ik van overtuigd dat ik mij ga verdiepen in CSS Grid.
Je geeft aan dat je Bootstrap gebruikt en waarom gebruik je geen CSS Grid dan? Of gebruik je beiden?
Nee volgens mij is Bootstrap niet te bloated voor mij, daar ik enkel de essentiele items van zal gebruiken.
Toevoeging op 13/10/2022 22:35:07:
Ad Fundum op 12/10/2022 08:47:35:
Bootstrap is een dun laagje over CSS heen, bedoeld om verschillen tussen browsers weg te werken. Een beetje als wat jQuery voor JavaScript is.
Voor de PC maakt het inmiddels niet veel meer uit, er is Gecko (Firefox) en Webkit (de andere grote browsers, inclusief Edge), dus die verschillen hoeven tegenwoordig niet meer zo nodig weggewerkt. Hoe het momenteel zit met browsers op smartphones weet ik niet, maar ik ga er van uit dat daarvoor hetzelfde geldt.
CSS grid is wat de naam al zegt, een 2-dimensionaal opmaaksysteem. CSS flex is een eendimensionaal systeem. Je kunt met CSS flex ook een grid maken, maar als je dat van plan bent kan je beter CSS grid gebruiken. De twee systemen werken prima samen, het is allemaal gewoon CSS.
Links die ik vaker heb gepost hiervoor zijn:
- https://css-tricks.com/snippets/css/complete-guide-grid
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
Voor de PC maakt het inmiddels niet veel meer uit, er is Gecko (Firefox) en Webkit (de andere grote browsers, inclusief Edge), dus die verschillen hoeven tegenwoordig niet meer zo nodig weggewerkt. Hoe het momenteel zit met browsers op smartphones weet ik niet, maar ik ga er van uit dat daarvoor hetzelfde geldt.
CSS grid is wat de naam al zegt, een 2-dimensionaal opmaaksysteem. CSS flex is een eendimensionaal systeem. Je kunt met CSS flex ook een grid maken, maar als je dat van plan bent kan je beter CSS grid gebruiken. De twee systemen werken prima samen, het is allemaal gewoon CSS.
Links die ik vaker heb gepost hiervoor zijn:
- https://css-tricks.com/snippets/css/complete-guide-grid
- https://css-tricks.com/snippets/css/a-guide-to-flexbox
Dankjewel voor deze links. Ik heb ernaar gekeken en ik denk dat je ze pas kunt gebruiken wanneer wat verder bent met CSS Grid
Toevoeging op 13/10/2022 22:59:09:
Jan Koehoorn op 12/10/2022 11:05:47:
Op YouTube heeft Kevin Powell een heel goed channel over CSS. In deze video legt hij het verschil tussen CSS grid en FlexBox uit.
Ik heb die video gezien en hij legt het idd goed uit.
Mohamed nvt op 13/10/2022 22:15:00:
[..] Ik heb ernaar gekeken en ik denk dat je ze pas kunt gebruiken wanneer wat verder bent met CSS Grid
Dat is niet zo. Je kunt in je PC browser op F12 drukken en dan de CSS eigenschappen van elementen instellen om direct te zien wat het doet, en dan komt dan overeen met de plaatjes op de posters in de links.
Maar jouw sentiment herken ik wel, van toen ik met Grid en Flex begon. Het leek wat intimiderend in het begin, en ik had zoiets van waarom kan het niet gewoon simpel zoals met <table>?
Je moet die koudwatervrees gewoon laten varen en er rustig aan mee beginnen, dan komt het vanzelf, en sneller dan je eerst dacht. Want het is niet ingewikkeld, het is gewoon wat veel in 1x.
Dat zie je op het forum ook terug. Er zijn hier mensen geweest waarbij je niet of nauwelijks progressie zag. Die blijven maar knippen en plakken en komen hier dan gefrustreerd vragen wat er misgaat. Dit verandert niet en na jaren zie je nog steeds hetzelfde gedrag bij die personen.
Er zijn ook mensen die wel de tijd nemen en proberen om kennis te vergaren, en om op die manier steeds een stapje verder te komen en beter te worden. Dat heeft alles te maken met wilskracht. Dat zie je ook bij Mohamed. Daar zit ook een stijgende lijn in.