Grid of Flexbox of toch Bootstrap

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

11/10/2022 22:36:48
Quote Anchor link
Onlangs in een artikel had ik gelezen dat CSS Grid de beste optie is voor lay-out en dat CSS flexbox de beste optie is voor onderdelen. Helaas kan dat artikel niet meer vinden, want het is mij niet helemaal duidelijk wat men bedoelt met dat CSS Flexbox de beste optie is voor onderdelen van een website.
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.
 
PHP hulp

PHP hulp

28/03/2024 11:11:49
 
- Ariën  -
Beheerder

- Ariën -

11/10/2022 23:46:27
Quote Anchor link
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.
Gewijzigd op 11/10/2022 23:46:40 door - Ariën -
 
Ozzie PHP

Ozzie PHP

12/10/2022 00:24:10
Quote Anchor link
@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)
PHP script in nieuw venster Selecteer het PHP script
1
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">

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
 
Ad Fundum

Ad Fundum

12/10/2022 08:47:35
Quote Anchor link
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
 
Jan Koehoorn

Jan Koehoorn

12/10/2022 11:05:47
Quote Anchor link
Op YouTube heeft Kevin Powell een heel goed channel over CSS. In deze video legt hij het verschil tussen CSS grid en FlexBox uit.
 
Ozzie PHP

Ozzie PHP

12/10/2022 12:42:53
Quote Anchor link
@Ad Fundum en @Jan Koehoorn

Interessante links en handig als naslagwerk. Ik heb ze toegevoegd aan het Handige Links topic.
 
Mohamed nvt

Mohamed nvt

13/10/2022 22:15:00
Quote Anchor link
- 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.

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


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.
 
Ad Fundum

Ad Fundum

14/10/2022 06:59:38
Quote Anchor link
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.
Gewijzigd op 14/10/2022 07:00:02 door Ad Fundum
 
Ozzie PHP

Ozzie PHP

14/10/2022 12:51:38
Quote Anchor link
Mooi advies Ad Fundum. Ik denk dat we dat allemaal wel herkennen. Dat nieuwe dingen in het begin wat overweldigend of intimiderend kunnen overkomen. Ik denk tevens dat veel beginnelingen daarmee de mist in gaan. Die denken dat ze in 1 dag kunnen programmeren en worden dan boos als het niet lukt. Beginnen te knippen en plakken en raken vervolgens gefrustreerd omdat het niet werkt. Degenen die uiteindelijk doorgroeien als programmeur zijn degenen die de kalmte weten te bewaren en die bereid zijn zich te verdiepen in de materie.

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.