Indhold
Flexbox er et godt værktøj til at reducere CSS oppustethed og har noget sukker indbygget til at håndtere ting som kildearrangement og justering. Men det giver ingen hjælp til at udføre matematikken, der skaber søjle- og tagrendestørrelser. Som mange eksperter gentagne gange siger: Flexbox er rart, men det er ikke et netsystem.
Vi skal bruge Flexbox, men vi skal ikke smide de grundlæggende koncepter bag netsystemer, der trak os ud af 'GeoCities-æraen' med design:
- Gør kolonner proportionale med noget
- Brug ensartede tagrender i hele dit design
Vi kan bruge et af de mange Flexbox-gittersystemer derude, men ærligt talt er stilarterne bag disse for det meste de samme som float-baserede net. Forfattere tilføjer bare skærm: flex til containeren sammen med nogle hjælperklasser, der tilslører Flexbox-egenskaber (for eksempel en klasse som .net-lodret-juster-midt er en tilsløring af align-items: center).
Den eneste forskel er, nu er kolonner 'bøjet', hvilket betyder, at vi får det sukker, jeg nævnte tidligere. Men dette løser stadig ikke de vigtigste problemer, som netværker står over for i dag: gittersystemer leverer stadig masser af CSS-oppustethed, og net er stadig kedeligt.
- 25 førsteklasses webstedsskabeloner
Problemet med net
Netforfattere distribuerer typisk enorme pakker med CSS, der kan kompensere, kildeordre, justere og ændre størrelse i henhold til en vilkårlig enhedsstørrelse. De stoler på gzip for at afbøde nogle af skaderne, men det får ikke det hele. Hvad hvis du ikke har brug for disse ekstra funktioner?
Forudsat at den ramme, du i øjeblikket bruger, tilbyder gittermixins, kan den bedste løsning være at lære dem og komponere dine egne kolonner. Dette giver lidt oppustethed, men begrænser dine gitre til brøker og giver dig ikke meget mobilitet mellem forskellige rammer.
På det andet nummer. Designere er blevet mentalt fastlåst i at træffe alle deres beslutninger baseret på en bestemt kombination af lige store kolonner. Som et resultat begynder hele internettet at sløre sammen til en 'stack på mobil; 1/12 kolonnekombinationer på noget andet ’dystopi.
Flexbox introduceret flex-grow, der befri os lidt. Nu kan vi indstille størrelser, der ser godt ud og udfylde den resterende plads med et strakt element, men stemmer tagrender jævnligt op på hele siden? Er indholdsområder anlagt med nogen form for proportioner i tankerne, eller er vi tilbage til bare at vinge det?
Gå ind i dragen
Løsningen på begge disse problemer er pakket ind i en funktion kaldet postcss-ant. PostCSS-plugins kan bruges med en række buildværktøjer som webpack, gulp eller simpelthen kommandolinjen. myre blandes problemfrit ind i almindelig CSS (eller en hvilken som helst forprocessor) med en vildledende simpel API, der maskerer snesevis af forbløffende beregnet formler. Det kræver to mixin-lignende parametre for at hente en overflod af gittervenlige størrelser.
Et eksempel kan gøre dette tydeligere: bredde: størrelser (1/2) få (1) vender tilbage beregnet (99,99% * 1/2 - (30px - 30px * 1/2)). Lad os nedbryde dette:
- størrelser () er en rumskilt liste over størrelser. Disse kan være en hvilken som helst kombination af en række størrelser: faste tal i form af gyldige CSS-længder (px, em, %); brøker eller flydende tal (som returnerer det, der er tilbage, har faste tal) og auto nøgleord (som returnerer uanset hvilken størrelse der er tilbage, uden fraktioner og faste tal)
- plukke() er et 1-baseret indeks, der henter en netvenlig størrelse fra din liste. Så størrelser (1px 2px 3px) få (2) ville vende tilbage 2px
- Det beregnet formel er en netvenlig størrelse
Vi får bredden for hver kolonne i et gitter med to søjler med en enkelt 30px tagrender mellem dem:
.grid {display: flex; flex-wrap: wrap; } .halv {bredde: størrelser (1/2) få (1); / * returnerer calc (99,99% * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; / * placerer en tagrender i højre side af hver kolonne * /}. halvdel: nth-child (2n + 2) {/ * starter ved 2. element og begynder at tælle med 2s * / margin-right: 0 ; / * fjerner den sidste tagrender fra hver række * /}
Dette giver designere allerede beføjelse til at bruge disse størrelser, uanset hvor de finder det passende, men lad os dykke dybere.
størrelser (100px 1/2) få (1) vender tilbage 100px. Simpelt nok, men hvorfor skulle vi bruge myre til at vende tilbage 100px ? Vi kommer til det om et sekund.
størrelser (100px 1/2) få (2) vender tilbage calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)). Holy crap. ant finder ud af den samlede størrelse af faste numre og vender derefter tilbage 1/2 af det, der er tilbage - på en nittende netvenlig måde.
Vi kan bruge disse beregnet formler for at oprette et gitter med en 100px kolonne og to 1/2 kolonner som sådan (jeg vil udelade .net stilarter for at gemme træer, men sørg for at medtage dem i din kode):
. fast størrelse {bredde: størrelser (100 px 1/2) får (1); / * returnerer 100 pixel (jeg ved, det virker fjollet, men bær mig lidt længere) * / margin-right: 30px; } .halv {bredde: størrelser (100px 1/2) får (2); / * returnerer calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; }. halvdel: nth-child (3n + 3) {margin-right: 0; }
Nu kan vi få nogle tidligere uopnåelige størrelser, men det er ikke superfleksibelt endnu og kan kræve en masse skrivning, når man beskæftiger sig med mange størrelser.
Preprocessor looping
Forprocessorer og PostCSS kommer ikke altid overens - især når der er tale om tilpasset syntaks. Heldigvis er myrs API forprocessorvenlig. Vi kan bruge en PostCSS-parser som postcss-scss med et PreCSS-plugin, men denne tilgang bruger mange ufærdige / ikke-vedligeholdte PostCSS-plugins, der dårligt efterligner Sass 'funktionalitet. Jeg har fundet den bedste arbejdsgang er at:
- Brug en hurtig forprocessor som node-sass til at se in.scss til out.css
- Brug PostCSS til at se out.css til final.css
- link> til final.css i din markering
Dette giver dig det bedste af preprocessorsyntaks med alle de PostCSS-plugins, som dit hjerte ønsker.
Nu til de seje ting. Forprocessorer har typisk en måde at sløjfe et bestemt antal gange, mens de leverer en iterator:
@for $ i fra 1 til 3 {indhold: $ i; // returnerer indhold: 1; indhold: 2; indhold: 3; }
Med lidt kendskab til præprocessorer kan du begynde at bruge myre på virkelig interessante måder ...
$ størrelser: 100 px 1/2 1/2; $ tagrender: 30 px; $ længde: længde ($ størrelser); .kolonne {margin-right: $ gutter; @for $ i fra 1 til $ længde {&: nth-child (# {$ length} n + # {$ i}) {bredde: størrelser ($ størrelser) får ($ i) tagrender ($ tagrender); }} &: nth-child (# {$ length} n + # {$ length}) {margin-right: 0; }}
Nu ombrydes vores kolonner med uregelmæssigt størrelse til nye rækker uden yderligere markering. Fortsæt og tinker rundt med denne kode. Prøv at variere størrelser, tagrender og tilføje nye størrelser (som 100 px automatisk 100 pixel).
Dette er et ret almindeligt mønster med myre, så jeg har pakket det ind i en ejendom, der også fungerer med vanille CSS:
.grid {generer-gitter: størrelser (100 px 1/2 1/2); / * Du kan videregive yderligere muligheder, men pluk () er ikke længere nødvendig. * /}
Masser af muligheder
niende gitre er gode, når du kender størrelsen og antallet af elementer, der skal sendes, men nogle gange vil du oprette en container og bare dumpe nogle tilfældige størrelser derinde. I disse tilfælde negativ margen gitre er dit bedste valg. Du skal bare passere negativ margen at myr sådan:
.grid {margin: 0 -15px; }. kolonne {bredde: størrelser (1/3) get (1) gitter (negativ margen); margen: 0 15px; }
Konklusion
Disse eksempler var bare et lille glimt af alle de seje ting postcss-ant kan gøre. Det har et par ekstra valgfrie parametre og masser af beskrivende fejlhåndtering, men myrs sande kraft er dig.
'Dumme' værktøjer, der simpelthen returnerer en smule data, er altid de bedste værktøjer, da de sætter strømmen tilbage i udviklerens hænder. Det er, hvad postcss-ant var designet til at gøre. Hvis du er fascineret, skal du gå til corysimmons.github.io/postcss-ant for nogle ansigtssmeltende demoer og søde dokumenter.
Denne artikel blev oprindeligt offentliggjort i nummer 286 af netmagasinet, køb det her.
