Het is maandag 3 januari. Buiten waait het verrekes en binnen is het lekker aangenaam. De beste wensen voor dit nieuwe jaar. Deze avond een demo over verschillende handige CSS technieken.

Layout Patterns by web.dev

Hans Kuijpers toons via een demo een aantal css technieken die je tegenwoordig op verschillende websites toegepast ziet worden. Het grote verschil is dat het slechts een paar regels css hoeven te zijn om het effect te krijgen van hetgeen getoond wordt. Al de getoonde technieken komen van de website web.dev. https://web.dev/patterns/layout/

Aspect ratio image card

Met het smaller worden van de beschikbare ruimte zal de verwerkte afbeelding altijd dezelfde aspect-ratio behouden.

Aspect ratio image card by web.dev

Clamping Card

Met clamp(minimum, preferred, maximum) stel je een voorkeurswaarde voor bijvoorbeeld width, maar ook font-size in. En die voorkeurswaarde heeft een minimum en maximum bereik.

Clamping card by web.dev

Deconstructed pancake

Een layout van blokken die zich uitstrekt over de regel, maar naar de volgende regel springt zodra er te weinig ruimte is.

Deconstructed pancake by web.dev

Holy grail layout

Klassieke template indeling met header, footer en twee sidebars naast de main content.

Holy grail layout by web.dev

Line up

Drie items op een rij

Line up by web.dev

Super centered

Centreer het kind van een div element met slechts 1 regel code

Super centered by web.dev

12-span grid

Grid verdeeld in 12 gelijke delen

12-span grid by web.dev

Zoals genoemd komen alle bovenstaande voorbeelden vanuit de website web.dev. Deze website is de moeite waard om te bezoeken en te leren. Zie het onderdeel _Learn_ https://web.dev/learn/ waar diverse gratis cursussen staan over van alles en nog wat met betrekking tot het bouwen van moderne websites. Bijvoorbeeld: https://web.dev/learn/css/ Learn CSS

Link to Text Fragments

De linkjes hierboven verwijzen niet naar inline anchors, maar naar geselecteerde tekst fragmenten. Een handige nieuwe feature van de moderne browser en makkelijk in gebruik middels een plugin

Meer informatie hierover via web.dev => https://web.dev/text-fragments/

Boeken

Dr. Joomla

vraag: als ik css / html wijzigingen doorvoer op mijn website zie ik ze niet terug aan de voorzijde
antwoord: Probeer de pagina te verversen met de SHIFT toets erbij ingedrukt. SHIFT+F5 of SHIFT+CTRL+R om daarmee een harde refresh uit te voeren.

vraag: als ik mijn site ga upgraden van Joomla 3.10.3 naar Joomla 3.10.4 faalt het menu aan de zijkant. Hoe kan dat?
antwoord: Zorg er de volgende JUG040 meeting voor dat de bijgewerkte site met faal beschikbaar is op test omgeving, zodat we mee kunnen kijken.

vraag: steeds meer sites maken gebruik van aanklikbare tiles / cards. Een grote foto met tekst en aanklikbaar om het item te openen. Hoe maak ik die voor mijn site?
antwoord: Het antwoord is te lang voor deze bijeenkomst. Hans Kuijpers zal de volgende bijeenkomst ingaan op de creatie van een alternate layout met bijbehorende css om deze wens uit te voeren.

Volgende keer

De volgende JUG Eindhoven is op maandag 7 februari. Het onderwerp van deze meeting en de mogelijkheid tot aanmelden is terug te vinden op https://www.joomlacommunity.nl/agenda/event/643-jug040-bijeenkomst-eindhoven

Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.

Reageer

1000 Resterende tekens