Eyona CSS Frameworks: yintoni na, isetyenziswa njani kwaye ukhethe eziphi

Ngaba uyafuna ukwenza amaphepha ewebhu ngoyilo lobuchwephesha, oluphendulayo nolunomtsalane? Ngaba ungathanda ukugcina ixesha kunye nomzamo kwi uphuhliso lwangaphambili yeeprojekthi zakho? Ngoko ke kufuneka usebenzise a Isakhelo seCSS. Isakhelo se-CSS sisixhobo esikunika uluhlu lwemithetho echazwe kwangaphambili, amacandelo, kunye nezixhobo zesimbo onokuzisebenzisa kwizinto zakho. HTML. Ngesakhelo se-CSS unokwenza amaphepha ewebhu kunye nesakhiwo esingaguqukiyo nesiphuculweyo, uyilo kunye nokusebenza.

Kweli nqaku, ndiza kucacisa ukuba zeziphi izikhokelo zeCSS, zisebenza njani, kwaye zeziphi iingenelo abanazo. Ukongeza, ndiza kukubonisa ukhetho lwe amaphepha angcono oku onokuyifumana kwimarike, eneempawu zayo, iingenelo kunye nokungalungi. Ulungile, seta, qhubeka!

Ngokunzulu, yintoni abayiyo kunye nento abayiyo

Izikhokelo zeCSS zixhobo ezo ukuququzelela umsebenzi woyilo lwewebhu ngokukunika isiseko sekhowudi onokusisebenzisa, ulungise, kwaye wandise ukuze ulungele iimfuno zakho. Izikhokelo zeCSS zenziwe ngamacandelo amabini aphambili:

• Igridi okanye inkqubo yegridi: Sisakhiwo esahlula iphepha lewebhu kwimiqolo kunye neekholamu ezenza iiseli apho izinto zibekwe khona. inkqubo yegridi ikuvumela ukuba wenze uyilo oluphendulayo eziqhelanisa nobungakanani kunye nokuqhelaniswa kwesikrini.
• Uilayibrari yecandelo: Yingqokelela yezinto ezicwangcisiweyo zoyilo ezinokuthi zisetyenziswe ngokuthe ngqo okanye zenziwe ngokwezifiso. Amacandelo anokuba ngamaqhosha, iimenyu, iifom, iitafile, amakhadi, njl.

Ukusebenzisa isakhelo seCSS kufuneka wenze nje yikhuphele okanye uyidibanise newebhusayithi yakho kwaye iquka iiklasi okanye izichazi ezihambelana neempawu zeHTML ofuna ukuzibhala. Ungasebenzisa kwakhona i-preprocessor efana ne-SASS okanye i-LESS ukulungisa izinto eziguquguqukayo zesakhelo ukuze zilungele incasa yakho.

Zeziphi iingenelo zesakhelo seCSS?

Izikhokelo zeCSS zineenzuzo ezininzi ezenza zibe luncedo kakhulu kuphuhliso lwewebhu. Ezinye zezi zibonelelo zezi:

• Zikongela ixesha kunye nomsebenzi ngokuphepha ukubhala ikhowudi yeCSS ukusuka ekuqaleni okanye ukuyiphinda kwiphepha ngalinye. Ngesakhelo seCSS kufuneka usebenzise nje iiklasi okanye izichazi kunikezelwe ngesakhelo kwaye uzisebenzise kwizinto zakho zeHTML. Ngoko unokwenza amaphepha ewebhu ngoyilo oluhambelanayo nolufanayo ngaphandle kokukhathazeka malunga neenkcukacha zobugcisa.
• Baqinisekisa uyilo lobungcali, iyahambelana kwaye iyahambelana nemigangatho yewebhu kunye neziphequluli ezahlukeneyo. Izikhokelo zeCSS ziyilwe ziingcaphephe ezilandela ezona zenzo zilungileyo kunye neendlela zakutsha zoyilo lwewebhu. Kwakhona, izikhokelo zeCSS ziyavavanywa kwaye zenziwa zibe ngconos ukusebenza ngokuchanekileyo kwiibhrawuza ezidumileyo nakwizixhobo ezahlukeneyo kunye nezigqibo.
• Bakunika iintlobo ngeentlobo zeenketho kunye nezinto ezinokwenzeka ngokukwazi ukukhetha phakathi kwezakhelo ezahlukeneyo ngokuxhomekeke kuhlobo, ubungakanani kunye nobunzima beprojekthi. zikhona Izikhokelo zeCSS zazo zonke izinto ezithandwayo kunye neemfuno, ukusuka kweyona ilula kwaye ilula ukuya kweyona ipheleleyo kwaye inamandla. Unokukhetha isakhelo esilungele iprojekthi yakho ngokusekwe kwisitayile, ukusebenza, kunye nokwenza ngokwezifiso ofuna ukukufeza.

Pivotdiagram

Pivotdiagram sesinye sesakhelo esidumileyo nesisebenzayo kwimarike. Yaphuhliswa ngu-Twitter kwaye yakhululwa kuluntu ngo-2011. Ngaphakathi kwayo iquka HTML, SASS kunye neJavaScript ukuyibonelela ngemisebenzi enomdla kakhulu kunye namalungu.

Ezinye zezibonelelo zeBootstrap zezi:

• Kuyinto kakhulu kulula ukuyisebenzisa kwaye uqwalasele.
• Ine a umgangatho omkhulu kunye neentlobo ezahlukeneyo uyila kwaye usike.
• Ine a ukuhambelana okubanzi ngezinto ezahlukeneyo kunye neefomathi.
• Ine a Uluhlu olubanzi lweenketho kunye nemisebenzi ukwenza uyilo lwakho.

Ezinye zezinto ezingeloncedo zeBootstrap zezi:

• Ifuna uqhagamshelo lwe-intanethi ukufikelela kwisoftware kunye nethala leencwadi.
• Isoftware inokucotha okanye engazinzanga kwezinye izixhobo.
• Iimathiriyeli zoqobo zinokubiza noko.

Khangela

Khangela sisikhokelo sale mihla kwaye sikhaphukhaphu esekwe kwiFlexbox. Yenziwe ngo-2016 nguJeremy Thomas, umphuhlisi waseFransi. Uphawu lwayo oluphambili kukuba ziquka kuphela CSS, ngaphandle kweJavaScript okanye ukuxhomekeka kwangaphandle.

Ezinye zezinto eziluncedo eBulma zezi:

• Ikhawuleza kakhulu kwaye kulula ukusebenzisa.
• Ine a uyilo olucocekileyo, i-minimalist kunye nenhle.
• Ine a amaxwebhu alungileyo kunye noluntu.
• Ine a ukuhambelana okuhle ngezikhangeli ezahlukeneyo kunye nezixhobo.

Ezinye zezinto eziphantsi kweBulma zezi:

• Uye amacandelo ambalwa kunye nokusebenzas kunezinye iinkqubo-sikhokelo.
• Uye iitemplates ezimbalwa kunye nezibonelelo ekhoyo kunezinye iinkqubo-sikhokelo.
• Uye ukwenza okuncinci kunye nokuguquguquka kunezinye iinkqubo-sikhokelo.

I-Tailwind CSS

I-Tailwind CSS sisikhokelo esitsha nesinokwenziwa ngokwezifiso esekwe kwiiklasi eziluncedo. Yenziwe ngo-2017 nguAdam Wathan, umphuhlisi waseCanada. Uphawu lwayo oluphambili kukuba ikuvumela yenza amacandelo akho kunye nezimbo ngaphandle kokubhala ngaphezulu ezo zimiselweyo.

Ezinye zezibonelelo ze-Tailwind CSS zezi:

• Inamandla kakhulu kwaye ibhetyebhetye ukwenza uyilo olulodwa kunye noqobo.
• Inenkqubo yegridi kunye nesithuba esicacileyo nesisebenzayo.
• Ine a ukudibanisa okulungileyo kunye nezixhobo njenge SASS, PostCSS okanye PurgeCSS.
• Ine a amaxwebhu alungileyo kunye noluntu.

Ezinye zezinto ezingeloncedo kwi-Tailwind CSS zezi:

• Ine a imfundo ephakamileyo kunezinye zesimbo sakhe.
• Ine a ixesha elide, ikhowudi ephinda-phindayo kunezinye iinkqubo-sikhokelo.
• Ine a ukuhambelana okulinganiselweyo ngezinye iibhrawuza ezindala.

Yila ngeyona nto ingcono kuphela

Kweli nqaku ndikucacisele ukuba yintoni na Izikhokelo zeCSS, basebenza njani kwaye zeziphi iingenelo abanazo. Ndikubonise ukhetho lwezona zibalaseleyo onokuzisebenzisa kwiiprojekthi zakho zewebhu: I-Bootstrap, iBulma kunye neTailwind CSS. Ezi zicwangciso zikuvumela ukuba wenze amaphepha ewebhu ngoyilo lobuchwephesha, ophendulayo kunye nonomtsalane.

Siyathemba ukuba eli nqaku libe luncedo kuwe kwaye uyakhuthazwa ukuba uzame izikhokelo zeCSS kwiiprojekthi zakho zewebhu. Siqinisekile ukuba uya kufezekisa iziphumo zobungcali eziya kwanelisa abaphulaphuli bakho namaphepha akho Web. Izikhokelo zeCSS zinezixhobo ezininzi kwaye ziyonwabisa ezikuvumela ukuba wenze ezinye iiprojekthi ezininzi ezifana imizobo, i-infographics, iilogo, njl. Ngoku ekuphela kwento eseleyo kukuthatha inyathelo kwaye uqalise ukuyila. Masihambe!