Top 5 alternativa za pokretanje

Područje za pokretanje opreme jest svugdje, ali nije uvijek pravi alat za posao. Evo nekoliko sjajnih alternativa!


Ako ovih dana nasumično provjerite izvorni kôd sučelja web stranice, vjerovatno je da ćete ispod pronaći Bootstrap. Svi smo se toliko navikli na koncepte kao što su tekućina s spremnikom, red, col-sm-6, itd., Da je teško zamisliti da je bilo koji drugi stil razvoja prednjeg kraja uopće moguć. I kad moramo izgraditi sljedeći projekt, nesvjesno posežemo za Bootstrapom. Međutim, popularnost Bootstrap-a ne čini prikladnim za sve projekte i potrebe.

Zapravo, za stvarno vitke prednje strane, učitavanje svih CSS za pokretanje sustava a JS može uzrokovati velike navale.

Ovaj članak ima dvije svrhe:

  1. Navedite alternative uživo poput Bootstrap-a
  2. Objasnite zašto biste možda trebali razmotriti te alternative preko Bootstrapa

Mislim da je dio objašnjenja jako važan jer u većini slučajeva ljudi uopće ne shvaćaju da imaju problem ili da otežavaju posao odabirom Bootstrapa. Na kraju, imajte na umu da ovo nije anti-Bootstrap post na bilo koji način. Obožavam Bootstrap 4 i koristim ga kad god mogu. Ali, tada sam individualni programer koji mora razmišljati o korištenju najpopularnijeg rješenja; također, sama po sebi nisam programer za korisničko sučelje, tako da ne brinem previše stvari prilikom izrade mojih prednjih strana.

I uz to, pogledajmo koje druge alternative imamo.

Flexbox Grid

Razmislite na trenutak: najveći razlog zbog kojeg ste počeli koristiti Bootstrap i dalje ga koristite je njegov mrežni sustav. Svakako, trebalo je malo navikavanja na red, klase-md-6 itd., Klase, ali sada je druga priroda da smisli izgled u smislu redaka, stupaca, odstupanja itd..

A ako ste iskreni prema sebi, otkrit ćete da je sve ostalo u Bootstrapu malo dosadno raditi. Ima puno satova koje treba zapamtiti bilo da radite obrasce, navigaciju, gumbe, tablice ili bilo što drugo. Ako ste poput mene, još uvijek se niste navikli na sve časove i na ono što rade, a Bootstrap često koristite samo za mrežu, a sami pišete sve ostale CSS-ove.

Ako da, mogli biste učiniti puno bolje Flexbox Grid.

Flexbox Grid, kao što i ime govori, je mrežni sustav temeljen na CSS-u flexbox Svojstva. Međutim, za razliku od CSS tehnike, sva složenost je lijepo apstrahirana, tako da se fokusirate samo na postavljanje elemenata na način koji želite. Najbolji dio je taj što svi nazivi koda i klase oponašaju ono što biste željeli u programu Bootstrap 4, što znači da za prebacivanje između ova dva alata nije potrebno mentalno trenje. Na primjer, evo kako izgleda kod “prostora oko” u Flexbox Gridu:

oko

oko

oko

Komplicirana CSS datoteka za ovaj mrežni sustav iznosi svega 10,7 KB čime se postigne nekoliko stotina KB u konačnoj veličini za preuzimanje. Ovih je dana Flexbox Grid najdraži jer se ne želim boriti s Bootstrapom kako bih ga u potpunosti prilagodio. Volim započeti s elementima vanilije i sama ih oblikujem, koristeći Flexbox Grid gdje god trebam.

Naučiti Flexbox ovdje, na mreži.

PureCSS

Ne bi li bilo lijepo da je Bootstrap podijeljen na module i možete uvesti samo onaj modul koji vam je potreban?

Dobro, PureCSS išla je upravo to – to je skup modula koji pokrivaju različita funkcionalna područja web stranice. Možete odabrati jedan ili sve, ali veličina preuzimanja neće prelaziti 3,7 KB!

Da, dobro ste pročitali.

Svi moduli u paketu i gipki su 3,7 KB, iako pojedinačno imaju više. Mrežni modul iznosi samo 0,8 KB, dok je osnovni modul 1,0 KB. Tim koji stoji iza PureCSS-a kaže da je izgrađen u potpunosti s obzirom na mobilne uređaje, i da je stoga svaki red CSS-a pažljivo pregledan radi učinkovitosti prije nego što je uključen.

Recimo da vam treba samo modul rešetka i obrazaca. Pa, samo preuzmite ovo dvoje (zajedno s modulom Base), a završićete s manje od 3,4 KB! Ne morate uključivati ​​CSS iz modula gumba, tablica i izbornika ako ih ne želite koristiti.

PureCSS, međutim, ima svoje klase, a rezultirajući kôd ne oponaša Bootstrap na koji biste mogli biti vrlo navikli:

Lorem Ipsum

Dolor Sit Amet

Proident Laborum

Praesent consectetur

Primijetit ćete da više nema rešetku sa 12 stupaca. PureCSS ima svoj mrežni sustav koji određuje širinu stupca. Dakle, čisto-u-lg-1-4 znači da bi ovaj element trebao zauzeti 1/4 ili 25% dostupne širine na velikim ekranima. Dostupne su i širine od 1/5.

Sve u svemu, PureCSS je oslobađajući i nevjerojatan CSS alat (okvir?) Koji možete odabrati i odabrati prema potrebi. To je rečeno: dolazi s popriličnom krivuljom buy-ina i učenja, jer trebate naučiti novi (malo drugačiji) način rada.

PureCSS također ima svoje klase i zadani stil, tako da se on ne razlikuje previše od Bootstrapa.

Zimit

Zimit Okvir je na ovom popisu neka neobična zamjena. Da, to je okvir za izradu korisničkih sučelja, ali usmjeren je na određene vrste korisničkog sučelja: makete.

Postoje slučajevi kad morate razviti prednji dio da biste prikazali funkcioniranje proizvoda. Idealan način da se to postigne bi, naravno, bilo da se uključi dizajner / programer korisničkog sučelja i kreiraju makete na jednom od naprednih alata za izradu žičara (Moqups, Blasmic itd. Padnu na pamet). Stranice bi bile savrsene za piksele, shema boja glatka i dobro odabrana, a stranice bi bile otvorene za sudjelovanje, recenzije, komentare itd..

Ali stvarni život nije idealan, a često ste jedini čovjek na poslu i morate nositi sve kape i obaviti posao. U ono vrijeme želite okvir koji:

  • Omogućuje vam kodiranje u HTML / CSS
  • Je lagan
  • Sadrži opsežnu zbirku osnovnih komponenti
  • Ima pristojan i dosljedan stilski jezik
  • Ako je moguće, podsjeća na “sivkast” ton žičane konstrukcije
  • Lako je naučiti
  • Ima ugrađen neki CSS predprocesor

Zimit provjerava sve ove okvire. Veličine je samo 84 KB i ima širok spektar komponenti za izbor. Evo nekoliko primjera za koje sam smatrao da su zaista privlačni, jer će vam kodiranje sami oduzeti puno vremena.

Pogled na drvo

breadcrumb

Kartice

Postoji još mnogo dobrota za istraživanje. Provjeri ih ovdje.

Pogledajmo kako izgleda kod. Evo kako biste koristili mrežni sustav u Zimitu:

4 stupca
4 stupca

4 stupca
4 stupca

“C” ovdje znači “stupac”, pa “c4” znači stupac koji obuhvaća četiri jedinice (mreža je 12 veličina, baš kao i Bootstrap). Vrlo sličan Bootstrapu, i po meni vrlo intuitivan.

Sve u svemu, Zimit je cjelovit i jednostavan okvir za razvoj UI prototipa koji su responzivni i brzo izgledaju dobro. Bolje je od Bootstrapa (kada je u pitanju prototipiranje), jer je Bootstrap mnogo veće preuzimanje i rezultirajući dizajn je, pa, ljepljiv.

HTML KickStart

U većini projekata koje gradite brzina je presudna. Najveća prepreka brzini u razvoju web stranica je prednji dio, a najveće “odgađalo” u razvoju napretka je potreba za kodiranjem elegantnih, interaktivnih komponenti. Budući da postoji mnogo načina na koji se neka komponenta može ponašati, a postoji mnogo veličina zaslona za upravljanje, kodiranje i upravljanje komponentama može postati noćna mora za programera.

HTML KickStart nudi alternativu.

Jednostavno rečeno; to je kolekcija stvarno elegantnih komponenti koje jednostavno možete upasti u svoje projekte i drastično smanjiti vrijeme razvoja. Evo nekoliko lijepih komponenti koje sam pronašao:

padajući

tipke

Kartice (u središtu i sa ikonama)

ostvariti

Ako vam se sviđa Bootstrap zbog činjenice da ima spremno rješenje za sve uobičajene probleme s web dizajnom, ali vi ste ljubitelj stila dizajna materijala, trebali biste isprobati ostvariti.

Materijaliziranje je uglavnom isto kao Bootstrap – sustav s mrežom u 12 točaka, offset i poznate komponente poput obrazaca, kartica itd. Međutim, on ima određene dobrote koje mogu privući mnoge.

Gurni povuci

Značajka push / pull materijala Materialize CSS omogućuje vam redoslijed redoslijeda stupaca. Ovo podsjeća na novi CSS Grid standard, gdje je izgled različit od rasporeda elemenata.

Ovaj je div širok 7 stupaca i gurnut udesno za 5 stupaca.
Šest stupaca široko povučenih s lijeve strane 7-stupaca.

To rezultira sljedećim:

Primijetit ćete da su stupci zamijenili mjesta, što je možda nešto nedostižno u tradicionalnom CSS-u koji se temelji na Bootstrapu..

JavaScript dobrote

Postoji nekoliko JavaScript značajki i efekata koje isporučujemo s Materialize. Savjeti za savjete, tosti (efemerne obavijesti poput Android-a), Parallex, Pushpin itd., Neki su od njih. Jedan zaista nevjerojatan učinak koji mi se svidio je FeatureDiscovery, koji vam u osnovi omogućuje označavanje elementa na stranici u nekom događaju (recimo, pritiskanje gumba) kako biste privukli pažnju korisnika na taj element. Teško je to u potpunosti opisati riječima, zato prijeđite na https://materializujk.com/feature-discovery.html da biste vidjeli što mislim.

Sve u svemu, Materialize je izvrsna alternativa Bootstrapu ili za one koji žele usvojiti potpuno opremljeni materijal CSS okvira.

Zaključak

Bootstrap je sinonim za osjetljiv dizajn. Upravo je Bootstrap popularizirao pojam mobilni dizajn i pokazao kako se to može učiniti. No dok Bootstrap posao obavlja većinu vremena, samo izvršavanje posla nije uvijek dovoljno. Ako smatrate da vas Bootstrap ograničava i da su vaše potrebe posebne, jedna od ovdje navedenih opcija pomoći će vam. ��

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