Waarschuwing
Kan map niet verwijderen. Pad: /data/sites/web/joomlacommunitynl/data/test.joomlacommunity.nl/public_html/cache/com_content
Bericht sluiten

| Door: Wilma Pot. | Categorie: Utrecht.

Verslag JUG Utrecht 9 juli 2018 – Presentatie CSS-grid door Patrick Smits

Nieuws

  • De bijeenkomst van augustus zal plaatsvinden in “Brede School Het Zand”, een routebeschrijving volgt later. Het beheer van de buurthuizen in Utrecht schijnt onder vuur te liggen, wat wellicht consequenties heeft voor de op handen zijnde verhuizing. We wachten het af.
  • In augustus zal Anja de Crom een presentatie houden. In september Jordi van Nistelrooij over veilig mailen. Mindert Aardema is bereid een presentatie komen houden, waarbij wij zelf een onderwerp mogen aandragen. De nog uit te komen versies 3.9 of 4.0 of uitleg over de forum-extensie Kunena lijken een optie. We zullen met Mindert overleggen en hem uitnodigen voor oktober of november.
  • Joomla 3.8.9 en 3.8.10 zijn direct na elkaar uitgekomen vanwege een bug.
  • De sinterklaasorganisatie heeft contact opgenomen met de vraag om hulp bij een nieuwe website. Aangezien Anja het te druk heeft, zullen Patrick en Wilma contact opnemen om te bekijken of we ze kunnen helpen en wat de exacte wensen zijn. We zouden eventueel ook in augustus gezamenlijk met de hele groep samen een website kunnen maken, leuk als gezamenlijk project, waarbij we gelijk kunnen zien hoe de ander een website bouwt.

Presentatie Patrick Smits: CSS-grid

Met Bootstrap-2 kon je kolommen definiëren en als je een kleiner scherm bekijkt, zet hij de kolommen onder elkaar. In Bootstrap-3 werkt het met classes. Je maakt eerst een ‘kader’ aan en daarbinnen maak je de kolommen. Je kan dan op deze Bootstrap-classes overrides maken.

CSS-grid is nieuw en dit werkt anders omdat de CSS in je browser wordt geladen en niet in je template. Het werkt met alle browsers, behalve met Internet Explorer. In Google Analytics kan je zien hoeveel bezoekers er nog met IE werken.

In je CSS-bestand zet je:

  • class display: grid;
  • grid-template-columns: repeat (4, 1fr);

De kolommen worden dan uitgevuld en verdeeld over de breedte van het scherm. Met een class kan je de opmaak van een grid-area aangeven. Ook kan je de volgorde van je content aangeven, bijv. eerst kolom 2, dan 1, dan 4 en dan pas 3 weergeven. Wil je een area leeg laten dan kan je daar een punt voor gebruiken. Je hoeft geen padding op te geven, want met een grid-column-gap geeft je met het aantal pixels de tussenruimte tussen de kolommen aan (dit is gemakkelijker dan padding, want hierbij snapt hij automatisch dat er links en rechts van de kolommen bij de kantlijnen geen padding hoeft te komen). Ditzelfde geldt voor rijen, dan is de code: grid-row-gap. Wil je in de 2e kolom beginnen met de weergave van de gegevens, dan gebruik je de code: grid-column-start: 2. Alles wat je met kolommen kan doen, geldt ook voor rijen.

Bij Bootstrap wordt alles ingeladen en vervolgens geeft je aan dat je bepaalde dingen niet weergeeft. Bij CSS-grid wordt het niet geladen.

CSS-grid zit in CSS-3, je kan het dus gewoon gebruiken voor je HTML- of Joomla-site. Het is erg handig en veel flexibeler dan Bootstrap. Je kan er zelfs een hele template eenvoudig mee opbouwen. Ook kan je het voor de opmaak van nieuwsbrieven gebruiken. Het bestaat maar uit ongeveer 20 functies waarmee je alles kan doen.

 

Wil je de presentatie nog nalezen: https://cssgrid.uzoektpatrick.nl

We vinden dit onderwerp zo interessant dat we Patrick vragen nog een keer een vervolg hierop te komen presenteren.

1000 Resterende tekens


Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid en Servicevoorwaarden zijn van toepassing.