Maak uw ontwerpsysteem, deel 2: Grid & Layout

Kiezen hoe u lay-outs en inhoudspositie wilt gebruiken, is waarschijnlijk een van de eerste beslissingen die u neemt bij het bouwen van een ontwerpsysteem.

Het definiëren van het raster betekent het creëren van het systeem om uw inhoud te structureren, of het nu een enkele component of een paginalay-out is.

In dit artikel gaan we zien hoe een rastersysteem kan worden geïmplementeerd en hoe sommige CSS-technieken kunnen worden gebruikt om specifieke lay-outs te maken.

Dit is wat we zullen behandelen:
1) Lay-out met een automatisch gegenereerd aantal kolommen - met behulp van CSS Grid;
2) Eéndimensionale lay-out - met behulp van Flexbox;
3) Tweedimensionale lay-out - met behulp van CSS Grid;
4) Tweedimensionale lay-out met overlappende elementen - met behulp van CSS Grid.

Dit artikel maakt deel uit van een serie over ontwerpsystemen die zijn geïnspireerd op onze bibliotheek met webcomponenten. De bibliotheek vertrouwt op een solide systeem van CSS-globals. Dus dit zijn wij die de dingen delen die we hebben geleerd om de wereldwijde stijl van onze bibliotheek te bepalen!

Artikelreeks:
- Deel 1: Typografie
- Deel 2: Raster en lay-out
- Deel 3: kleuren
- Deel 4: Afstand
- Deel 5: Pictogrammen
- Deel 6: Knoppen

1 - Lay-out met een automatisch gegenereerd aantal kolommen

Stel dat u een galerij met producten hebt die u in een raster wilt indelen: al uw artikelen moeten dezelfde breedte hebben (het zijn exemplaren van dezelfde component 'product', dus ze hebben dezelfde dimensie) en een minimale breedte zodat het ontwerp niet breekt; ga ervan uit dat u bij verschillende schermformaten het maximale aantal items per rij wilt; zoiets als de CodyHouse-bibliotheek (wijzig de grootte van de pagina om de verandering in aantal items te zien).

Het zou ideaal zijn om een ​​manier te vinden om dit maximale aantal items automatisch te bepalen zonder nieuwe CSS-code toe te voegen bij verschillende mediaquery's.

Dit kan worden gedaan met behulp van CSS Grid.

Laten we beginnen met het maken van een grid-mixin (we zullen het ook opnieuw gebruiken voor de lay-outs 3 en 4).

Deze mixin wordt gebruikt om de rastercontainer te initialiseren (met weergaverooster) en de rasterafstand in te stellen (dit is de vrije ruimte tussen twee aangrenzende items).

We hebben de CSS Grid-code opgenomen in een @supports-regel om browsers te targeten die het Grid ondersteunen (waarbij ook de browsers worden weggelaten die de oude CSS Grid-specificatie ondersteunen, zoals IE 11).

Nu kunnen we de mixin definiëren die onze galerij zal maken; de min-breedte van de items is het enige argument van deze mixin:

Met de minmax-functie kunnen we een minimumbreedte instellen voor onze elementen, terwijl de functie repeat () zorgt voor het daadwerkelijk maken van het raster.

We kunnen nu deze mixins zo gebruiken:

En hier is een voorbeeld van deze mixins in actie:

De mixins die we hierboven hebben gedefinieerd, werken niet in IE en oudere versies van Edge (<= 15). Uw galerij is nog steeds toegankelijk, maar uw items worden één per rij weergegeven (100% breedte).

Als u een betere terugval moet bieden, kunt u de eigenschap float gebruiken om uw galerij opnieuw te maken, maar u kunt het aantal items per rij bij verschillende schermformaten niet wijzigen: u moet een vast aantal instellen van items per rij (dit nummer wordt doorgegeven als het tweede argument aan de gridinuto () mixin).

Dit is wat de grid-mixin wordt met de fallback-toevoeging:

De CSS-eigenschappen die zijn gedefinieerd in de regel @supports zijn degene die worden toegepast wanneer de browser CSS Grid ondersteunt (de nieuwe specificatie); terwijl de buiten de @ supports gedefinieerde eigenschappen in alle browsers worden toegepast (en dit is de reden waarom we binnen de regel @ supports wat extra stijl moesten toevoegen om die eigenschappen te overschrijven).

De mix van gridAuto () wordt:

De mixin accepteert nu twee argumenten: de eerste is de minimale breedte van de items in de galerij (dezelfde als eerder - het wordt alleen gebruikt als de browsers CSS Grid ondersteunen), de tweede (optioneel) - standaardwaarde is 3 ) is het aantal items per rij in browsers die CSS Grid niet ondersteunen (waar de fallback wordt toegepast).

2— Eéndimensionale lay-out

Dit is waarschijnlijk de eenvoudigste lay-out die we kunnen maken: we hebben items die we in kolommen willen rangschikken, met de optie om hun breedte aan te passen en nog steeds de ruimte onder hen gelijk te kunnen verdelen.

Er zijn maar weinig technieken die we kunnen gebruiken om dit soort lay-out te implementeren. We gaan Flexbox in combinatie met hulpprogramma-klassen gebruiken om de itemsbreedte aan te passen.

Deze aanpak bestaat al lang. Het is handig, maar als u geen gebruiksklassen in uw HTML wilt gebruiken (zoiets als col - 1, col - 5, ...), dan is een andere methode die ik beschrijf in sectie 3, waar we dezelfde lay-out maken met behulp van CSS Grid.

Laten we, voordat we onze rasterklassen definiëren, een variabele instellen die we als rasterkloof gebruiken:

Laten we een klasse definiëren voor onze rastercontainer:

We initialiseren onze flexcontainer (met display flex) en laten de kinderen indien nodig op meerdere lijnen wikkelen (met de eigenschap flex-wrap).
De negatieve marges worden toegevoegd om de opvulling in evenwicht te brengen die we gebruiken om de rasterkloof te maken (zie de definitie van de .col-klasse hieronder) zodat er geen lege ruimte overblijft tussen het .flex-grid-element en de container.

Onze rasteritems hebben de klasse .col:

We gebruiken de opvulling om de opening tussen elementen en de achtergrondclip te maken, zodat de achtergrondkleur / afbeelding van het .col-element niet op de opvulling wordt toegepast (waardoor de opening zichtbaar blijft).

U hoeft de eigenschap achtergrondclip niet te gebruiken als u niet van plan bent een achtergrondkleur / afbeelding aan uw .col-element toe te voegen (of als het .col-element een kind heeft, kunt u deze achtergrondstijl toepassen).

Standaard hebben alle .col-artikelen een breedte van 100% (flexbasis 100%). We kunnen klassen gebruiken om die breedtewaarde te wijzigen:

De functie voor ronde breedte wordt gebruikt om de kolombreedte af te ronden op een getal met 2 decimalen (dit voorkomt dat de lay-out breekt in IE).

Hiermee worden de klassen .col - 1 tot en met .col - 12 gemaakt (u kunt de waarde van de variabele $ grid-columns wijzigen als u geen 12-grid gebruikt).

Als u een lay-out met twee elementen wilt maken, waarbij de eerste 9 van de 12 beschikbare kolommen in beslag neemt en de laatste de resterende 3, kunt u zoiets gebruiken als:

U kunt ook verschillende klassen definiëren voor verschillende mediaquery's als u de breedte van uw elementen bij verschillende schermformaten wilt wijzigen. Zoiets als:

Hier is een voorbeeld van de flexklassen in actie:

We hebben besloten dit rastersysteem op te nemen in onze bibliotheek, vanwege het gebruiksgemak. Het is echter optioneel, u kunt desgewenst de volgende methode gebruiken (die niet afhankelijk is van gebruiksklassen).

3 - Tweedimensionale lay-out

In lay-out 2 hebben we het geval overwogen waarbij we de breedte van de elementen in onze rij moesten regelen. We hebben helemaal geen rekening gehouden met de hoogte van de elementen.

Als we een tweedimensionale lay-out willen creëren waar we ook de hoogte van onze elementen kunnen regelen, dan is CSS Grid waarschijnlijk de beste oplossing.

Hier is een voorbeeld van een lay-out die u met deze techniek kunt maken:

We zullen de grid-mixin (gedefinieerd in sectie 1) hergebruiken en we zullen een tweede gridLayout () -mixin toevoegen.
Deze nieuwe mixin accepteert als argument een lijst met paren van getallen:

Voor elk element in uw lay-out moet u een paar cijfers doorgeven (in het bovenstaande voorbeeld passeer ik 4 paren, wat betekent dat onze lay-out uit 4 elementen bestaat). Voor elk paar getallen is de eerste het aantal kolommen dat het element moet innemen, de tweede het aantal rijen.

In de bovenstaande code zeggen we: het eerste element in de lay-out moet 7 kolommen en 2 rijen bevatten; het tweede element 5 kolommen en 1 rij; hetzelfde voor het derde element; de laatste 12 kolommen (100% breedte) en 1 rij.

Laten we eens kijken hoe de mix eruit ziet:

Eerst gebruiken we raster-sjabloon-kolommen om ons raster van kolommen te definiëren; hierdoor wordt een sjabloon van 12 kolommen gemaakt, die allemaal dezelfde breedte hebben.

Merk op dat we de grid-template-rijen (of grid-auto-rijen) niet hebben gedefinieerd. Dit komt vooral omdat de rijhoogte afhankelijk is van het type inhoud dat u wilt weergeven: u kunt besluiten om rijen met een vaste hoogte, rijen die een percentage van de viewport zijn of gewoon uw inhoud te laten bepalen de hoogte. U kunt dit in uw klas opgeven wanneer u de mixin aanroept.

De 'elke'-lus is waar de items worden toegewezen: voor elk van de paren die aan de mixin worden doorgegeven, nemen we het overeenkomstige element (met de: nth-of-type selector) en plaatsen het in ons raster (met behulp van het span-sleutelwoord ).

Hier is een voorbeeld van de mixin in actie:

Opmerking: het tweede nummer in elk paar is niet vereist (in de mixin controleren we of de tweede waarde wordt doorgegeven voordat we de eigenschap grid-row-end instellen).

Als u slechts één nummer per item doorgeeft, kunt u een eendimensionale lay-out maken; dit is een alternatief voor de methode beschreven in sectie 2 (Flexbox + utility-klassen).

We kunnen de gridLayout () -mix wijzigen om een ​​fallback toe te voegen voor browsers die CSS Grid niet ondersteunen. Houd er rekening mee dat u met de fallback de hoogte van uw items niet kunt regelen.

4 - Tweedimensionale lay-out met overlappende elementen

Dit is een vrij specifiek geval van de lay-out: stel dat u een tweedimensionale lay-out wilt maken (zoals we deden met geval 3 waar u zowel de breedte als de hoogte van uw items kunt instellen) maar u wilt de begin- / eindpositie van uw elementen ook (zodat ze elkaar kunnen overlappen).

Met de mixin gridLayout () worden de items automatisch in het rooster geplaatst zonder overlapping. Je kunt zoiets niet maken:

We kunnen een nieuwe gridAdvanced () -mixin maken die onze lay-out een stap verder brengt; hier is hoe we het gaan gebruiken:

Deze keer moeten we voor elk element in onze lay-out vier cijfers doorgeven: de eerste twee zijn de begin- en eindpositie van het item binnen de rasterkolommen, en de laatste twee de begin- en eindpositie van de rij.

In het bovenstaande voorbeeld hebben we 3 elementen: de eerste begint bij kolom 1 en eindigt bij kolom 8 (wat betekent dat het 7 kolommen in onze lay-out in beslag neemt -> onthoud dat kolom 8 het einde van het element markeert, dus het is niet inbegrepen) en begint bij rij 1 en eindigt bij rij 3 (2 rijen); de tweede neemt dezelfde kolommen maar begint bij rij 3 en eindigt bij rij 5 (2 rijen); de derde begint bij kolom 5 en neemt alle resterende kolommen op (-1 betekent gaan tot kolom 12 maar ook opnemen) en begint bij rij 2 en eindigt bij rij 4 (2 rijen).

Hier is onze mixin:

Dit is vrij gelijkaardig aan de gridLayout () one; deze keer gebruiken we echter de rasterkolom (/ rij) -start / end om de positie van onze elementen op te geven.

Hier is een voorbeeld van de mixin in actie:

We kunnen ook een terugval bieden voor deze mixin; houd er rekening mee dat u het overlappende effect niet kunt maken en de hoogte van de items kunt aanpassen.

Dat is alles wat ik moet delen over hoe we het rastersysteem instellen voor de CodyHouse-bibliotheek. Zoals gewoonlijk staan ​​we open voor suggesties! Alle feedback is welkom.

Ik hoop dat je het artikel leuk vond! Volg ons voor meer informatie over webdesign op Medium of Twitter.