Najboljših 5 možnosti za zagonske trakove

Bootstrap je povsod, vendar ni vedno pravo orodje za to delo. Tu je nekaj odličnih alternativ!


Če boste te dni naključno preverili izvorno kodo sprednjega dela spletnega mesta, je priložnost, da boste pod njim našli Bootstrap. Vsi smo se tako navadili na koncepte, kot so vsebnik-tekočina, vrstice, col-sm-6 itd., Da si težko predstavljamo, da je kakršen koli drug slog razvoja sprednjega dela sploh mogoč. Ko torej moramo zgraditi naslednji projekt, nezavedno posežemo po Bootstrapu. Kljub temu pa priljubljenost Bootstrap ne ustreza vsem projektom in potrebam.

Pravzaprav za res vitke sprednje strani, nalaganje vseh Bootstrap CSS in JS lahko povzroči večje napihnjenosti.

Ta članek ima dva namena:

  1. Omogočite Bootstrap-ove alternative, ki niso podobne sistemu Bootstrap
  2. Pojasnite, zakaj boste morda želeli razmisliti o teh alternativah preko Bootstrapa

Menim, da je del razlage res pomemben, saj se v večini primerov ljudje sploh ne zavedajo, da imajo težave ali da s pobiranjem Bootstrapa otežujejo svoje delo. Na koncu upoštevajte, da to nikakor ni objava proti zagonu. Obožujem Bootstrap 4 in ga uporabljam, kadar lahko. Potem pa sem individualni razvijalec, ki mora razmišljati o uporabi najbolj priljubljene rešitve; tudi jaz nisem razvijalka uporabniškega vmesnika, zato me ne skrbi preveč stvari, ko oblikujem svoje sprednje strani.

In s tem si poglejmo, kakšne alternative imamo.

Flexbox Grid

Razmislite o tem za trenutek: največji razlog, da ste začeli uporabljati Bootstrap in ga še vedno uporabljate, je njegov sistem omrežja. Seveda je bilo treba nekaj navaditi na razrede vrstice, col-md-6 itd., Zdaj pa je druga narava razmišljati o postavitvi v smislu vrstic, stolpcev, odmikov itd..

In če si iskren do sebe, boš ugotovil, da je vse ostalo v Bootstrapu nekaj sitnega. Ne glede na to, ali delate obrazce, navigacijo, gumbe, tabele ali kaj drugega, si lahko zapomnite na tečaje. Če ste kot jaz, še vedno niste navajeni na vse razrede in kaj počnejo, pogosto pa uporabljate Bootstrap samo za mrežo in vse druge CSS napišete.

Če je odgovor da, bi lahko naredili veliko bolje Flexbox Grid.

Flexbox Grid, kot že ime pove, je mrežni sistem, ki temelji na CSS Flexbox lastnosti. Toda za razliko od tehnike CSS je vsa kompleksnost lepo odvzeta, tako da se osredotočite le na postavitev elementov tako, kot želite. Najboljši del je, da vsa imena kode in razredov posnemajo tisto, kar bi želeli v programu Bootstrap 4, kar pomeni, da za preklop med tema dvema orodjema ni potrebno mentalno trenje. Na primer, tukaj je videti, kako izgleda koda za “prostor okoli” v Flexbox Grid:

naokoli

naokoli

naokoli

Zmanjšana datoteka CSS za ta sistemski sistem znaša le 10,7 KB, kar vam prihrani nekaj sto KB pri končni velikosti prenosa. Danes mi je Flexbox Grid najljubši, saj se ne želim boriti proti Bootstrapu, da bi ga popolnoma prilagodil. Rada začnem z elementi vanilije in jih sama oblikujem, s pomočjo Flexbox Grid, kjer koli moram.

Naučite se Flexbox tukaj, na spletu.

PureCSS

Ne bi bilo lepo, če bi program Bootstrap razdelili na module in lahko uvozili samo potreben modul?

No, PureCSS šel naprej in naredil prav to – to je niz modulov, ki pokrivajo različna funkcionalna področja spletnega mesta. Izberete lahko eno ali vse, vendar velikost prenosa ne bo presegla 3,7 KB!

Ja, prav ste prebrali.

Vsi moduli, ki so združeni in gzipirani, znašajo 3,7 KB, čeprav posamezno pomenijo več. Omrežni modul znaša le 0,8 KB, osnovni modul pa 1,0 KB. Ekipa, ki stoji za PureCSS, pravi, da je bila zgrajena v celoti z mobilnimi napravami in zato je bila vsaka vrstica CSS skrbno pregledana, da bi bila učinkovitost pred vključitvijo.

Recimo, da potrebujete samo modul mreže in obrazcev. No, preprosto prenesite ta dva (skupaj z modulom Base) in končali bi z manj kot 3,4 KB! CSS iz modulov gumbov, tabel in menijev ni treba vključevati, če jih ne boste uporabljali.

PureCSS ima svoje razrede, in nastala koda ne oponaša Bootstrap-a, na katerega ste morda zelo vajeni:

Lorem Ipsum

Dolor sit Amet

Naporna poroda

Praesent consectetur

Opazili boste, da ni več mreže z 12 stolpci. PureCSS ima svoj mrežni sistem, ki določa, kakšno širino mora imeti stolpec. Torej, pure-u-lg-1-4 pomeni, da bi moral ta element na velikih zaslonih zavzeti 1/4 ali 25% razpoložljive širine. Na voljo so tudi širine 1/5.

Na splošno je PureCSS osvobajajoče in neverjetno CSS orodje (ogrodje?), Ki ga lahko izbirate po potrebi. Kljub temu gre za precej veliko krivuljo vpisa in učenja, saj se morate naučiti novega (nekoliko drugačnega) načina početja.

PureCSS ima tudi svoje razrede in privzete stajlinge, tako da se ne razlikuje preveč od Bootstrapa.

Zimit

The Zimit Okvir je na tem seznamu nekakšen nenavaden način. Da, to je okvir za gradnjo uporabniških vmesnikov, vendar je namenjen določenim vrstam uporabniškega vmesnika: makete.

Včasih je treba razviti sprednji del za prikaz delovanja izdelka. Idealen način za to bi bil seveda vključitev oblikovalca / razvijalca uporabniškega vmesnika in ustvarjanje vzorcev na enem od naprednih orodij za žične okvirje (Moqups, Blasmic, itd.). Strani bi bile popolne za slikovne pike, barvna shema je elegantna in dobro izbrana, strani pa bi bile odprte za udeležbo, preglede, komentarje itd..

Resnično življenje ni idealno in pogosto si edini moški, ki mora nositi vse klobuke in opraviti delo. Takrat želite okvir, ki:

  • Omogoča vam kodiranje v HTML / CSS
  • Je lahka
  • Ima obsežno zbirko temeljnih komponent
  • Ima spodoben in dosleden slogovni jezik
  • Če je mogoče, spominja na “sivkast” ton zasnove žičnega okvirja
  • Je enostavno naučiti
  • Ima vgrajen predprocesor CSS

Zimit preveri vsa ta polja. Veliko je le 84 KB in ima široko paleto komponent, med katerimi lahko izbirate. Tukaj je nekaj primerov, ki so se mi zdeli zelo privlačni, saj bo njihovo kodiranje trajalo veliko časa.

Pogled na drevo

Krušna drobtina

Zavihki

Obstaja veliko več dobrot za raziskovanje. Oglejte si jih tukaj.

Poglejmo, kako izgleda koda. Tukaj je opisano, kako uporabljate omrežni sistem v Zimitu:

4 stolpci
4 stolpci

4 stolpci
4 stolpci

“C” tukaj pomeni “stolpec”, zato “c4” pomeni stolpec, ki obsega štiri enote (mreža je 12 velikosti, tako kot Bootstrap). Zelo podoben Bootstrapu in po mojem mnenju zelo intuitiven.

Skupno je Zimit popoln in enostaven okvir za razvoj prototipov uporabniškega vmesnika, ki so odzivni in hitro izgledajo dobro. Bolje kot Bootstrap (ko gre za izdelavo prototipov), ker je Bootstrap veliko večji prenos, zato je oblikovanje dobro lepljivo.

HTML KickStart

Hitrost je pri večini projektov, ki jih gradite. Največja ovira pri razvoju spletnih strani je sprednji del, največji “zavlačevalec” pri razvoju v ospredju pa je potreba po kodiranju elegantnih in interaktivnih komponent. Ker se komponenta lahko obnaša in obstaja veliko velikosti zaslona za upravljanje, kodiranje in upravljanje komponent, lahko postane razvijalka nočna mora.

HTML KickStart ponuja alternativo.

Preprosto povedano; gre za zbirko res elegantnih komponent, ki jih lahko preprosto vključite v svoje projekte in drastično zmanjšate čas razvoja. Tukaj sem našel nekaj lepih komponent:

Spustitev

Gumbi

Zavihki (v središču in z ikonami)

Materializirajte

Če vam je Bootstrap všeč, ker ima pripravljeno rešitev za vse običajne težave s spletnim oblikovanjem, vendar ste ljubitelj materiala Style design, poskusite Materializirajte.

Materializiranje je večinoma tako kot Bootstrap – 12-točkovni sistem mreže, odmiki in poznane komponente, kot so obrazci, kartice itd. Vendar pa ima določene dobrote, ki lahko prijajo mnogim.

Push-pull

Funkcija “push / pull” Materializira CSS vam omogoča preureditev stolpcev. To spominja na nov standard Grid CSS, kjer je postavitev drugačna od vrstnega reda elementov.

Ta div je širok 7 stolpcev, ki jih v desno potisnejo 5 stolpci.
5-stebri široko vleče v levo za 7 stolpcev.

Posledica tega je:

Opazili boste, da so stolpci zamenjali mesta, kar je v tradicionalnem CSS-ju, ki temelji na sistemu Bootstrap, morda nedosegljivo..

JavaScript dobrote

Obstaja kar nekaj funkcij in učinkov JavaScript, ki jih dobite z materialom. Nasveti za nasvete, zdravice (efemerna obvestila, podobna Androidu), Parallex, Pushpin itd. So nekateri od njih. En res neverjeten učinek, ki mi je bil všeč, je FeatureDiscovery, ki v bistvu omogoča, da na nekem dogodku označite element na strani (recimo pritisk gumba), da uporabnika opozorite na ta element. Težko je v celoti opisati z besedami, zato pojdite na https://materializacss.com/feature-discovery.html, da vidite, kaj mislim.

V celoti je Materialize odlična alternativa Bootstrapu ali tistim, ki želijo sprejeti popoln materialni CSS okvir.

Zaključek

Bootstrap je sinonim za odziven dizajn. Bootstrap je populariziral izraz “mobilni prvi dizajn” in pokazal, kako je to mogoče storiti. Medtem ko Bootstrap opravi nalogo večino časa, samo opravljanje naloge ni vedno dovolj. Če menite, da vas Bootstrap omejuje in da so vaše potrebe posebne, vam bo pomagala ena od naštetih možnosti. ��

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