10 najboljših okvirov CSS za napredne razvijalce

Nekoč sem slišal šalo razvijalcev: “NASA je na Mars pristala robote, tu pa se še vedno trudimo uskladiti svoje vragolije!” In hudo mi je, da ima ta šala v sebi veliko resnice. V CSS je težko narediti nekaj, kar zveni tako enostavno in zdravorazumsko, kot je centriranje škatle znotraj polja. Razen če niste naleteli že prej. In delček kode shranil nekam. In četudi vam to uspe izvleči, vedno obstaja strah, da se bo morda nekje grozno razbil na nekem neumnem brskalniku! CSS je povezan z prvim mestom “potrebnih spletnih zla” in JavaScript. To je standard, ki se je naključno razvil, različno so ga razlagali različni proizvajalci brskalnikov in je zdaj tako poln nasprotij, da si nihče ne upa imenovati “strokovnjaka za CSS”.


Nič čudnega, da so se okviri CSS sčasoma pojavili in večino bolečine odnesli. Danes si ne moremo predstavljati kodiranja brez našega najljubšega okvira CSS, saj je ciljanje na več velikosti zaslona postalo nujno.

Toda kako veste, da je vaš okvir najboljši za to delovno mesto? Če ste novi v naprednem razvoju, kateri okvir naj vam pomaga pri izbiri?

Ta objava meče pogled na razvojno pokrajino sprednjega dela in primerja sprednje tekače med okviri CSS. Če ste utrujeni od ročno kodiranih pravil CSS, se poglejte za nekaj olajšanja!

Škornji za prtljage

Pobuda s strani Twitterja, Škornji za prtljage je zaslužen za široko uvedbo odzivnega oblikovanja. To je bil prvi okvir za promocijo filozofije mobilnega prvega. Za manjše velikosti zaslona ni več oblikoval ločenega projekta; vse, kar morate storiti, je vključiti ustrezne razrede Bootstrap, dizajn pa bi se samodejno prilagodil različnim velikostim zaslona (no, skoraj).

Odziven dizajn v Bootstrapu (4,0 v primerjavi s 3,0)

Bootstrap je z odzivom na mrežo dosegel odziven dizajn. Rešetka je nevidna particija zaslona v stolpce (skupaj s širino). Na primer, če imate tri “škatle”, ki jih želite postaviti ob bok na velikih zaslonih, navpično pa na manjše zaslone, to naredite:

Eden od treh stolpcev

Eden od treh stolpcev

Eden od treh stolpcev

Trenutno priljubljena različica Bootstrapa je 4, kar je bila večja prenova nad serijo 3.3. Zgornja sintaksa je, kako v kodo Bootstrap 4 dodate kodo, ki je dolga veliko svoje elegance surovi moči Flexbox in druge moderne funkcije postavitve, ki jih neposredno podpirajo brskalniki. V spodnjih različicah Bootstrapa je bila mreža opredeljena kot 12 stolpcev, kar je povzročilo kodo, kot je

da div ustvari tretjino širine zaslona na napravah velike velikosti in polovico širine v napravah srednje velikosti. Sintaksa je zdaj veliko bolj prijetna, čeprav zahteva seznanitev s Flexboxom.

Pro bootstrap

Pri Bootstrapu je veliko všeč, zlasti za razvijalce polnih skladov:

  • Hitro oblikovanje prototipov: S programom Bootstrap skoraj ni treba razmišljati o zapletenih pozicioniranjih CSS in nezdružljivosti brskalnika. Vse, kar morate narediti, napišite HTML in nato z uporabo ustreznih razredov CSS odzove odzivnost.
  • Veliki ekosistem: Od danes ima Bootstrap največji ekosistem med sprednjimi okviri. Število postavitev spletnih strani, tem, upravnih panelov, komponent uporabniškega vmesnika itd., Izdelanih s programom Bootstrap, je moteče in se še izboljšuje. Tudi za svetovalce in produktna podjetja to pomeni, da bo vnaprej pripravljenih izdelkov in podpore skupnosti vedno veliko.
  • Podprto s strani Twitterja: Nastajajoč trend odprtega koda je porast projektov, ki jih sponzorira komercialni subjekt. Ti subjekti bolj pogosto kot ne gradijo dobičkonosna podjetja okoli svoje ponudbe. Kotlin (JetBrains), WordPress (Automattic, Inc.), kotni (Google), React (Facebook) itd., Je nekaj primerov. Ko projekt podpre uveljavljeni subjekt in ni samostojna razstava, skupnost (zlasti podjetniške stranke) verjame, da bo imel projekt jasen načrt in dolgoročno prihodnost.
  • Velika zbirka komponent: Bootstrap ponuja popolnoma vse komponente uporabniškega vmesnika, ki jih boste kdaj potrebovali. Navigacija, obrazci, kartice, načini, gumbi, značke, vrstice napredka, opozorila. . . Poimenujete ga in Bootstrap ga ima. Pri mnogih podjetjih to praktično zmanjšuje potrebo po namenski ekipi s sprednjim delom.
  • MANJ in SASS podpora: Med množično priljubljenimi okviri CSS je Bootstrap edini, ki podpira tako LESS kot SASS. Da, vem, ne uporabljate manj (kot noben samospoštovalni razvijalec ne bi smel, kajne?), Ampak hej, tam so ogromni projekti, ki se zanašajo na manj. Seveda ne morete izbrati niti enega in zapisati navadnih datotek CSS.

Bootstrap Cons

Nič ni brez cene, kajne? No, Bootstrap ni izjema. Sčasoma se je Bootstrap znašel pod velikim ognjem s strani oblikovalcev in strokovnjakov za uporabniško opremo. To je razlog:

  • UX monotonost: Že samo dejstvo, da ima Bootstrap tako veliko zbirko vgrajenih, privede do spletnih mest, ki so videti preveč znana in povsem iskreno dolgočasna. Na glavo se morate samo obrniti uradni primeri da vidite, koliko oči je privzetih privzetih. Samo poiščite, da so “vsa zagonska spletna mesta videti enaka”, in vedeli boste, kaj mislim. ��
  • Styling woes: Bootstrap je tisto, kar bi lahko veljalo za okvir s prepričanjem. Z drugimi besedami, ima ideje o postavitvah, zaradi česar si lahko še dodatno prizadevate, če želite, da je videti / se obnašati drugače. Razmislite o privzetih mejnih točkah CSS za širine zaslona: srednje velik zaslon za Bootstrap je tisti, ki se začne s širino naprave 768px. In kaj, če želite ciljati, recimo, na omejitev 600px? Pa srečno s tem! Podobno je s skoraj vsemi drugimi komponentami v prtljažniku: vrstice in zabojniki imajo privzeto oblazinjenje, gumbi imajo barve in obrobe, ki jih je zelo težko preglasiti brez veliko dela in tako naprej.

Hočem obvladajte Bootstrap? Oglejte si to spletni tečaj Brad Traversy.

Fundacija

Če bi bile tehnologije religije, bi fantje iz Fundacije in Bootstrapa ostali brez krvi. Nobena razprava o sodobnih okvirih CSS ni popolna, ne da bi omenjali Fundacijo, zato tukaj.

Vodja fundacije Spletna stran, in ne morete pomagati, da ne opazite pojma: “Najnaprednejši odzivni prednji okvir na svetu.” Na prvi pogled je videti, da gre pri visoki trditvi, da gremo s tržno kampanjo.

Vendar privrženci okvira Fundacije vedo, da obstaja vsaj nekaj resnice. Fundacija je bila razvita, da bi bila naravno v skladu z okvirjem tirnic, in na delu je mogoče videti več vodilnih principov tirnic, ki so podobni zenu..

Na primer, če želite vrstico, ki vsebuje dva elementa na majhnih zaslonih, tri na srednjih in štiri na velikih, bo enakovredna koda v fundaciji izgledala tako:

V primerjavi s prejšnjimi različicami Bootstrap se mi zdi to zelo intuitivno in enostavno zapomniti. Nič več dvanajstih mrežnih stolpcev in ugotavljanja, kakšen naj bi bil 4/12!

Medtem ko je Foundation veliko manj priljubljen kot Bootstrap, je to skrivnost poslovne skrivnosti za številne strokovne razvijalce.

Prednosti okvirja fundacije

Fundacija ima nekaj neobičajnih lastnosti iz vseh okvirov CSS, ki jih bomo obravnavali v tem članku:

  • Popolno orodje: Tehnično je napačno reči, da je Foundation okvir CSS. Mislim, da je, vendar je bila zgrajena kot velika in modularna zbirka orodij, ki je namenjena reševanju skoraj vseh vrst težav s sprednjim delom. Obstajajo ločene okvirne ponudbe spletnih strani in e-poštnih sporočil, ki so močno optimizirane za njihova področja. Fundacija prihaja tudi z vmesnikom ukazne vrstice (CLI), ki bo kot glasba slišala na ušesa razvijalcev, ki se uporabljajo za delo s spletnim paketom ali drugimi modulom.
  • Izjemna prilagodljivost: Za razliko od Bootstrapa, je bila fundacija zgrajena zato, da je razvijalcem v celoti omogočil popoln nadzor nad njihovimi uporabniškimi vmesniki. Zaradi tega se bo Fundacija počutila prijetno in izjemno zapleteno do novinca. Razlog je v tem, da Foundation na vas ne vsiljuje nobenega slogovnega jezika, ampak želi biti samo to, kar je: odličen okvir CSS.
  • Več kot samo komponente UI: Medtem ko ima Fundacija običajno zbirko elementov uporabniškega vmesnika, je to veliko več kot obveznost. Razvijalci so vključili napredni sistem odzivnih slik, komponento tabele za oblikovanje cen (da, tisto, ki se uporablja za prikazovanje različnih načrtov cen), potrjevanje obrazca, podporo od desne proti levi, odzivne vdelave in še več. Rad bi še enkrat poudaril, da je to presežek za večino preprostih spletnih mest, za velika pa je to korist, ki ga bodo izkušeni razvijalci prepoznali.
  • Usposabljanje in svetovanje: Medtem ko Bootstrap ustvarja Twitter, je to stranski projekt in zelo majhen del celotne slike. Podjetje, ki stoji za fundacijo (ZURB), pa se zavezuje k uporabi, razvoju in promociji. Za velike stranke so na voljo tečaji za usposabljanje in strokovno svetovanje, kar je super za podjetja, ki ciljajo na ogromne projekte in so pripravljena plačati.

Slabosti okvira fundacije

Moči enega okvira postanejo njegove slabosti, če jih gledamo z nasprotnega stališča. Evo, zakaj fundacija morda ni najboljša izbira za vaš projekt:

  • Majhna (er) skupnost: Skupnost Fundacije je veliko manjša od skupnosti Bootstrap, in če poskušate nekaj eksotičnega in se zataknete, so možnosti, da poiščete ustrezno pomoč, nižje. Vendar bi dodal, da za vse praktične namene; tam je dovolj skupnosti. Preprosto je, da je nekaj vrst manjši od Bootstrap-ovega, zato morda rešitve ne najdete takoj.
  • Kompleksnost: Če ste vajeni Bootstrap ali vanilijevega CSS-ja na kaj preprostega ali še huje, se bo Foundation počutil kot neskončna eksplozija zapletenosti. Sloji znotraj plasti, sestavni deli s komponentami, neskončne možnosti prilagajanja. . . Kmalu boste začeli dvomiti o koristnosti samega življenja! Toda potem spet ima Fundacija povsem drugačen cilj in za to ne moremo kriviti.
  • Preveč možnosti: Včasih bi se radi samo pozneje spravili v sranje in skrbeli za popolnost. V takšnih časih je frustrirajoče biti predstavljen s preveč možnostmi z majhnimi spremembami. Na primer, pomislite, da bi morali naročiti sendvič v podzemni železnici, ko ste tako lačni, da bi lahko pojedli blato. Seveda fundacija ni časi takšni.
  • Razpoložljivost talentov: Ker je Foundation (veliko) manj priljubljen kot Bootstrap, je razpoložljivi talent veliko manj. Na splošno velja, da bo vsak novi najemnik skoraj verjetno poznal Bootstrap, vendar o Fundaciji ne bo imel pojma. Učenje traja čas in to je razkošje, ki ga ne morejo imeti vse ekipe.

Bulma

Bulma je relativno nov udeleženec bojnih okvirov CSS in si je v kratkem času dal ime. Njegova privlačnost je v strogem, samo za CSS pristop (ni komponent JavaScript) in elegantnih privzetih nastavitvah, kar je veliko razvijalcev z dobrim očesom za oblikovanje pri delu z Bootstrapom..

Velik zagon Bulme izvira iz visokih stopenj sprejemanja s skupnostjo Laravel (spletnim okvirom PHP, v kolikor niste vedeli) s skupnostjo, za katero sem prepričan, da je to, kar je Vue.jsu pomagalo, dvigniti do višine priljubljenosti. med okviri JavaScript.

Zakaj izbrati okvir Bulsa CSS

Obstaja veliko razlogov, da je Bulma všeč in jo uporabite za svoj naslednji projekt:

  • Precej priljubljeno: V redu, ni bolj priljubljen kot Bootstrap, ampak je bolj priljubljen kot Foundation. Kot pišete, ima Bulma na Githubu 30k + zvezdic, kar je približno 3k + več kot Foundation. Seveda številne Githubove zvezde niso merila zaslug, vendar to vseeno pravi, da skupnost odobrava Bulmo.
  • Izredno berljivi razredi: Bulma ima zame najbolj berljive razrede CSS od vseh okvirov, ki sem jih preizkusil. Obstaja tudi smešno močan in preprost sistem za ustvarjanje mrež v slogu metroja, imenovan ploščice (poglejte si kodo v drugi polovici zaslona in povejte, da niste navdušeni!).

  • Ravna krivulja učenja: Bulma je zelo modularna in je bila ustvarjena za reševanje praktičnih, vsakodnevnih težav, s katerimi se srečujejo manjše ekipe in posamezni razvijalci. Ugotovili boste, da se je Bulma zelo enostavno naučiti, čeprav mislim, da je spodobno ozadje v CSS-ju vedno dobro, da imaš predstavo o tem, kaj se lahko dogaja pod pokrovom. To vam bo pomagalo, če želite preglasiti privzeto vedenje.
  • Eleganten: No, poglejte privzeti odsek Hero za Bulmo spodaj. Dovolj rečenega!

Bulma ima majhno, a izredno strastno skupnost, tako da, če želite odpraviti vse puhaste obresti in kljub temu v rekordnem času pripraviti elegantna uporabniška vmesnika, je Bulma pot. Za razvijalce Bootstrapa ima Bulma ločen razdelek, s katerim jih bo prepričal in pomagal pri prehodu.

UIkit

Stvar, ki mi pride na misel ob razmišljanju UIkit je minimalizem. Minimalizem ni v lastnostih (v resnici ponuja morda največ lastnosti vseh okvirov), ampak v dizajnu. Če so vaša stvar čisto čiste, elegantne in sramežljive modele, ki niso beli, je UIkit vas pokril.

Oglejte si na primer komponento vrstice napredka:

Ali komponento označevalca slike (interaktivni marker za slike, ki ga vodi JS):

Ali celo skromni obliki HTML:

Če ta ne kriči elegance na vrhu pljuč, ne vem, kaj počne. Pojdite na spletno mesto UIkit in si oglejte vse neverjetne komponente, ki jih ponuja. Če vaš vodja projektov ali stranka ne namerava določenega slogovnega jezika, menim, da je Uikit prevzel krono za oblikovanje uporabniškega vmesnika in je nekaj milj pred Googlovim materialom.

Toda, ali se ujamete, se sprašujete? Da, obstaja. Tako kot Bootstrap tudi UIkit deluje s svojim JavaScript-om in medtem ko lahko za manipulacijo z DOM uporabljate jQuery, je z uporabo virtualnega okvira DOM, kot je React, nemogoče.

Uikit je tudi samostojen sistem in ga ne boste mogli spreminjati ali razširiti, ne da bi vložili veliko truda.

Semantični uporabniški vmesnik

Še en kandidat na dirki je Semantični uporabniški vmesnik, ki se poskuša razlikovati z veliko temami in prilagajanjem. Obstaja več kot 3000 tematskih spremenljivk, kar ima za posledico veliko širino. Ali tako pravijo dokumenti.

Bootstrap 4 pokriva vse to in je tudi popolnoma prilagodljiv, vendar je ena od prednosti pri uporabniškem vmesniku Semantic ta, da ima privzete postavitve privzeto. Kljub temu ni najbolje videti, kot da bi ga šlo v polje, zato ga kasneje uvrstim na svoj seznam.

Ima tudi eno najbolj strmih krivulj učenja, pravila o kodiranju pa so veliko strožja. Poskusi; Rekel bi in poglej, ali je videti kot nekaj, kar bi morda želeli.

Susy

Susy je trenutno malo znan okvir, vendar je to očarljiva in osvežujoča ideja. Drug okvir s čisto postavitvijo, Susy odpravlja vse vnaprej določene ideje float, grid, Flexbox, tabel ali česa drugega in vam omogoča, da sestavite želeno postavitev. Tukaj je ključna beseda “Sestavi”, saj je Susy namenjena ustvarjanju zelo modularnih, osupljivih postavitev z ultra kompleksnimi, nenavadnimi in natančnimi potrebami.

V rokah strokovnega razvijalca je Susy kot ogenj, kot da vse drugo odpihne. Manjšim smrtnikom bo seveda uspelo zažgati roke.

Če želite dobiti predstavo o moči Susy, vzorčite to privzeto nastavitev (SASS):

// 4 simetrični, tekoči stebri
// žlebovi so 1/4 velikosti stolpca
// elementi obsegajo 1 manj žleba od stolpcev
// posode obsegajo tudi 1 manj žleba
$ susy: (
‘stolpci’: Susy-ponovi (4),
‘žlebovi’: 0,25,
‘širiti’: ‘ozko’,
‘kontejnerski namaz’: ‘ozek’,
);

Mislim, da je koda precej samoumevna, čeprav se tistim, ki se jim ne mudi. �� Susy ima popoln smisel, če ste utrujeni od vsega, kar vam vsiljujejo sodobni okviri, in imate potrebe po postavitvi, za katere veste, da noben navadni okvir ne more služiti.

Materializirajte

Če ste zaljubljeni v Googlov material Design, je Materialize pravi ogrodje uživali boste Najboljše je, da ima le nekaj sestavnih delov in razredov, ki se jih je treba naučiti, in je osredotočen na čim hitrejšo produktivnost. Možnosti prilagoditve je malo in Materializiramo po priljubljeni obliki mreže z 12 stolpci, ki jo je vzpostavil Bootstrap.

Če vprašate mene, a Oblika materiala postaja tako pogost in tako je tudi. . . Privzeto je vseeno, da se bomo kmalu pritožili nad tem, kot to počnemo pri vseh spletnih mestih Bootstrap-a-istih-isti problem. Kljub temu je to prijeten okvir za začetek.

Čista

Je Yahoo mrtev?

Ne, to vprašanje ni preusmeritev, ampak poudarja pomembno opažanje: Yahoo je zgradil Čisti okvir in izdana pod licenco BSD.

Hiter pogled me navduši in sprašujem se, zakaj ta ponudba večini ne pozna. Kakor koli, tisto, kar naredi Pure, dobro čist, je, da je to čisti okvir CSS. �� Dejansko so razvijalci presegli kilometrino in jo razdelili na različne module CSS, ki jih lahko po potrebi uvozite. Če potrebujete samo omrežni sistem, vam ni treba uvoziti celotnega CSS-ja in dodati času nalaganja spletnega mesta..

Mreža Pure je na voljo v različnih okusih: 5-točkovni, dvotočkovni, 24-točkovni itd., Zato je pri ustvarjanju stolpcev na voljo veliko več prilagodljivosti. Pure privzeto ni najboljši videz okvira CSS, vendar lahko vidim, kako to prinaša vrednost tistim, ki želijo rešiti majhen problem s CSS v svojem uporabniškem vmesniku in se spopadejo pri “koristnih” privzetih nastavitvah, v katerih so prišli drugi okviri.

Okostje

Kot lahko vidite na posnetku zaslona, Okostje je tako minimalen, da se niti ne imenuje CSS okvir, knjižnica ali celo modul. To je plošča, ki vsebuje samo 400 vrstic izvorne kode! Neverjetno? Mislim, da je, vendar da bi stvari postavil v perspektivo, je bil skelet zasnovan za drobne ali majhne projekte, ki potrebujejo malo več kot postavitve in pozicioniranje.

Vredno pogledati; navsezadnje, kdo ve, skelet je morda tisto, kar ste iskali ves čas!

Miligram

Zadnji na seznamu je Miligram, okvir CSS, zasnovan za hitrost in produktivnost. Razvijalci so ga ohranili v velikosti manj kot 2 KB, kar po današnjih standardih pomeni veliko.

Milligram je malce zabaven okvir CSS, s katerim boste veseli dela. Podaljšanje je enostavno in z nekaj vrsticami CSS po meri lahko spremenite videz po želji.

Torej, kateri okvir CSS je najboljši?

Priznajte, že prej ste postavljali podobna vprašanja in dobili naslednji razočarajoč odgovor: nobenega. �� Izbira okvira (ali orodja ali celo človeka v vašem življenju) je odvisna od številnih dejavnikov. Če želite moj nasvet, tukaj je: Izločite hrup. Ker ljudje noro čakajo na nekaj novega in sijočega, še ne pomeni, da se ga morate naučiti ali pa boste zaostali. Poizkusiti nove stvari je super, toda tekanje po krogih v iskanju popolnega orodja je, no, škoda.

Kateri od teh okvirov ste torej preizkusili? Ali je morda zunaj kaj presenetljivega, kar sem pravkar pogrešal? Sporočite mi v komentarjih, prosim. Ljubezen, sovraštvo, naključni pozdrav, vsi so 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