Opret dit designsystem, del 2: Grid & Layout

Valg af hvordan man håndterer layout og indholdspositionering er sandsynligvis en af ​​de første beslutninger, du skal tage, når du bygger et designsystem.

Definition af gitteret betyder at oprette systemet til at strukturere dit indhold, hvad enten det er en enkelt komponent eller et sidelayout.

I denne artikel skal vi se, hvordan et gittersystem kan implementeres, og hvordan nogle CSS-teknikker kan bruges til at oprette specifikke layouts.

Her er hvad vi vil dække:
1) Layout med et automatisk genereret antal kolonner - ved hjælp af CSS Grid;
2) Endimensionel layout - ved hjælp af Flexbox;
3) To-dimensionelt layout - ved hjælp af CSS Grid;
4) To-dimensionelt layout med overlappende elementer - ved hjælp af CSS Grid.

Denne artikel er en del af en serie om designsystemer inspireret af vores bibliotek med webkomponenter. Biblioteket er afhængig af et solidt system af CSS-globale. Så dette er os, der deler de ting, vi har lært, og indstiller den globale stil på vores bibliotek!

Artikel serie:
- Del 1: Typografi
- Del 2: Grid & Layout
- Del 3: Farver
- Del 4: Afstand
- Del 5: Ikoner
- Del 6: Knapper

1 - Layout med et automatisk genereret antal kolonner

Lad os sige, at du har et galleri med produkter, du vil lægge ud i et gitter: alle dine varer skal have den samme bredde (de er forekomster af den samme 'produkt' -komponent, så de har den samme dimension) og har en mindstebredde så designet ikke går i stykker; antager, at du ved forskellige skærmstørrelser ønsker det maksimale antal varer pr. række; noget som CodyHouse-biblioteket (ændre størrelse på siden for at se ændringen i antallet af varer).

Det ville være ideelt at finde en måde at automatisk bestemme dette maksimale antal elementer uden at skulle tilføje ny CSS-kode ved forskellige medieforespørgsler.

Dette kan gøres ved hjælp af CSS Grid.

Lad os starte med at oprette et gitter-mixin (vi bruger det også til layout 3 og 4).

Denne mixin bruges til at initialisere gitterbeholderen (med displaygitter) og indstille gitterafstanden (som er det frie rum mellem to tilstødende elementer).

Vi har inkluderet CSS Grid-koden i en @supports-regel for at målrette browsere, der understøtter rutenettet (udelater også de browsere, der understøtter den gamle CSS Grid-specifikation, som IE 11).

Nu kan vi definere mixin, der skaber vores galleri; elementernes min. bredde er det eneste argument for dette mixin:

Minmax-funktionen giver os mulighed for at indstille en min-bredde for vores elementer, mens gentagelsesfunktionen tager sig af faktisk at oprette gitteret.

Vi kan nu bruge disse mixins sådan:

Og her er et eksempel på disse mixins i handling:

Mixins, som vi definerede ovenfor, fungerer ikke i IE og ældre versioner af Edge (<= 15). Dit galleri er stadig tilgængeligt, men dine varer vises en pr. Række (100% bredde).

Hvis du har brug for en bedre tilbagefald, kan du bruge float-egenskaben til at genskabe dit galleri, men du kan ikke ændre antallet af poster pr. Række ved forskellige skærmstørrelser: du skal angive et fast antal af elementer pr. række (dette nummer vil blive sendt som det andet argument til gridAuto () mixin).

Her er, hvad gitterblandingen bliver med tilbagevendende tilføjelse:

CSS-egenskaber defineret i @supports-reglen er dem, der anvendes, når browseren understøtter CSS Grid (den nye specifikation); mens egenskaberne, der er defineret uden for @supports, anvendes i alle browsere (og det er grunden til, at vi inden for @supports-reglen måtte tilføje noget ekstra format for at overskrive disse egenskaber).

GridAuto () -blandingen bliver:

Mixin accepterer nu to argumenter: det første er den minimale bredde af elementerne i galleriet (det samme som før - det bruges kun, hvis browserne understøtter CSS Grid), det andet (som er valgfrit - standardværdien er 3 ) er antallet af varer pr. række på browsere, der ikke understøtter CSS Grid (hvor tilbagefaldet er anvendt).

2— Endimensionel layout

Dette er sandsynligvis det nemmeste layout, vi kan oprette: vi har emner, vi vil arrangere i kolonner, med mulighed for at tilpasse deres bredde og stadig være i stand til at fordele pladsen blandt dem lige.

Der er få teknikker, vi kan bruge til at implementere denne form for layout. Vi vil bruge Flexbox i kombination med hjælpeklasser til at tilpasse varens bredde.

Denne tilgang har eksisteret i lang tid. Det er praktisk, men hvis du ikke vil bruge værktøjsklasser i din HTML (noget som col - 1, col - 5, ...), så er en anden metode den, jeg beskriver i afsnit 3, hvor vi opretter det samme layout ved hjælp af CSS Grid.

Før vi definerer vores gitterklasser, skal vi angive en variabel, som vi vil bruge som gitterafstand:

Lad os definere en klasse for vores gittercontainer:

Vi initialiserer vores flex-beholder (ved hjælp af display-flex) og tillader børnene at vikle på flere linjer, hvis nødvendigt (ved hjælp af flex-wrap-egenskaben).
De negative margener tilføjes for at afbalancere polstringen, vi bruger til at oprette gitterafstanden (se .col-klassedefinition nedenfor), så der ikke er nogen tom plads mellem .flex-gitterelementet og dets beholder.

Vores gitterprodukter har en .col-klasse:

Vi bruger polstret til at skabe mellemrummet mellem elementer og baggrundsklip, så baggrundsfarven / billedet af .col-elementet ikke anvendes på polstret (hvilket lader afstanden være synlig).

Du behøver ikke at bruge egenskaben baggrund-klip, hvis du ikke planlægger at tilføje en baggrund-farve / billede til dit .col-element (eller hvis .col-elementet har et barn, kan du anvende denne baggrundstil).

Som standard har alle .col-emner en 100% bredde (flex-base 100%). Vi kan bruge klasser til at ændre denne breddeværdi:

Funktionen rundbredde bruges til at afrunde kolonnens bredde til et tal med 2 decimaler (dette forhindrer, at layoutet brydes i IE).

Dette skaber klasserne .col - 1 op til .col - 12 (du kan ændre værdien af ​​variablen $ grid-columns, hvis du ikke bruger et 12 enhedsnet).

Hvis du vil oprette et layout med to elementer, den første optager 9 af de 12 tilgængelige kolonner og den sidstnævnte den resterende 3, kan du bruge noget som:

Du kan også definere forskellige klasser for forskellige medieforespørgsler, hvis du vil ændre bredden på dine elementer i forskellige skærmstørrelser. Noget som:

Her er et eksempel på flexklasserne i aktion:

Vi har besluttet at inkludere dette gittersystem i vores bibliotek på grund af dets brugervenlighed. Det er dog valgfrit, du kan bruge den næste metode (som ikke er afhængig af hjælpeklasser), hvis du foretrækker det.

3 - To-dimensionelt layout

I layout 2 overvejede vi tilfældet, hvor vi havde brug for at kontrollere bredden af ​​elementerne i vores række. Vi overvejede overhovedet ikke højden på elementerne.

Hvis vi ønsker at oprette et todimensionalt layout, hvor vi også kan kontrollere vores elementers højde, er CSS Grid sandsynligvis den bedste løsning.

Her er et eksempel på et layout, du kan oprette ved hjælp af denne teknik:

Vi genbruger gitter-mixin (defineret i afsnit 1), og vi tilføjer en anden gridLayout () -mixin.
Denne nye mixin accepterer som argument en liste over par med tal:

For hvert element i dit layout skal du videregive et par numre (i eksemplet ovenfor passerer jeg 4 par, hvilket betyder, at vores layout er sammensat af 4 elementer). For hvert par numre er det første antallet af søjler elementet skal besætte, det andet antallet af rækker.

I koden ovenfor siger vi: det første element i layoutet skal optage 7 kolonner og 2 rækker; det andet element 5 kolonner og 1 række; det samme for det tredje element; den sidste 12 kolonner (100% bredde) og 1 række.

Lad os se, hvordan mixin ser ud:

Først bruger vi gitter-skabelon-kolonner til at definere vores gitter af kolonner; dette skaber en skabelon med 12 kolonner, der alle har samme bredde.

Bemærk, at vi ikke har defineret gitter-skabelon-rækker (eller gitter-auto-rækker). Dette skyldes mest, at rækkehøjden afhænger af den type indhold, du vil vise: du kan beslutte at have rækker med en fast højde, rækker, der er en procentdel af visningen, eller bare lade dit indhold bestemme højden. Du kan specificere dette i din klasse, når du ringer til mixin.

Loopen 'hver' er, hvor elementerne er tildelt: for hvert af parene, der sendes til mixin, tager vi det tilsvarende element (ved hjælp af: nth-af-typen-vælger) og placerer det i vores gitter (ved hjælp af span-nøgleordet ).

Her er et eksempel på mixin i handling:

Bemærk: det andet nummer i hvert par er ikke påkrævet (i mixin kontrollerer vi, om den anden værdi er bestået, før indstillingen af ​​rutenet til ende-egenskab).

Hvis du passerer kun et tal pr. Element, giver du dig mulighed for at oprette et endimensionelt layout; dette er et alternativ til metoden beskrevet i afsnit 2 (Flexbox + utility klasser).

Vi kan ændre gridLayout () -mixin for at tilføje en dropback for browsere, der ikke understøtter CSS Grid. Bare husk, at du med tilbagefaldet ikke vil være i stand til at kontrollere højden på dine varer.

4 - To-dimensionelt layout med overlappende elementer

Dette er en ganske specifik layout-sag: Lad os sige, at du vil oprette et to-dimensionelt layout (som vi gjorde med sag 3, hvor du kan indstille både bredde og højde på dine emner), men du vil kontrollere start / slutpositionen for din elementer også (så de kan overlappe hinanden).

Med blandingen gridLayout () placeres emnerne automatisk i gitteret uden overlapning. Du vil ikke være i stand til at skabe noget lignende:

Vi kan oprette et nyt gridAdvanced () mixin, der bringer vores layout et skridt videre; Sådan bruger vi det:

Denne gang er vi nødt til at videregive fire numre for hvert element i vores layout: de første to er emnets start- og slutposition inden i gitterkolonnerne, mens de sidste to rækkens start- og slutposition.

I eksemplet ovenfor har vi 3 elementer: den første starter ved kolonne 1 og slutter ved kolonne 8 (hvilket betyder, det tager 7 kolonner i vores layout -> husk kolonne 8 markerer slutningen af ​​elementet, så det er ikke inkluderet) og starter ved række 1 og slutter ved række 3 (2 rækker); den anden tager de samme kolonner, men den starter ved række 3 og slutter ved række 5 (2 rækker); den tredje starter ved kolonne 5 og optager alle de resterende kolonner (-1 betyder gå indtil kolonne 12 men inkluder den også) og starter ved række 2 og slutter ved række 4 (2 rækker).

Her er vores mixin:

Dette ligner ret gitterLayout (); denne gang bruger vi dog gitterkolonnen (/ række) -start / slut for at specificere placeringen af ​​vores elementer.

Her er et eksempel på mixin i handling:

Vi kan også tilbyde et tilbageslag for denne mixin; husk, at du ikke vil være i stand til at skabe den overlappende effekt samt tilpasse varernes højde.

Det er alt, hvad jeg skal dele om, hvordan vi indstiller ridsystemet til CodyHouse-biblioteket. Som sædvanlig er vi åbne for forslag! Enhver feedback er velkommen.

Jeg håber, du nød artiklen! For flere webdesign-nuggets, følg os her på Medium eller Twitter.