Sådan oprettes fleksible layout med Susy og Breakpoint

Oprettelse af responsive layouts kan være udfordrende på grund af den involverede matematik, så det er almindeligt for designere at henvende sig til rammer og / eller Sass for at forenkle processen. En masse rammer er baseret på et 12-søjles gitter, men et lydhørt sted passer ikke altid ind i denne struktur. Her viser jeg dig, hvordan du bruger to Sass-udvidelser til at skabe virkelig fleksibelt layout, der overskrider 12-søjlens gitter.

Problemet

Det kan være svært at designe responsive layout, da det involverer beregning af bredden på containere, rækker, søjler og tagrender ved forskellige brudpunkter. Rammer kan hjælpe ved at oprette forudindstillinger til fælles breakpoints. Bootstrap 3 giver os for eksempel et 12-søjles gitter med fire medieforespørgsel breakpoints. Du bruger derefter klasser, der får dit indhold til at optage et bestemt antal pletter i gitteret, og tagrenderne tager altid 30 pixel.



I et simpelt Bootstrap 3-layout med kun tre breakpoints (to vist ovenfor) er der klasser, der ikke tilføjer semantisk værdi

I et simpelt Bootstrap 3-layout med kun tre breakpoints (to vist ovenfor) er der klasser, der ikke tilføjer semantisk værdi

Dette fungerer glimrende det meste af tiden, men der er to problemer. Først kan det være lidt detaljeret at tilføje disse klasser til din markering. Sig, at du vil have et layout, der bruger alle kolonnerne på mobile enheder, seks af de 12 kolonner på små enheder og fire på mellemstore enheder. Denne markering kan se sådan ud:

Services

Exotic Pets

We offer specialized care for reptiles, rodents, birds, and other exotic pets.

Det andet problem er, at disse klasser tilføjer layoutoplysninger til din HTML og gør din kode vanskelig at opdatere, især på en stor installation. Da dine layout bliver mere komplekse, kan du ende med en kode, der ser sådan ud:

Det større problem er, at du har ringe fleksibilitet. Din ramme skal tage sig af matematikken, fordi det er den hårde del, men det skal ikke diktere metrics for dit layout. Hvem gjorde disse rammer til chefen for dig?

Susy

Susy 's enkle løfte er at lade dig bekymre dig om designet, mens det tager sig af matematikken. I sin kerne er det et sæt Sass mixins til beregning af bredder i et fuldstændigt fleksibelt netsystem.

Susy er en serie mixins til Sass, der tager sig af matematikken til ethvert layoutgitter, så du kan fokusere på designelementerne

Susy er en serie mixins til Sass, der tager sig af matematikken til ethvert layoutgitter, så du kan fokusere på designelementerne

Start med at importere biblioteket til dit projekt via en importkommando: @import 'susy' ;. Dette giver dig adgang til Susys gitterramme, som ikke kunne være enklere at implementere. I sin mest basale form er der kun to mixins, du skal lære. Først er beholderblandingen.

Beholdere

Beholdere hjælper dig med at kontrollere, hvordan bredden på et element tilpasser sig forskellige brudpunkter. Med Susy kan vi til enhver tid omdefinere containerne inde i ethvert element uden at skulle tilføje yderligere klasser til vores HMTL-kode.

Lad os sige, at jeg lægger et andet websted. Hvis jeg vil oprette en container inden for et HTML-element, kan jeg tilføje en include i min erklæring, som denne:

#welcome { article { @include container(70%); } //article }

Dette får elementet med en sektionsklasse til at fungere som en bootstrap-container uden at skulle tilføje en .container-klasse til vores HTML - hvilket betyder, at vores HTML kan være meget mere semantisk.

Welcome to the Landon Hotel

The original Landon perseveres after 50 years in the heart of West London. The West End neighborhood has something for everyone – from theater to dining to historic sights. And the not-to-miss Rooftop Cafe is a great place for travelers and locals to engage over drinks, food, and good conversation.

hvordan man kan være en stor kreativ direktør

Ud over at gøre min HTML meget mere læselig, gør det tingene nemmere at opdatere. Når vi bruger klasser som indhold og scene, er det let at omdefinere, hvad disse elementer betyder med hensyn til layout, i stedet for at skulle tænke over, hvor mange klasser vi skal tilføje for at få vores indhold til at opføre sig som vi ønsker det .

Velkomstsektionen på dette websted bruger Susys fleksible containere indstillet til en procentdel af bredden af ​​visningen



Velkomstsektionen på dette websted bruger Susys fleksible containere indstillet til en procentdel af bredden af ​​visningen

Spænder

I Susy opretter du rækker og kolonner ved hjælp af spændvidder. For at oprette et element, der tager en af ​​tre kolonner, kan du skrive noget som dette.

#usefulinfo { section { @include span(1 of 3); } }

Hvad der virkelig er godt ved dette er, at vi aldrig behøver at overholde et bestemt antal kolonner og derefter justere elementerne i overensstemmelse hermed. Ethvert element i mit layout kan kun tage den mængde plads, jeg har brug for på det tidspunkt.

Ved hjælp af en simpel @include span-sætning kan vi indstille hver af containerne til at passe ind i et brugerdefineret gitter med tre søjler

Ved hjælp af en simpel @include span-sætning kan vi indstille hver af containerne til at passe ind i et brugerdefineret gitter med tre kolonner

Dette ændrer virkelig den måde, du tænker på kolonner. Hvis jeg brugte Bootstrap, ville jeg skrive ovenstående kode som .col-sm-4, da en tredjedel af 12 kolonner er fire. Med Susy behøver jeg ikke tænke på, hvor mange enheder jeg vil spænde; Jeg kan simpelthen angive, hvor meget plads jeg har brug for. Når du ikke længere tænker på konverteringen til et bestemt antal kolonner, kan du fokusere på, hvordan layoutet skal se ud i stedet.

Opsætning af standardindstillinger

Selvfølgelig er det i ethvert layoutsystem godt at have standardindstillinger, så vi behøver ikke at specificere størrelsen på vores tagrender i alle tilfælde. Vi gør det ved at ændre en variabel kaldet $ susy øverst i vores Sass:

$susy: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside );

Susy har masser af standardindstillinger, du kan bruge til at opsætte dit standardgitter, men denne grundlæggende opsætning tager sig af at sammensætte en standard Bootstrap-lignende standard. Glem ikke, alt i Susy kan tilpasses, så du er aldrig gift med nogen af ​​disse og kan ændre dem på en tag-for-tag basis.

Standardgitteret har nu 12 kolonner, når vi bruger kommandoen @include i containerblandingen, og den beholder låses på 60 em bredde med tagrender, der er en fjerdedel af kolonnernes størrelse. Hvis vi ønskede at tilpasse vores tidligere sektioner til dette gitter, kunne vi skrive erklæringen sådan:

#usefulinfo { section { @include span(4); } }

Dette betyder, at hvert afsnit optager fire af de 12 kolonner. Jeg synes dog, det giver mere mening at kunne sige, at et element optager 'en af ​​tre' kolonner. Hvis du har brug for at udligne kolonner til en bestemt position, kan du bruge denne notation:

@include span(8 at 4 of 12);

Dette lader et element optage otte kolonner, der starter ved den fjerde position i et 12-kolonnegitter. Så når du opretter et layout, kan du fokusere på, hvad dit indhold skal gøre i stedet for, hvordan designet passer ind i dit eksisterende gitter.

hvordan du får dit projekt til at skille sig ud

Polstringskolonner

En anden måde at kontrollere placeringen af ​​dine elementer er ved at polstring dine kolonner. Dette tilføjer et antal kolonnerum på hver side af dine kolonner. For eksempel kan du flytte en kolonne syv enheder til højre og lægge den en enhed fra venstre på denne måde:

@include pad(7,1);

Dette betyder, at ud over at lægge ting ud ved at tænke på positive mellemrum (hvor mange kolonner et element skal tage op), kan du også gøre det omvendte og oprette designs baseret på afstanden på hver side af dit indhold.

Ved hjælp af pad inkluderer er det muligt at lægge dit indhold ud på negativ plads

Ved hjælp af pad inkluderer er det muligt at lægge dit indhold ud på negativ plads

Håndtering af medieforespørgsler

For at gøre tingene virkelig lydhøre, skal du være i stand til at kombinere kolonneopsætning og design med responsive breakpoints. For at gøre dette kan vi bruge et andet sæt mixins fra et bibliotek kaldet Brudpunkt .

Breakpoint gør det lettere at håndtere medieforespørgsler i dine layouts. Det gør det ved at forenkle det sprog, du skal bruge til at oprette medieforespørgselsbrudpunkter. Traditionelt opretter du disse ved hjælp af en regel som denne:

@media (min-width: 34em) and (max-width: 62em) { .container { ... } }

Dette skaber en række bredder, hvor erklæringerne har indflydelse på dit layout. Breakpoint indkapsler opkaldene i en blanding af sund fornuft, der er meget lettere at skrive:

.container { @include breakpoint(34em 62em) { ... } }

Opkaldet er også anderledes, fordi vi nemt kan tildele dette i en eksisterende klasse. Det fantastiske ved Breakpoint er, at det antager antagelser baseret på fælles layoutbehov.

Breakpoint-regler er også lette at lære. Der er kun tre ting, du skal vide:

hvordan man tegner D & D-tegn
  1. Hvis du kun inkluderer et enkelt nummer i breakpoint-opkaldet, vil Breakpoint påtage sig et medieforespørgselsopkald i min bredde
  2. Hvis du inkluderer to tal, antager breakpoint, at du vil angive et interval mellem de to tal (som i det foregående eksempel)
  3. Hvis du inkluderer to værdier, og den ene er en streng, antager den, at du sender mixen et funktionsværdipar, så hvis du vil, kan du stadig sende i retning eller en hvilken som helst anden speciel medieforespørgselsregel

Breakpoint er blevet foldet ind i Susy siden version 2.2.1. Susy-versionen fungerer ligesom Breakpoint-mixins, men i stedet for at kalde breakpoint bruger du susy-breakpoint. Det samme opkald foretages således:

.container { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

Breakpoint og Susy

Når du kombinerer Breakpoint med Susy, får du et fleksibelt gitter, der nemt kan tilpasse sig forskellige medieforespørgseldeklarationer. Lad os se på HTML'en til informationsafsnittet på et websted.

Ved at kombinere Susy og Breakpoint kan vi oprette medieforespørgsler, der indeholder forskellige gitterlayouts. I mit layout har jeg tre forskellige sektioner, men jeg vil have dem til at have forskellige regler afhængigt af bredden på visningen.

Ved to forskellige breakpoints opfører vores layout sig forskelligt, men det er ret let at udtrykke i Sass med Susy og Breakpoint

Ved to forskellige breakpoints opfører vores layout sig forskelligt, men det er ret let at udtrykke i Sass med Susy og Breakpoint

På disse to forskellige bremsepunkter opfører vores layout sig dramatisk forskelligt. I det større brydepunkt til højre optager hvert afsnit tre kolonner. I det mindre brudpunkt optager den første kolonne 100 procent af visningen, men de to andre optager halvdelen af ​​visningen. Dette er, hvad der gør disse mixins så kraftige. Koden til at udtrykke disse to layout er kortfattet:

section { @include susy-breakpoint(650px) { @include span(1 of 3); } //breakpoint @include susy-breakpoint(450px 650px) { &.checklist { @include span(1 of 2) } //checklist } //breakpoint } //section

Først opretter vi standardindstillinger for ethvert element i et sektionstag. Hvis disse elementer når en visningsport, der er større end 650 pixel, besætter de et gitter med tre enheder, hvor hver optager en enkelt enhed.

Hvis layoutet er mellem 450px og 650px, passer elementerne med en klasse af .checklist (sektionerne service og tilgængelighed) ind i et helt nyt gitter med kun to kolonner, og hvert element optager en af ​​disse enheder.

Ankomstoplysningerne tager 100 procent af nettet mellem disse to brudpunkter. Bemærk, at vi ikke specificerede, hvad der sker under 450 pixels. Dette håndteres af standardindstillingerne - hvert afsnit udgør 100 procent af visningen.

Mastering Layouts med Mixins

Hvad disse to mix-rammer giver dig, går ud over den kode, du bruger til at oprette layouts. Evnen til at udtrykke dine layout uden at skulle bekymre dig om dette gitter eller det gitter ændrer den måde, din hjerne fungerer, når du designer projekter.

Gør mig ikke forkert, jeg elsker rammer. Bootstrap kan hjælpe dig med at oprette layout med hidtil uset hastighed. Det tilbyder et kamptestet gitter, der går ud over layout for at levere alle slags CSS- og JavaScript-komponenter til hurtigt at håndtere almindelige elementer som tabeller, modeller og formularer.

Hvad det designsystem, jeg har skitseret, ændrer det sprog, du bruger til at beskrive et layout. Det er et naturligt, bagudkompatibelt og let at lære system, der vil ændre den måde, du tænker på at designe websteder.

Ord : Ray Villalobos

Ray Villalobos er medarbejderforfatter på Lynda.com med speciale i full-stack design og udvikling, frontend design, JS, AngularJS, Sass, Bootstrap. Denne artikel blev oprindeligt offentliggjort i nummer 274 af netmagasin .

Kan du lide dette? Læs disse!