Përdorur nga 96.2 përqind e të gjitha faqeve të internetit, Cascading Style Sheets (CSS) është një gjuhë jashtëzakonisht popullore. Sidoqoftë, kodimi i një faqe interneti ose aplikimi nga e para mund të ndihet sikur po rishpikni timonin, kur vërtet duhet të përqendroheni në atë që e bën projektin tuaj unik.

Për fat të mirë, nuk ka mungesë të kornizave CSS (ang. CSS Framework) që mund të përshpejtojnë procesin e dizajnimit dhe zhvillimit. Duke zgjedhur një framework, ju mund të krijoni kod të standardizuar, me cilësi më të lartë, me më pak kohë dhe telashe.

Në këtë postim, ne do të diskutojmë se cilat janë kornizat CSS dhe pse mund të mendoni të përdorni një për projektin tuaj të ardhshëm. Më pas do të ndajmë këshilla se si të gjeni kornizën e duhur për ju, përpara se të eksploroni pesë korniza të njohura CSS. Le të fillojmë!

Një hyrje në CSS Framework

CSS (Cascading Style Sheets) kontrollon paraqitjen e një dokumenti që është shkruar në një markup gjuhë si HTML. Ndryshe nga disa gjuhë të tjera, CSS krijon një ndarje midis prezantimit dhe përmbajtjes. Kjo ju jep më shumë fleksibilitet në mënyrën se si e shfaqni përmbajtjen tuaj.

Kjo gjuhë gjithashtu promovon ripërdorimin e kodit, pasi shumë faqe mund të përdorin formatimin e përcaktuar në një skedar të vetëm CSS. Kjo mund të zvogëlojë kompleksitetin dhe përsëritjen, duke përmirësuar gjithashtu performancën e projektit tuaj, si për shembull duke reduktuar kohën e ngarkimit të faqes tuaj të internetit.

Shumë sisteme të ndryshme përdorin CSS. Kjo përfshin temat e WordPress, e cila përdor CSS për të nxjerrë të dhënat e krijuara nga ky sistem popullor i menaxhimit të përmbajtjes (CMS). Çdo temë WordPress përmban një skedar të vetëm style.css:

Edhe pse mund të shkruani CSS të pastër, shumë dizajner dhe zhvillues zgjedhin të përdorin një kornizë CSS. Ky është një koleksion i stylesheets që ofrojnë një strukturë bazë dhe klasa për elementët e zakonshëm.

Ju mund t’i përdorni këto stylesheets të përgatitura paraprakisht si referencë për zgjidhjen e problemeve të një natyre të ngjashme. Përndryshe, mund të anashkaloni funksionalitetin e përgjithshëm të kornizës për rastin tuaj të përdorimit specifik.

Mund të ketë njëfarë konfuzioni se kur duhet përdorur një kornizë dhe kur ka më shumë kuptim të zgjedhësh një librari. Me libraritë, ju kontrolloni kur kjo teknologji kryen një funksion të caktuar. Pjesa tjetër e kodit tuaj ekziston e pavarur nga ajo librari. Sidoqoftë, me kornizat CSS, rrjedha e kontrollit është në kornizë dhe ju do ta personalizoni atë në vende që t’i përshtaten më mirë projektit tuaj.

Si të zgjidhni kornizën e duhur CSS

Për të filluar, korniza juaj e zgjedhur duhet të plotësojë të gjitha kërkesat teknike të projektit tuaj. Është gjithashtu e zgjuar të kërkoni karakteristika që e bëjnë këtë kornizë të përshtatshme për projektin tuaj. Për shembull, një kornizë e lehtë mund të jetë shtesa perfekte për një dizajn të fokusuar në celular, por mund të jetë më pak ideal për një aplikacion të madh e të ndërlikuar.

Me kalimin e kohës, kërkesat e projektit tuaj ka të ngjarë të ndryshojnë. Edhe pse është e pamundur të parashikohet e ardhmja, gjithmonë ia vlen të merret parasysh se si mund të zhvillohet projekti juaj në planin afatgjatë. Korniza juaj e zgjedhur CSS duhet të jetë në gjendje të mbështesë faqen ose aplikacionin tuaj ndërsa zhvillohet me muaj, dhe potencialisht edhe vite.

Kur zgjidhni ndonjë teknologji, është gjithmonë e zgjuar të keni parasysh lehtësinë e përdorimit të saj. Edhe nëse jeni të familjarizuar në CSS, të mësuarit e çdo teknologjie të re kërkon një investim të madh paraprak. Çdo moment që kaloni duke u njohur me kornizën tuaj të re është koha që mund ta kishit investuar drejtpërdrejt në projektin tuaj.

Në mënyrë ideale, ekipi juaj i zgjedhur do të jetë intuitiv, miqësor për përdoruesit dhe do të ketë një kurbë të butë mësimi. Kjo do të minimizojë kohën ndërmjet instalimit të kornizës dhe fillimit të korrjes së përfitimeve. Nëse një kornizë është miqësore për përdoruesit, atëherë ka shumë më pak gjasa të hasni probleme madhore, duke përfshirë pengesa që kërkojnë nga ju të ndaloni zhvillimin në mënyrë që të hulumtoni problemin.

Kur merret parasysh lehtësia e përdorimit, është e rëndësishme të zbuloni se çfarë mbështetje është e disponueshme. Në mënyrë ideale, korniza do të mbështetet nga dokumentacion zyrtar, mësime dhe ndoshta edhe mbështetje profesionale.

Ju gjithashtu duhet të merrni parasysh nivelin e resurseve të disponueshme të komunitetit, duke përfshirë bloget e palëve të treta, forumet dhe faqet e mediave sociale. Një komunitet aktiv mund të jetë një resurs i çmuar i mbështetjes shtesë. Ju madje mund t’i bëni pyetjet tuaja drejtpërdrejt komunitetit përmes kanaleve të tilla si Stack Overflow.

5 korniza të njohura CSS (dhe kur t’i përdorni ato)

Me kaq shumë korniza CSS për të zgjedhur, zgjedhja e vetëm një nuk është gjithmonë e lehtë. Kjo është arsyeja pse ne kemi përpiluar këtë listë të pesë kornizave më të njohura CSS. Gjatë rrugës, ne do t’ju ndihmojmë të merrni vendimin e duhur, duke sugjeruar llojin e projekteve për të cilat çdo kornizë është e përsosur.

1. Bootstrap

Fillimisht i quajtur Twitter Blueprint dhe i zhvilluar si një mjet për ekipet e brendshme, Bootstrap që atëherë është rritur në një nga kornizat më të njohura të CSS. Sot, Bootstrap përdoret nga rreth 22 përqind e të gjitha faqeve të internetit dhe GitHub i tij përbëhet nga mbi 20,000 angazhime nga më shumë se 2000 kontribues.

Për të filluar, mund të shkarkoni skedarët burimor Sass dhe JavaScript të Bootstrap nga Composer, Meteor ose Node Package Manager (npm). Ju gjithashtu mund të përdorni depon e shabllonit npm për të gjeneruar shpejt një projekt Bootstrap, ose të shikoni ndonjë nga shembujt zyrtarë, që mbështeten nga dokumentacion i gjerë.

E gjithë kjo e bën Bootstrap një zgjedhje të shkëlqyeshme për këdo që është i ri në kornizat CSS, ose ka përvojë të kufizuar të CSS. Kjo mund të përfshijë zhvilluesit e fundit që duan të bëjnë disa ndryshime në Ndërfaqen e Përdoruesit (UI) të projekteve të tyre. Për këta projektues, Bootstrap ofron shabllone për të gjithë komponentët më të njohur të ndërfaqes së përdoruesit, duke përfshirë alerts, tabs, forms, dhe dropdowns.

Bootstrap është projektuar gjithashtu për zhvillim responsiv dhe të përparuar në celular. Kjo e bën atë një përshtatje të mirë për projektet celulare.

Nëse keni nevojë për mbështetje shtesë, Bootstrap ka një komunitet të madh dhe aktiv në Stack Overflow. Ju gjithashtu mund të aksesoni mbështetjen në kohë reale përmes kanalit Bootstrap Slack.

2. Foundation

Foundation është një front-end framework për ndërtimin e faqeve të internetit, aplikacioneve dhe emaileve. Falë përpiluesit të tij Sass, korniza responsive e Foundation është ideale për krijimin e shpejtë të projekteve.

Foundation favorizon kodin e pastër, semantik dhe merr një qasje primare në celular. Pasi të siguroheni që projekti juaj është plotësisht i pajtueshëm me pajisjet celulare, mund të shtoni më shumë kompleksitet për një dizajn plotësisht responsiv.

Foundation ofron HTML, CSS dhe JavaScript, i cili është i shkëlqyeshëm për prototipimin e shpejtë të faqeve të internetit. Nëse jeni duke përdorur Foundation për të krijuar emaile, kjo kornizë ofron modele të testuara që funksionojnë me të gjithë klientët kryesorë të postës elektronike, duke përfshirë Outlook. Kjo mund t’ju ndihmojë të krijoni emaile që shfaqen dhe funksionojnë siç duhet, pavarësisht se si marrësit zgjedhin t’i qasen.

Pavarësisht shpejtësisë së tij, Foundation është larg nga një kornizë e kufizuar dhe shumë zhvillues e përdorin atë për të krijuar aplikacione të mëdha. Është gjithashtu shumë i personalizueshëm, gjë që e bën Foundation një zgjedhje të mirë për dizajnerët që duan të krijojnë një përvojë unike për përdoruesit e tyre fundorë dhe që nuk kanë frikë të gërmojnë në veçoritë më komplekse të Foundation për të arritur rezultatin e dëshiruar.

3. Skeleton

Korniza Skeleton është një koleksion i vogël skedarësh CSS që mund t’i përdorni për të gjeneruar me shpejtësi kod të pastër dhe paraqitje të thjeshta. Me nën 400 rreshta kodi, kjo kornizë e thjeshtë është një përshtatje e mirë për projekte më të vogla.

Si një kornizë e lehtë, Skeleton nuk duhet t’i shtojë ngarkesë të panevojshme projektit tuaj, gjë që mund të jetë veçanërisht e vlefshme për dizajnet mobile. Nëse po krijoni një projekt celular, Skeleton ka një rrjet të strukturuar mirë që ju mundëson të krijoni një plan responsiv me telashe minimale.

Skeleton siguron një grid fluid me 12 kolona me një gjerësi maksimale prej 960 px. Ky grid tkurret sipas shfletuesit dhe pajisjes. Sidoqoftë, nëse keni nevojë të ndryshoni gjerësinë maksimale, mund ta bëni atë ndryshim me një rresht të vetëm të CSS.

Nëse jeni i ri në botën e kornizave CSS, qasja e thjeshtuar e Skeleton e bën këtë një kornizë të mirë për fillestarët. Për të sapoardhurit në CSS, ai madje mund të jetë një mjet i vlefshëm mësimi përpara se të përparojë në korniza më komplekse dhe të pasura me karakteristika.

Ndryshe nga disa prej kornizave të tjera CSS në këtë listë, Skeleton është projektuar si një pikënisje që mund ta zhvilloni në diçka më thelbësore. Vlen gjithashtu të përmendet se mungesa e shablloneve të Skeleton mund të bëhet problem nëse përpiqeni ta përdorni këtë kornizë në projekte më të mëdha ose më komplekse.

4. UIKit

UIKit është një kornizë CSS responsiv dhe i lehtë që mund ta përdorni për të krijuar ndërfaqe të pastra dhe me pamje profesionale. Kjo kornizë përcakton të gjithë komponentët kryesorë si pamjet e tabelave, butonat dhe kontrollorët e navigimit.

UIKit është gjithashtu i zgjerueshëm dhe mbështet një koleksion gjithëpërfshirës të komponentëve të avancuar që nuk janë të bashkuara me kornizën bazë. Kjo përfshin parallax girds, dynamic pagination, dhe sliders.

Krahas skedarëve CSS, UIKit ofron një paketë të plotësimit automatik për redaktorët Sublime Text dhe Atom. Meqenëse përdoruesit nuk duhet të kërkojnë në mënyrë të përsëritur shenjat dhe emrat e klasave të UIKit, kjo kornizë është e mrekullueshme për produktivitetin tuaj të përgjithshëm.

Ndryshe nga kornizat e tjera si Bootstrap dhe Foundation, UIKit e ndan paraqitjen në tre komponentë: grid, flex dhe width. Në vend që t’ju kufizojë në një konfigurim grid me 12 kolona, ​​UIKit ju jep fleksibilitetin për të krijuar sa më shumë kolona që dëshironi.

Në faqen e internetit të UIKit, do të gjeni dokumentacion të gjerë zyrtar dhe një seri mësimesh video. Pavarësisht nga këto resurse të dobishme mësimore, ne zbulojmë se UIKit është një kornizë më komplekse që është më e përshtatshme për zhvilluesit me përvojë.

5. Semantic UI

Semantic UI është një kornizë për krijimin e paraqitjeve responsive. Bazuar në parimet e gjuhës natyrore, UI Semantic synon ta bëjë kodin të lexueshëm dhe më të lehtë për t’u kuptuar duke krijuar një fjalor të përbashkët rreth UI.

Për ta arritur këtë, UI Semantic i trajton fjalët dhe klasat si koncepte të këmbyeshme. Të gjitha klasat janë fjalë njerëzore dhe përdorin sintaksë nga gjuhët natyrore, duke përfshirë marrëdhëniet emërore/modifikuese dhe renditjen e fjalëve. Ndërfaqja semantike përdor gjithashtu pluralitetin për të lidhur konceptet në mënyrë intuitive. Si rezultat, kodi i tij shpesh i ngjan tekstit të rregullt.

Kodi i lexueshëm nga njeriu dhe lehtësia e përdorimit e bëjnë UI Semantic një zgjedhje të shkëlqyer për këdo që është i ri në botën e kornizave. Nëse keni përvojë të mëparshme, vlen të përmendet se UI Semantic integrohet me React, Angular, Meteor, Ember dhe korniza të tjera të ndryshme.