Nilalaman
Ang Flexbox ay isang mahusay na tool para sa pagbabawas ng CSS bloat, at mayroong ilang mga asukal na naka-built in upang harapin ang mga bagay tulad ng pagkakasunud-sunod ng pagkakasunud-sunod at pagkakahanay. Ngunit hindi ito nag-aalok ng anumang tulong para sa paggawa ng matematika na lumilikha ng laki ng haligi at kanal. Tulad ng maraming dalubhasa na paulit-ulit na sinasabi: Ang Flexbox ay maganda, ngunit hindi ito isang grid system.
Dapat naming gamitin ang Flexbox, ngunit hindi namin dapat itapon ang mga pangunahing konsepto sa likod ng mga system ng grid na hinila kami mula sa 'GeoCities era' ng disenyo:
- Gawing proporsyonal ang mga haligi sa isang bagay
- Gumamit ng pare-pareho na kanal sa buong iyong disenyo
Maaari naming gamitin ang isa sa maraming mga system ng grid ng Flexbox doon, ngunit sa lahat ng katapatan, ang mga istilo sa likod ng mga ito ay halos kapareho ng mga float na nakabatay sa float. Ang mga may-akda ay nagdaragdag lamang ng display: lumipat sa lalagyan, kasama ang ilang mga klase ng helper na gumagambala sa mga katangian ng Flexbox (halimbawa, isang klase tulad ng .grid-vertical-align-mid ay isang pagkaabala ng align-item: gitna).
Ang pagkakaiba lamang, ngayon ang mga haligi ay 'nabaluktot', na nangangahulugang nakukuha natin ang asukal na nabanggit ko kanina. Ngunit hindi pa rin nito nalulutas ang mga pangunahing problema na kinakaharap ng mga grids ngayon: ang mga system ng grid ay naglalabas pa rin ng isang tonelada ng CSS bloat, at ang mga grids ay nakakatamad pa rin.
- 25 mga nangungunang mga template ng website
Ang problema sa grids
Karaniwang namamahagi ang mga may-akda ng grid ng malaking mga pack ng CSS na maaaring mapunan, mapagkukunan ng pagkakasunud-sunod, ihanay at baguhin ang laki ayon sa ilang di-makatwirang laki ng aparato. Nakasalalay sila sa gzip upang mapagaan ang ilan sa mga pinsala, ngunit hindi ito nakukuha lahat. Paano kung hindi mo kailangan ang mga sobrang tampok?
Ipagpalagay na ang balangkas na kasalukuyang ginagamit mo ay nag-aalok ng mga paghahalo ng grid, ang pinakamahusay na solusyon ay maaaring malaman ang mga iyon at bumuo ng iyong sariling mga haligi. Gumagawa ito ng maliit na bloat, ngunit nililimitahan ang iyong mga grid sa mga praksyon at hindi nag-aalok sa iyo ng maraming kadaliang kumilos sa pagitan ng iba't ibang mga balangkas.
Sa ikalawang isyu. Ang mga tagadisenyo ay naka-lock sa pag-iisip sa paggawa ng lahat ng kanilang mga desisyon batay sa isang tiyak na kumbinasyon ng pantay na laki ng mga haligi. Bilang isang resulta, ang buong internet ay nagsisimulang mag-blur na magkasama sa isang 'stack sa mobile; Mga kumbinasyon ng 1/12 na haligi sa anumang dystopia.
Ipinakilala ang Flexbox lumubog, na lumaya sa atin ng kaunti. Ngayon ay maitatakda namin ang mga laki na maganda ang hitsura at punan ang natitirang puwang na may isang nakaunat na elemento, ngunit ang mga gutter ay patuloy na pumipila sa buong pahina? Ang mga lugar ba ng nilalaman ay inilatag na may anumang uri ng mga proporsyon sa isip, o bumalik ba tayo sa pakpak lamang nito?
Pumasok sa dragon
Ang solusyon sa kapwa mga problemang ito ay nakabalot sa isang pagpapaandar na tinatawag na postcss-ant. Maaaring magamit ang mga plugin ng PostCSS na may isang hanay ng mga tool sa pagbuo tulad ng webpack, gulp o simpleng linya ng utos. walang halo ang paghahalo ng langgam sa payak na CSS (o anumang preprocessor) na may isang mapanlinlang na simpleng API na nagtatakip sa dose-dosenang nakakaisip kwelyo mga pormula Nangangailangan ito ng dalawang mga parameter na tulad ng mixin upang kumuha ng isang kalabisan ng mga laki ng grid-friendly.
Ang isang halimbawa ay maaaring gawing mas malinaw ito: lapad: laki (1/2) makakuha (1) nagbabalik calcul (99.99% * 1/2 - (30px - 30px * 1/2)). Tanggalin natin ito:
- laki () ay isang listahan ng mga laki na pinaghiwalay ng espasyo. Maaari itong maging anumang kumbinasyon ng iba't ibang laki: nakapirming mga numero sa anyo ng wastong haba ng CSS (px, sila em, %); mga praksyon o float na numero (na ibabalik ang anumang natitira, sans nakapirming mga numero); at awtomatiko mga keyword (na ibabalik ang anumang laki na natitira, sans mga praksyon at naayos na mga numero)
- pluck () ay isang 1-based na index na kumukuha ng isang laki ng grid-friendly mula sa iyong listahan. Kaya laki (1px 2px 3px) makakuha (2) babalik 2px
- Ang kwelyo ang pormula ay isang laki ng grid-friendly
Nakukuha namin ang lapad para sa bawat haligi sa isang dalawang-haligi na grid na may isang solong 30px na kanal sa pagitan nila:
.grid {display: flex; baluktot-balot: balot; } .half {lapad: laki (1/2) makakuha (1); / * nagbabalik ng calc (99.99% * 1/2 - (30px - 30px * 1/2)) * / margin-kanan: 30px; / * naglalagay ng kanal sa kanang bahagi ng bawat haligi * /} .half: nth-child (2n + 2) {/ * ay nagsisimula sa ika-2 elemento at nagsisimulang bilangin ng 2s * / margin-right: 0 ; Tinatanggal ni / * ang huling kanal mula sa bawat hilera * /}
Binibigyan na nito ng kapangyarihan ang mga tagadisenyo na gamitin ang mga laki na ito saan man nila makita na angkop, ngunit sumisid tayo nang mas malalim.
laki (100px 1/2) makakuha (1) nagbabalik 100px. Sapat na simple, ngunit bakit kailangan naming gumamit ng langgam upang bumalik 100px ? Makakarating tayo sa isang segundo.
laki (100px 1/2) makakuha (2) nagbabalik calcul ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)). Banal na basura. Inaalam ng langgam ang kabuuang sukat ng mga nakapirming numero, at pagkatapos ay babalik 1/2 ng anumang natitira - sa isang n-grid-friendly na paraan.
Maaari nating gamitin ang mga ito kwelyo mga pormula upang lumikha ng isang grid na may a 100px haligi at dalawa 1/2 mga haligi tulad nito (tatanggalin ko ang .grid mga istilo upang mai-save ang mga puno, ngunit tiyaking isama ang mga ito sa iyong code):
.fixed-size {lapad: laki (100px 1/2) makakuha (1); / * nagbabalik ng 100px (alam kong parang hangal ngunit magtiis sa akin nang medyo mas mahaba) * / margin-right: 30px; } .half {lapad: laki (100px 1/2) makakuha (2); / * nagbabalik ng calc ((99.99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * / margin-kanan: 30px; } .half: nth-child (3n + 3) {margin-right: 0; }
Ngayon ay makakakuha tayo ng mga dati nang hindi maaasahang laki, ngunit hindi pa ito masyadong nababaluktot at maaaring mangailangan ng maraming pagsulat kapag nakikipag-usap sa maraming laki.
Pag-loop ng preprocessor
Ang mga nagpoproseso at PostCSS ay hindi laging nagkakasundo - lalo na kapag kasangkot ang pasadyang syntax. Sa kabutihang palad, ang API ng langgam ay preprocessor-friendly. Maaari kaming gumamit ng isang PostCSS-parser tulad ng postcss-scss na may isang PreCSS plugin, ngunit ang pamamaraang ito ay gumagamit ng maraming hindi natapos / hindi nakalamang mga plugin ng PostCSS na hindi maganda ang paggaya sa pagpapaandar ni Sass. Natagpuan ko ang pinakamahusay na daloy ng trabaho ay ang:
- Gumamit ng isang mabilis na preprocessor tulad ng node-sass upang mapanood sa.scss sa palabas.css
- Gumamit ng PostCSS upang mapanood palabas.css sa panghuli.css
- link> sa panghuli.css sa iyong markup
Binibigyan ka nito ng pinakamahusay na preprocessor syntax sa lahat ng mga plugin ng PostCSS na nais ng iyong puso.
Ngayon para sa mga cool na bagay. Karaniwang may paraan ang mga nagpoproseso upang mag-loop ng isang tinukoy na bilang ng beses habang nagbibigay ng isang iterator:
@para sa $ i mula 1 hanggang 3 {nilalaman: $ i; // nagbabalik ng nilalaman: 1; nilalaman: 2; nilalaman: 3; }
Sa kaunting kaalaman sa mga preprocessor, maaari mong simulan ang paggamit ng langgam sa talagang mga kagiliw-giliw na paraan ...
$ laki: 100px 1/2 1/2; $ gutter: 30px; $ haba: haba ($ laki); .column {margin-right: $ gutter; @para sa $ i mula 1 hanggang $ haba {&: nth-child (# {$ haba} n + # {$ i}) {lapad: laki ($ laki) makakuha ($ i) gutter ($ gutter); }} &: nth-child (# {$ haba} n + # {$ haba}) {margin-kanan: 0; }}
Ngayon ang aming hindi regular na laki ng mga haligi ay nakabalot sa mga bagong hilera nang walang karagdagang markup. Sige at mag-tinker sa paligid ng code na ito. Subukan ang iba't ibang laki, gutter, at pagdaragdag ng mga bagong sukat (tulad ng 100px auto 100px).
Ito ay isang pangkaraniwang pattern na may langgam, kaya't binalot ko ito sa isang pag-aari na gumagana rin sa vanilla CSS:
.grid {bumuo ng grid: laki (100px 1/2 1/2); / * Maaari kang pumasa ng mga karagdagang pagpipilian, ngunit ang pluck () ay hindi na kinakailangan. * /}
Maraming pagpipilian
ang nth grids ay mahusay kapag alam mo ang laki at bilang ng mga elemento na maipapasa, ngunit kung minsan nais mong lumikha ng isang lalagyan at magtapon lamang ng ilang mga random na laki ng mga elemento doon. Sa mga kasong ito, negatibong-margin grids ang iyong pinakamahusay na mapagpipilian. Pasado lang negatibong-margin sa langgam na tulad nito:
.grid {margin: 0 -15px; } .column {lapad: laki (1/3) makakuha (1) grid (negatibong-margin); margin: 0 15px; }
Konklusyon
Ang mga halimbawang ito ay isang maliit na sulyap lamang sa lahat ng mga cool na bagay na magagawa ng postcss-ant. Mayroon itong higit pang mga opsyonal na parameter at maraming mapaglarawang paghawak ng error, ngunit ang tunay na kapangyarihan ng langgam ay ikaw.
Ang mga tool na 'pipi' na simpleng pagbabalik ng kaunting data ay palaging ang pinakamahusay na mga tool, dahil ibinalik nila ang kapangyarihan sa mga kamay ng nag-develop. Iyon ang idinisenyo upang gawin ang postcss-ant. Kung naintriga ka, magtungo sa corysimmons.github.io/postcss-ant para sa ilang mga demo na nakakatunaw ng mukha at mga kaibig-ibig na dokumento.
Ang artikulong ito ay orihinal na na-publish sa isyu ng 286 ng net magazine, bilhin mo dito
