10 pinakamahusay na mga framework ng CSS sa 2020

Nilalaman

• 01. Bootstrap
• 02. Foundation
• 03. UIkit
• 04. Semantic UI
• 05. Bulma
• 06. Tailwind
• 07. Picnic CSS
• 08. PapelCSS
• 09. NES.css
• 10. Pag-agawin.css
• Kailangan ko ba ng isang framework ng CSS?

Naghahanap ng pinakamahusay na framework ng CSS? Ang gabay na ito ay narito upang makatulong. Sa tampok na ito, tutulungan ka naming maging pamilyar sa ilan sa mga pinaka-kawili-wili at malakas na magagamit na mga framework ng CSS. Ang ilan sa mga ito ay kilalang-kilalang, habang ang iba ay mga mas bagong tool na nagsisimula pa lamang makakuha ng singaw. Alinmang paraan, makikinabang ka nang malaki mula sa pagkakilala sa mga kapaki-pakinabang na tool na ito.

Bootstrap | Pundasyon | UIkit | Semantiko UI | Bulma | Tailwind | Picnic CSS | PapelCSS | NES.css | I-animate.css

Sisimulan namin ang mga bagay gamit ang ilang kilalang mga pangalan. Sa alinman sa mga balangkas na CSS ay kumpleto ka sa pagkakabuo ng malinis, napapanatili na mga proyekto na may kaunting pamumuhunan sa oras (kung nais mo ang isang bagay kahit na mas kaunting gugugol ng oras, buuin ang iyong susunod na site sa isang tagabuo ng website). Gayunpaman, kung minsan kailangan mo ng isang bagay na medyo mas tiyak. Para sa kadahilanang iyon, sa pagtatapos ng listahan makikita mo ang ilang mga aklatan at balangkas na mayroong napaka-tukoy na mga kaso ng paggamit.

Para sa higit pang inspirasyon ng CSS, tingnan ang aming pag-ikot ng mga nangungunang mga animasyon ng CSS at kung paano i-code ang mga ito. Dagdag pa, palaging sulit na tiyakin na nakuha mo ang pinakamahusay na pagpipilian sa pagho-host ng web para sa mga pangangailangan ng iyong site, at ang perpektong pag-iimbak din ng ulap.

01. Bootstrap

Magsimula tayo sa pinakatanyag na balangkas sa buong mundo. Habang ang Bootstrap ay tiyak na hindi eksklusibo isang balangkas ng CSS, ang pinakasikat na mga tampok ay ang mga batay sa CSS. Kasama rito ang isang malakas na grid system, mga badge, pindutan, mga sangkap ng card, navbars at marami pa. Mayroon ding isang buong pag-load ng mga libreng tema ng Bootstrap upang galugarin.

Kung hindi ka pamilyar sa kung paano gumagana ang isang balangkas tulad ng Bootstrap, makakatulong ang ilang mga halimbawa ng code, upang makita mo kung gaano kadali magtayo ng mga mapapanatili na interface sa pamamagitan ng pag-edit ng walang anuman kundi ang HTML.

Ang grid system ng Bootstrap ay isang magandang lugar upang magsimula. Ang Bootstrap grid ay naging isang mahalagang kalakal mula pa noong unang paglabas ng publiko ng balangkas noong 2011. At hindi nakakagulat - ito ay nakakatawang madaling gamitin. Sa sandaling isinama mo ang CSS ng Bootstrap, ang paglikha ng isang tumutugong flexbox-based na grid na gumagana sa lahat ng mga browser ay kasing simple nito:

div> div> div> Hanay 1 / div> div> Hanay 2 / div> div> Hanay 3 / div> / div> / div>

Tulad ng nabanggit, ipinagmamalaki din ng Bootstrap ang isang komprehensibong koleksyon ng mga bahagi ng UI. Ang ilan sa mga naging mahirap na istilo sa nakaraan ay plug-and-play lamang sa isang balangkas tulad ng Bootstrap. Kasama rito ang isang sangkap ng nabigasyon na breadcrumb, isang bahagi ng card at isang bahagi ng pagination. Narito ang HTML upang magpatupad ng pagination:

nav aria-label = "Halimbawa ng nabigasyon ng pahina"> ul> li> a href = "#"> Nakaraan / a> / li> li> a href = "#"> 1 / a> / li> li> a href = "#"> 2 / a> / li> li> a href = "#"> 3 / a> / li> li> a href = "#"> Susunod / a> / li> / ul> / nav>

Ang lahat ng mga sangkap na ito ay maaaring itayo nang hindi nagsusulat ng isang solong linya ng CSS. Sa maraming mga kaso, malamang na tema mo ang mga bahagi upang umangkop sa tatak ng proyekto. Anuman ang kaso, ang istrakturang pang-mobile ay malalagay na sa lugar, na ginagawang madali upang madaling maabot ang isang natapos na produkto sa oras ng pag-record. Nagsasama rin ang Bootstrap ng mga advanced na tampok para sa mga tumutugong layout, mga sangkap ng utility at itinayo ito sa Sass, kaya't sobrang nababaluktot at napapasadyang.

02. Foundation

Ang balangkas ng Foundation, tulad ng Bootstrap, ay naging napakapopular at kilala bilang isang mas sopistikadong balangkas na may ilang mga advanced ngunit madaling ipatupad na mga sangkap ng CSS. Ang pundasyon ay itinayo sa Sass kaya, tulad ng Bootstrap, napapasadyang ito. Bilang karagdagan sa na, ipinagmamalaki din nito ang ilang mga malakas na tumutugong tampok na nangangahulugang ang paggawa ng mga disenyo na pang-mobile ay napakadali.

Ang tumutugon na bahagi ng talahanayan ay isa sa aming mga paborito:

talahanayan>! - Pupunta dito ang code ng mga row row ... -> / table>

Gayundin, ang patayong timeline ay isang tampok sa layout na hindi mo nakikita sa maraming mga balangkas. Ginagamit ng sangkap na ito ang .timeline klase para sa lalagyan, na kung saan pagkatapos ay nagtataglay ng maramihang .timeline-item mga elemento na may isang icon at nilalaman para sa bawat item:

div> div> div> img src = "image.svg" alt = "Icon"> / div> div> p> 2019 / h2> p> Halimbawa ng teksto para sa timeline item./p> / div> / div>! - - Higit pang mga item sa timeline dito ... -> / div>

Ito ay isang maliit na sampling lamang ng maraming mga bahagi na ginagawang magagamit ang Foundation na isa sa pinakamahusay na mga balangkas ng CSS ngayon.

03. UIkit

Ang UIkit ay isa pang tanyag na balangkas ng frontend at marahil ay isang maliit na hindi pahalagahan sa mga tuntunin ng mga tampok sa CSS. Bilang karagdagan sa maraming mga tampok na katulad ng matatagpuan sa iba pang mga tanyag na balangkas, mayroong ilang mga kapaki-pakinabang na dalubhasang bahagi.

Una sa lahat, kung hindi ka pa rin komportable sa flexbox, maaari kang gumawa ng mga kumplikadong layout na batay sa flexbox sa UIkit gamit ang simpleng HTML. Maaaring mukhang kakaiba sa una na gumamit ng flexbox syntax sa iyong mga klase sa HTML ngunit nai-save ka nito mula sa pagkakaroon upang malaman ang lahat ng mga quirks tungkol sa pagbalot ng baluktot, mga haligi / hilera, lumaki at iba pa. Narito ang isang halimbawa:

div> div> Item 1 / div> div> Item 2 / div> div> Item 3 / div> div> Item 4 / div> div> Item 5 / div> div> Item 6 / div> / div>

Kasama sa UIkit ang dose-dosenang mga bahagi na nag-aalok ng mga kaakit-akit na mga istilo sa labas ng kahon. Marami sa mga tampok ay dalubhasa sa mga klase ng utility, kabilang ang mga sumusunod:

• .uk-align-left, .uk-align-kanan at .uk-align-center para sa mga nakahanay o lumulutang na elemento
• .uk-haligi-1-2 hanggang .uk-haligi-1-6 para sa mga multi-haligi, layout ng teksto na istilo ng magazine
• .uk-radio, .uk-checkbox at katulad para sa mga kaakit-akit na input ng form
• Iba't ibang mga klase ng margin at padding utility (.uk-margin-top, .uk-padding-maliit atbp.)
• Iba't ibang mga klase ng utility upang medyo iposisyon ang isang elemento sa loob ng isang lalagyan (.uk-posisyon-tuktok, .uk-posisyon-kaliwa atbp.)

Sulit na subukan ang UIkit kung nais mo ng isang sariwa, maayos na balangkas ng CSS na may isang pagpipilian ng mga pagpipilian sa sangkap. Magagamit ito sa Less at Sass at nagsasama pa ng isang styleheet upang magsilbi para sa mga wikang kanan at kaliwa.

04. Semantic UI

Ang Semantic UI ay may maraming mga overlap na tampok sa iba pang mga tanyag na balangkas ngunit ang paraan ng paggana nito (ipinahiwatig ng pangalan) ay batay sa semantiko na katangian ng mga pangalan ng klase na ginagamit upang bumuo ng mga sangkap. Sa madaling salita, ang mga pangalan ng klase ay palakaibigan sa tao.

Tingnan, halimbawa, sa kung paano mo bubuo ng isang apat na haligi na grid:

div> div> / div> div> / div> div> / div> div> / div> / div>

Pansinin ang paraan ng pakikipag-usap ng mga pangalan ng klase nang eksakto kung ano ang itinayo. Ang CSS ay hindi kinakailangang magkaroon ng isang natatanging hanay ng mga estilo para sa bawat isa sa mga klase na nakalista ngunit sa halip ay gumagana ang mga klase. Kaya, katulad ng wika kung saan ang mga salita ay may katuturan sa konteksto, ang mga pangalan ng klase ay nagtutulungan upang makabuo ng mga cohesive, mobile-friendly na mga bahagi.

Narito ang isa pang halimbawa, na bumubuo ng isang simpleng talahanayan ng data:

mesa>! - ... natitirang code ng talahanayan dito ... -> / talahanayan>

Ito ay isang mahusay na pagpapakita kung paano gumagamit ng mga pangalan ng klase ang Semantic UI upang ilarawan ang itinatayong sangkap. Kung mas sanay ka sa mga tradisyunal na balangkas tulad ng Bootstrap o Foundation, ang kurba sa pag-aaral sa isang ito ay maaaring maging mas matarik. Ngunit sa sandaling makuha mo ito, medyo malakas at kasiya-siya itong gamitin.

05. Bulma

Ang Bulma ay isa pang tanyag na balangkas ng CSS at ang pangunahing tampok nito ay ang katunayan na ang mga bahagi nito ay higit na nakasalalay sa flexbox, ginagawa itong isang tunay na modernong balangkas. Maaari mong isipin ang Bulma ay medyo tulad ng isang hybrid ng Bootstrap at Semantic UI ngunit walang anumang pagiging kumplikado. Gumagamit ito ng ilan sa parehong mga prinsipyo tulad ng Semantic UI na may mga pangalan ng klase, kasama ang marami sa mga tanyag na sangkap, ngunit pinapanatili itong simple - halimbawa, ang mga elemento ng form ay wala sa mga istilo upang mapanatili ang isang hitsura ng cross-browser.

Ipinapakita ng sumusunod na halimbawa kung paano maitatayo ang isang bahagi ng Bulma at madaling mapanatili:

seksyon> div> div> h1> Halimbawa ng Pag-heading / h1> h2> Halimbawa ng teksto ay pupunta dito / h2> p> Ilang halimbawa ng teksto ng talata dito./p> / div> / div> / seksyon>

Pansinin ang nilalaman seksyon> elemento ay binibigyan ng bayani at ay-madilim mga klase. Ipinapahiwatig nito na nais mo ang isang bayani na banner na gumagamit ng default madilim na tema (isa sa pitong mga kulay ng tema na kasama ang Bulma, na lahat ay maaaring mabago sa pamamagitan ng mga variable ng Sass).

Gayundin, pansinin ang ay - * mga klase sa lalagyan at pangunahing heading. Ang ay-likido Pinapayagan ng klase ang lalagyan na maging likido sa anumang laki ng screen, na nakasentro sa mga margin at walang max-lapad. Nang walang halagang ito, ang max-lapad ng mga pagbabago ng container depende sa laki ng viewport. Ang ay-laki-2 Tinutukoy ng klase ang laki ng heading, na may sukat na mula 1 hanggang 7.

Tulad ng nakikita mo, ginagawang madali ng Bulma ang hindi madaling kilalang mga interface ng mobile-friendly sa pamamagitan ng nababasa na mga pangalan ng klase.

06. Tailwind

Maraming mga modernong balangkas ng CSS ang sinasamantala ang isang kamakailang kalakaran sa pagbuo ng mga interface ng gumagamit: ang paggamit ng mga solong layunin na mga klase ng utility na kilala rin bilang Atomic CSS (tingnan ang kasamang kahon). Ang Tailwind ay isang tulad ng balangkas. Ang ideya sa likod ng Tailwind ay sa halip na magsimula sa mga pre-istilong mga sangkap ng cookie-cutter, binubuo mo ang lahat mula sa lupa gamit ang mga klase ng utility.

Ang kurba sa pag-aaral ay tiyak na mas mataas sa isang ito, lalo na kung ang Atomic CSS ay bago sa iyo. Ngunit sa Tailwind, maiiwasan ang mga isyu sa pagiging tiyak at iba pang mga sobrang labis na problema na karaniwang sa mga malalaking style.

Bilang isang halimbawa, ang Tailwind ay hindi nagsasama ng anumang uri ng sangkap na ‘button’.Ngunit maaari kang bumuo ng iyong sariling pindutan gamit ang isang bagay tulad ng sumusunod:

pindutan> Button / pindutan>

Mula doon, kung magpapasya ka kung ano ang nilikha mo ay isang wastong sangkap para sa muling paggamit, magagawa mo iyon sa pamamagitan ng tampok na pagkuha ng sangkap ng Tailwind. Kaya't ang isang sangkap tulad ng pindutang ipinakita sa nakaraang pag-block ng code ay maaaring maisama tulad nito:

button> Button / button> style> .btn {@apply font-bold py-2 px-4 bilugan; } .btn-blue {@apply bg-blue-500 text-white; } / style>

Tulad ng nakikita mo, ang kurba sa pag-aaral para sa Tailwind ay medyo mataas. Hindi lamang kailangan mong maging bihasa sa mga istilo ng unang paggamit ngunit inirerekumenda rin na gumamit ng sangkap na pagkuha, tapos na gamit ang Tailwind's @apply direktiba - na kung saan ay isa lamang paraan upang gumawa ng pagkuha; tingnan ang dokumentasyon nito para sa higit pa.

07. Picnic CSS

Kung hindi mo gusto ang ideya ng pagsasama ng mga klase sa pagpapakita sa iyong markup, na karaniwan sa karamihan, kung hindi lahat, ng mga sikat na balangkas, kung gayon ang Picnic CSS ay maaaring ang balangkas para sa iyo. Ang Picnic ay sa maraming paraan kabaligtaran ng Tailwind na hindi lamang ito gaanong kumplikado ngunit napaka-opinion.

Halimbawa, ang ilang mga elemento ng HTML ay paunang istilo nang hindi na kailangang magdagdag ng mga pangalan ng klase. Kasama rito pindutan>, hindi pinagana ang pindutan>, mesa>, uri ng pag-input = "checkbox"> at uri ng pag-input = "radio"> (ang huli na dalawa na mayroon ding isang magandang maliit na animated na check / alisan ng check ang mga pagkilos).

Bilang karagdagan sa isang bilang ng mga mayroon nang mga default na istilo sa maraming mga elemento ng HTML, ang Picnic ay may ilang iba pang mahusay na idinisenyo na interactive na mga bahagi ng purong-CSS na hindi nangangailangan ng anumang JavaScript. Kasama rito ang isang modal dialog, isang tab switch, isang uploader ng file at isang tooltip. Ang ilan sa mga ito ay maaaring mapahusay sa pamamagitan ng pag-script ngunit lahat sila ay gumagana gamit ang CSS lamang.

08. PapelCSS

Nakakakuha kami ng mas maraming mga pagpipilian sa specialty sa aming listahan ng mga pinakamahusay na balangkas ng CSS dito. Hindi ito ang iyong magiging tool sa go-to CSS ngunit isa ito sa mga quirkiest na balangkas doon. Siningil ang PaperCSS bilang "hindi gaanong pormal na balangkas ng CSS". Ang mga sangkap ay may guhit, kagaya ng cartoon na hitsura. Maaaring isama ang mga kaso sa paggamit ng isang website para sa mga bata, isang blog, isang laro o isang comic strip.

Nagsasama ang PaperCSS ng isang grid ng flexbox, mga badge, pindutan, kard at ilang interactive na purong mga bahagi ng CSS. Binibigyan ka ng kasamang imahe ng isang lasa ng kung ano ang gumagawa ng natatanging balangkas na ito.

09. NES.css

Tulad ng PaperCSS, ang NES.css ay may natatanging hanay ng mga estilo na angkop para lamang sa isang makitid na hanay ng mga proyekto. Ginagaya nito ang 8-bit na graphics ng Nintendo Entertainment System, na lumilikha ng hitsura ng retro na paglalaro.

Bilang karagdagan sa mga karaniwang bahagi na matatagpuan sa iba pang mga balangkas, ang NES.css ay nagsasama rin ng mga istilo para sa mga lobo ng komento, mga icon ng reaksyon, kasama ang mga natatanging lalagyan na may mga hangganan. Nasa ibaba ang code para sa isang pares ng mga lobo ng komento. Ipinapakita ng kasamang imahe kung paano sila tumingin kasama ang isang pares ng maraming mga icon (na binuo sa pamamagitan ng mga anino ng CSS) na kasama ng balangkas.

div> p> Komento ng Balloon Halimbawa / p> / div> div> p> Isa pang halimbawa ng lobo ng komento na may kaunting teksto pa ./p> / div>

Kung gusto mo ito, tingnan ang PSone.css.

10. Pag-agawin.css

Mayroong maraming mga aklatan na higit pa o mas kaunti ang gumagawa ng parehong bagay: magdagdag ng isa o higit pang mga animasyon sa isang tinukoy na elemento. Ang kauna-unahang naturang silid-aklatan na nakakuha ng katanyagan sa mga nagdaang taon ay ang Dan Eden's Animate.css. Naglalaman ang kasiya-siyang silid-aklatan ng dose-dosenang mga pre-built na mga animasyon na nanginginig, kumupas, slide, mag-zoom at marami pa.

Mayroong ilang iba pang katulad na mga silid-aklatan na nag-aalok ng mga alternatibong mga animasyon sa mga gumagamit, kabilang ang Woah.css, na mayroong ilang hindi maikakaila na mga offbeat na animasyon na marahil ay hindi ayon sa gusto ng lahat. Mayroon ding Vivify, na mayroong higit pang mga natatanging mga pagpipilian sa animasyon at ibang-iba sa Animate.css. Ang isa pang mahusay na pagpipilian upang tuklasin ay ang CSSFX, isang bagong proyekto na may higit pang mga pagpipilian para sa mga animasyon na istilong plug-and-play.

Panghuli, kung nangangaso ka para sa mga animated na tagapagpahiwatig ng paglo-load, baka gusto mong suriin ang Mga Epic Spinner, na nagtatampok ng ilang natatanging mga animated na graphic na CSS lamang.

Kailangan ko ba ng isang framework ng CSS?

Hindi bihira na marinig ang mga tao na bash CSS. Sa pagtuon nito sa kaskad, pandaigdigang istilo at mga kabobohan ng mga layout nito, naakit nito ang patas na galit mula sa mga nabigong developer. Para sa mga taong ito, ang mga framework at aklatan ng CSS na nagbabago ng vanilla code upang gawing mas madaling maunawaan ay isang ganap na pagkadiyos. Samantala, para sa ilang mga CSS purist, ang mga balangkas ay nagdaragdag lamang ng isang layer ng abstraction sa isang bagay na hindi nangangailangan ng adorno.

Ang alinman sa panig ay tama o mali. Mayroong mahusay na halaga sa pag-unawa sa pangunahing wika (lalo na ang ilan sa mga bagong tampok tulad ng flexbox at Grid Layout) ngunit mayroon ding mahusay na halaga sa kakayahang bumuo ng isang bagay nang mabilis na nasusukat at napapanatili. Doon maaaring makatulong ang mga framework at library ng CSS.

Maaaring gusto mo ng pagsulat ng iyong CSS mula sa simula. Ngunit sa mga madaling gamiting, nababaluktot at madaling ibagay na mga balangkas at aklatan tulad ng tinalakay sa tampok na ito, maaari kang bumuo ng mga interactive at mapanatili na mga UI para sa iyong app sa kaunting oras.

Palagi naming hinihikayat ang mga developer na patuloy na matuto at magsulat ng vanilla CSS. Walang kapalit niyan. Ngunit kung kailangan mong bumuo o mag-prototype ng isang bagong layout o disenyo sa isang masikip na deadline, ang paggamit ng isa sa pinakamahusay na mga balangkas ng CSS ay maaaring maging isang malaking booster ng pagiging produktibo.

Kung nais mong malaman ang pinakabagong mga kasanayan sa malikhain at praktikal upang madala ang iyong karera sa susunod na antas, pagkatapos ay sumali sa amin sa Bumuo ng CSS ng aming kumperensya para sa mga web designer at developer. Alamin ang higit pa sawww.generateconf.com. Gumamit ng espesyal na code ng alok WEBDESIGNER2 para sa isang 10% na diskwento sa mga tiket!

Ang artikulong ito ay orihinal na na-publish sa neto, ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer. Bumili isyu 321 o mag-subscribe.