10 najboljih CSS okvira za napredne programere

Jednom sam čuo šalu kako se razvija programer: „NASA je na Mars sletila robota, a mi se još uvijek borimo za uskladiti svoje divove!“ I loše mi je što u ovoj šali ima puno istine. Činiti nešto što zvuči jednostavno i zdravorazumski, kao što je centriranje okvira unutar okvira, nevjerojatno je teško raditi u CSS-u. Osim ako ga niste već susreli. I negdje su spremili isječak koda. Čak i ako to uspijete riješiti, uvijek postoji skrivajući strah da bi se on negdje mogao užasno probiti na nekom glupom pregledniku! CSS povezuje prvo mjesto “potrebnih web zla” uz JavaScript. To je standard koji se naglo razvijao, različiti su interpretirali od različitih proizvođača preglednika i sada je toliko prepun proturječnosti da se nitko ne usuđuje nazvati sebe “CSS stručnjakom”..


Nije čudo da su se okviri CSS-a s vremenom pojavili i oduzeli većinu boli. Danas ne možemo zamisliti kodiranje bez omiljenog okvira CSS-a, jer je ciljanje više veličina zaslona postalo neophodno.

Ali kako znate da je vaš okvir najbolji za posao koji vam je pri ruci? Također, ako ste novi u naprednom razvoju, koji bi vam okvir trebao pomoći?

Ovaj post baca sjajan pogled na prednji razvojni krajolik i uspoređuje prednje trkače s CSS-ovim okvirima. Ako vam je dosadilo da kodirate CSS pravila ručno, zaronite za nekim kratkim olakšicama!

bootstrap

Inicijativa Twittera, bootstrap prihvaća zaslugu za uvođenje odazivnog dizajna u velikoj mjeri. Bio je to prvi okvir za promicanje filozofije “mobilni-prvi.” Više nije dizajnirao zasebni projekt za manje veličine ekrana; sve što ste trebali učiniti je uključiti odgovarajuće klase Bootstrap, a dizajn će se automatski prilagoditi različitim veličinama zaslona (dobro, gotovo).

Odgovarajući dizajn u Bootstrapu (4,0 u odnosu na 3,0)

Bootstrap je postigao odaziv dizajn uvođenjem ideje rešetke. Rešetka je nevidljiva podjela zaslona u stupcima (zajedno s širinom). Na primjer, ako imate tri “okvira” na kojima se želite pozicionirati jedan pored drugog na velikim ekranima, ali vertikalno na manjim ekranima, to biste trebali učiniti:

Jedan od tri stupca

Jedan od tri stupca

Jedan od tri stupca

Trenutno popularna verzija Bootstrapa je 4, što je bio glavni remont u odnosu na seriju 3.3. Gornja sintaksa je kako biste dodali kod Bootstrap 4, koji duguje mnogo svoje elegancije sirovoj snazi flexbox i druge moderne značajke izgleda izravno podržane u preglednicima. U nižim verzijama Bootstrapa, mreža je definirana kao ukupno 12 stupaca, što je rezultiralo kodom kao što je

kako biste napravili div zauzima trećinu širine zaslona na uređajima velike veličine i polovinu širine na uređajima srednje veličine. Sintaksa je sada puno ugodnija, iako zahtijeva upoznavanje s Flexboxom.

Pro bootstrap

O Bootstrap-u se može mnogo svidjeti, posebno za programere s punim snopom:

  • Brza izrada prototipova: S programom Bootstrap gotovo da nema potrebe trošiti razmišljanja o škakljivim CSS pozicioniranjima i nekompatibilnosti preglednika. Sve što trebate napisati HTML i primjena odgovarajućih CSS klasa uzrokuje oživljavanje reakcije.
  • Veliki ekosustav: Od danas, Bootstrap ima najveći ekosustav među prednjim okvirima. Broj izgleda web stranica, tema, administratorskih panela, korisničkih sučelja itd. Izgrađenih pomoću Bootstrapa neumoljiv je i nastavlja biti sve bolji. Za savjetnike i proizvodne tvrtke to znači da će unaprijed pripremljeni proizvodi i podrška zajednice uvijek biti dosta.
  • Potvrđeno na Twitteru: Novi trend otvorenog koda je porast projekata koje sponzorira komercijalni subjekt. Češće nego ne, ti subjekti grade svoju profitabilnu tvrtku oko svoje ponude. Kotlin (JetBrains), WordPress (Automattic, Inc.), Kutni (Google), React (Facebook) itd., Su neki primjeri. Kad projekt ima podržan od strane uspostavljenog entiteta i nije izložba za jednu osobu, ona vjeruje zajednici (posebno poslovnim kupcima) da će projekt imati jasan plan i dugoročnu budućnost.
  • Velika kolekcija komponenata: Bootstrap nudi mogućnost isporuke gotovo svih komponenti korisničkog sučelja koje su vam ikada potrebne. Navigacija, obrasci, kartice, modaliteti, gumbi, značke, trake napretka, upozorenja. , , Vi to ime i Bootstrap ima. Za mnoge tvrtke to praktično smanjuje potrebu za timom.
  • Manja i manja podrška: Među masovno popularnim okvirima CSS-a, Bootstrap je jedini koji podržava i LESS i SASS. Da, znam, ne upotrebljavate Manje (kao što ni jedan programer koji ne poštuje sebe, zar ne?), Ali hej, postoje ogromni projekti koji se oslanjaju na Manje. Naravno, ne možete odabrati nijedno i napisati obične CSS datoteke.

Bootstrap Cons

Ništa nije bez cijene, zar ne? Pa, Bootstrap nije iznimka. S vremenom je Bootstrap naišao na veliku vatru dizajnera i stručnjaka za korisničko sučelje. Evo zašto:

  • UX monotonija: Sama činjenica da Bootstrap ima tako veliku kolekciju ugrađenih rezultata rezultira na web lokacijama koje izgledaju previše poznato i, iskreno, dosadno. Trebate samo prijeći na službeni primjeri vidjeti samo koliko očiju su zadane vrijednosti. Jednostavno potražite “sve web stranice za pokretanje računala izgledaju isto” i znat ćete što mislim. ��
  • Stilovi nevolja: Bootstrap je ono što se može smatrati pozitivnim okvirom. Drugim riječima, ima ideje o izgledima i čini vam napornim radom ako želite da izgledaju / ponašaju se drugačije. Razmotrite zadane CSS točke prijeloma za širine zaslona: zaslon srednje veličine za Bootstrap je onaj koji počinje s širinom uređaja od 768 piksela. A što ako želite ciljati, recimo, granicu od 600 px? Sretno s tim! Isto je i sa gotovo svim drugim komponentama u sustavu za pokretanje: redovi i spremnici imaju zadane obloge, gumbi imaju boje i obrube koje je vrlo teško prevladati bez puno posla, i tako dalje.

Želim svladajte Bootstrap? Pogledajte ovo online tečaj Brad Traversy.

Temelj

Da su tehnologije religije, fondacije i momci iz Bootstrapa ostali bi bez krvi. Nijedna rasprava o modernim okvirima CSS-a nije dovršena, a da se ne spominje i Foundation.

Vodite preko Zaklade web stranica, i ne možete ne primijetiti stavku: “Najsavremeniji odzivni front-end okvir na svijetu.” Na prvi pogled, izgleda da je velika tvrdnja da će ići s marketinškom kampanjom.

Međutim, pristalice zaklade znaju da za to postoji barem malo istine. Fondacija je stvorena kako bi prirodno išla uz okvir tračnica, a na djelu se može vidjeti nekoliko načela vodećih principa poput „zen-a“..

Na primjer, ako želite redak koji sadrži dva elementa na malim ekranima, tri na srednjim i četiri na velikim, ekvivalentni kod u Fondaciji izgledat će ovako:

U usporedbi s ranijim verzijama Bootstrapa, smatram da je ovo vrlo intuitivno i lako za pamćenje. Nema više dvanaest rešetki stupaca i smišljanja onoga što bi trebalo biti 4/12!

Iako je Foundation mnogo manje popularan od Bootstrapa, to je poslovna tajna za mnoge stručne napredne programere.

Prosijeci okvira Zaklade

Zaklada ima neke neobične karakteristike iz svih CSS okvira koje ćemo razmotriti u ovom članku:

  • Potpuni alat: Tehnički je pogrešno reći da je Foundation CSS okvir. Mislim, jeste, ali izgrađen je kao velika i modularna zbirka alata koja ima za cilj riješiti gotovo sve vrste front-end problema. Postoje zasebne okvirne ponude za web stranice i adrese e-pošte, uvelike optimizirane za njihove domene. Foundation također dolazi sa sučeljem naredbenog retka (CLI), koje će zvučati poput glazbe za uši programerima koji su radili s webpackom ili drugim modulima..
  • Izuzetna fleksibilnost: Za razliku od Bootstrapa, zaklada je stvorena kako bi prednji programer dao potpunu kontrolu nad njihovim korisničkim sučeljima. Kao rezultat, Zaklada će se osjećati složeno i ogromno složeno prema pridošlici. Međutim, razlog je što Fondacija ne nameće nijedan jezik stila na vas, već želi biti upravo ono što jest: izvrstan CSS okvir.
  • Više od samo komponenata korisničkog sučelja: Dok zaklada ima uobičajenu zbirku elemenata korisničkog sučelja, ona znatno nadilazi nadzor dužnosti. Programeri su uključili napredni sustav responzivnih slika, komponentu tablice cijena (da, onu koja se koristi za prikazivanje različitih planova cijena), provjeru oblika, podršku s desna na lijevo, odgovarajuće ugrađivanje i još mnogo toga. Želim ponovo naglasiti da je ovo pretjerano korištenje za većinu jednostavnih web lokacija, ali za velike je dobra korist koju će iskusni programeri prepoznati.
  • Obuka i savjetovanje: Sada, dok je Bootstrap kreiran od strane Twittera, to je sporedni projekt i vrlo mali dio ukupne slike. Tvrtka koja stoji iza Fondacije (ZURB) posvećena je njenom korištenju, razvoju i promociji. Tečajevi za obuku i profesionalno savjetovanje nude se velikim kupcima, što je izvrsno za tvrtke koje ciljaju ogromne projekte i spremni su platiti.

Protiv okvira zaklade

Snage jednog okvira postaju njegove slabosti ako se promatra sa suprotnog gledišta. Evo zašto Fondacija možda nije najbolji izbor za vaš projekt:

  • Mala (er) zajednica: Zajednica Zaklade mnogo je manja od Bootstrapa, a ako pokušavate nešto egzotično i zaglavite se, šanse da pronađete odgovarajuću pomoć su manje. Ipak bih to dodao u sve praktične svrhe; tamo je dosta zajednice. Jednostavno je da je nekoliko redoslijeda manje od Bootstrapa, tako da možda nećete naći rješenja odmah.
  • Složenost: Ako ste navikli na Bootstrap ili nešto jednostavno, ili još gore, na vanilin CSS, Foundation će se osjećati kao beskonačna eksplozija složenosti. Slojevi unutar slojeva, komponente s komponentama, beskrajne mogućnosti prilagođavanja. , , Uskoro ćete početi ispitivati ​​o korisnosti samog života! Ali onda, Fondacija ima sasvim drugačiji cilj i za to se ne može kriviti.
  • Previše opcija: Ponekad jednostavno želite obaviti sranje i brinuti se za savršenstvo kasnije. U takvim je slučajevima frustrirajuće biti predstavljen s previše mogućnosti uz manje varijacije. Na primjer, mislite da biste morali naručiti sendvič iz Podzemne željeznice kad ste toliko gladni, da biste mogli jesti blato. Naravno, Fondacija nije takva vremena.
  • Dostupnost talenata: Budući da je Fondacija (mnogo) manje popularna od Bootstrapa, raspoloživi talent mnogo je manji. Općenito je pravilo da će svaki novi najam vjerojatno znati Bootstrap, ali neće imati pojma o Foundationu. Za učenje treba vremena, a to je luksuz koji ne mogu imati svi timovi.

Bulma

Bulma relativno je novi sudionik bojnog okvira CSS okvira i sebi je dao ime u kratkom vremenu. Njegova privlačnost leži u strogom, CSS pristupu (nema JavaScript komponenti) i elegantnim zadanim postavkama, što je problem s kojim mnogi programeri s dobrim okom za dizajn imaju problema kada rade s Bootstrapom..

Veliki dio zamaha Bulma dolazi od visokih stopa usvajanja s zajednicom Laravel (PHP web okvir, za slučaj da niste znali) zajednicom, za koju sam siguran da je gotovo ono što je pomoglo Vue.jsu da se podigne do visine popularnosti među okvire JavaScript-a.

Zašto odabrati Bulma CSS Framework

Mnogo je razloga što volite Bulmu i koristite je za svoj sljedeći projekt:

  • Prilično popularno: Okej, nije popularniji od Bootstrapa, ali popularniji je od Foundation. Kad pišemo, Bulma ima 30 tisuća zvjezdica na Githubu, što je oko 3 tisuće + više od Fondacije. Naravno, niz Githubovih zvijezda nije mjerilo zasluga, ali to zaista govori da zajednica odobrava Bulmu.
  • Izuzetno čitljive klase: Bulma, po meni, ima najčitajnije CSS klase od svih okvira koje sam pokušao. Postoji i smiješno moćan i jednostavan sustav za izradu rešetki u metro stilu, koji se zove pločice (pogledajte kôd u drugoj polovici snimke zaslona i recite mi da niste impresionirani!).

  • Ravna krivulja učenja: Bulma je vrlo modularna i stvorena je za rješavanje praktičnih, svakodnevnih problema s kojima se susreću manji timovi i pojedini programeri. Otkrićete da je Bulmu vrlo lako naučiti iako mislim da je pristojna pozadina CSS-a uvijek dobro imati predodžbu o tome što se može dogoditi ispod haube. Ovo će vam pomoći kada želite nadjačati zadano ponašanje.
  • Elegantan: Pogledajte niže zadani odjeljak Hero za Bulmu. Dovoljno je rekao!

Bulma ima malu, ali izuzetno strastvenu zajednicu, pa ako želite riješiti sav tijek, a opet želite u rekordnom vremenu osmisliti elegantne korisničke sučelja, Bulma je taj put. Za programere Bootstrapa, Bulma ima poseban odjeljak kako bi ih uvjerio i pomogao im prijeći.

UIkit

Stvar koja mi padne na pamet kad razmišljamo UIkit je minimalizam. Minimalizam nije u značajkama (u stvari, nudi možda najviše karakteristika svih okvira), već u dizajnu. Ako su tvoja stvar super čisti, elegantni dizajni koji se ne boje bjeloglavog prostora, UIkit je pokrivao.

Na primjer, pogledajte komponentu trake napretka:

Ili komponenta markera slike (interaktivni marker za slike usmjeren na JS):

Ili čak skromni HTML obrazac:

Ako ovo ne vrišti elegancijom na vrhu pluća, ne znam što čini. Samo prijeđite na web stranicu UIkita i provjerite sve nevjerojatne komponente koje nudi. Osim ako vaš voditelj projekta ili kupac na vas ne nameće jezik određenog stila, mislim da je Uikit kruna u dizajnu korisničkog sučelja i nekoliko je milja ispred Googleovog materijala za dizajn.

No, postoji li ulov, pitate se. Da tamo je. Poput Bootstrapa, UIkit radi sa svojim JavaScript-om i iako možete koristiti jQuery za DOM manipulaciju, korištenje virtualnog DOM okvira poput React je nemoguće.

Također, Uikit je sustav koji sadrži sustav, i nećete ga moći modificirati ili proširiti bez značajnih napora.

Semantičko korisničko sučelje

Drugi kandidat u utrci je Semantičko korisničko sučelje, koja se pokušava razlikovati s puno tema i prilagodbi. Postoji više od 3000 tematskih varijabli, što rezultira ogromnom širinom. Ili tako kažu dokumenti.

Bootstrap 4 pokriva sve to i potpuno je prilagodljiv, ali jedna od prednosti Semantičkog sučelja je ta što po zadanom rezultira lijepim izgledom. Ipak, to nije najbolje izgledalo izvan okvira, zbog čega sam kasnije to stavio na svoju listu.

Također ima jednu od najstrmijih krivulja učenja, a konvencije kodiranja mnogo su strože. Probaj; Rekla bih, i vidi da li izgleda kao nešto što biste možda voljeli.

Susy

Susy u ovom je trenutku malo poznat okvir, ali je fascinantna i osvježavajuća ideja. Još jedan okvir čistog izgleda, Susy uklanja sve unaprijed definirane ideje plutanja, rešetke, Flexbox, tablice ili bilo čega drugog i omogućuje vam da sastavite vrstu željenog izgleda. Ovdje je ključna riječ “Compose”, jer je Susy namijenjena stvaranju vrlo modularnih, očaravajućih izgleda s ultra-složenim, neobičnim i preciznim potrebama.

U rukama stručnjaka programera, Susy je poput vatrenog oružja nego što puše sve ostalo. Manji smrtnici će, naravno, uspjeti spaliti ruke.

Da biste dobili predstavu o snazi ​​Susy-ja, uzorite ovu zadanu postavku (SASS):

// 4 simetrična, fluidna stupa
// žlijebovi su 1/4 veličine stupca
// elementi obuhvaćaju 1 manje oluka od stupaca
// spremnici obuhvaćaju i 1 manje oluka
$ susy: (
‘stupci’: ponoviti (4),
‘žlijebovi’: 0,25,
‘širi’: ‘usko’,
‘kontejner’: ‘usko’,
);

Mislim da je kod prilično razumljiv, mada nije za one kojima se žuri. �� Susy ima savršen smisao ako ste umorni od svih strujanja koje vam nameću moderni okviri, a imate potrebe za izgledom za koji znate da nijedan običan okvir ne može poslužiti.

ostvariti

Ako ste zaljubljeni u Googleov dizajn materijala, Materialize je okvir uživat ćete. Najbolje je to što ima samo nekoliko komponenti i klasa koje treba naučiti, a usredotočena je na što bržu produktivnost. Postoji nekoliko opcija prilagodbe, a Materialize slijedi popularni format rešetke sa 12 stupaca koji je uspostavio Bootstrap.

Međutim, ako mene pitate, a Dizajn materijala postaje tako uobičajena i tako je. , , Prema zadanim postavkama, uskoro ćemo se žaliti na to kao i na svim web-lokacijama Bootstrap-a-izgleda-isti problem. Ipak, to je lijep okvir za početak.

Čist

Je li Yahoo mrtav?

Ne, ovo pitanje nije diverzija, ali ističe važno zapažanje: Yahoo je sagradio Čisti okvir i objavljen pod BSD licencom.

Brzi pogled impresionira me i pitam se zašto ova ponuda nije poznata većini ljudi. U svakom slučaju, Čisto, dobro, čisto, jest da je to čisti CSS okvir. �� U stvari, programeri su prošli dodatni kilometar i podijelili ga u različite CSS module koje možete uvesti po potrebi. Dakle, ako vam je potreban samo mrežni sustav, nema potrebe za uvozom cijelog CSS-a i dodavanjem vremena učitavanja web lokacije..

Pure rešetka dolazi u nekoliko okusa: u 5 točaka, u 2 točke, u 24 točke itd., Tako da kada je riječ o stvaranju stupaca, imate puno više fleksibilnosti. Čisto nije CSS-ov okvir najboljeg izgleda, ali vidim kako to daje vrijednost onima koji žele riješiti maleni CSS problem u korisničkom sučelju i odlutaju se za „korisne“ zadane postavke s kojima dolaze i drugi okviri..

Kostur

Kao što možete vidjeti na snimci zaslona, Kostur je toliko minimalan da čak ni sebe ne naziva CSS okvirom, bibliotekom ili čak modulom. To je kotlovnica i sadrži samo 400 redaka izvornog koda! Nevjerojatan? Mislim da je tako, ali da bi stvari gledao u perspektivu, Skeleton je dizajniran za malene ili male projekte koji trebaju malo više od izgleda i pozicioniranja.

Vrijedi pogledati; uostalom, tko zna, skelet bi mogao biti ono što ste tražili cijelo vrijeme!

Miligram

Posljednji na listi je Miligram, CSS okvir dizajniran za brzinu i produktivnost. Programeri su zadržali veličinu ispod 2 KB, što prema današnjim standardima puno znači.

Milligram je malo zabavno za CSS okvire s kojima ćete rado raditi. Proširenje je lako i pomoću nekoliko redaka prilagođenog CSS-a možete njegov izgled promijeniti na način koji želite.

Dakle, koji je CSS okvir najbolji?

Priznajte, ranije ste postavljali slična pitanja i dobili ste sljedeći razočaravajući odgovor: nijedan. Odabir okvira (ili alata ili čak osobe u vašem životu za to pitanje) ovisi o puno faktora. Ako želite moj savjet, evo ga: Isključite buku. To što ljudi polude za nečim novim i sjajnim ne znači da to morate naučiti ili ćete biti zaostali. Isprobavanje novih stvari je sjajno, ali trčanje u krugovima u potrazi za savršenim alatom je, ipak, gubitak.

Pa, koji ste od ovih okvira pokušali? Ili me možda nešto iznenađuje što sam upravo propustio? Javite mi u komentarima, molim vas. Ljubav, mržnja, slučajni pozdrav, svi su dobrodošli!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map