Top 5 alternatív zavádzania systému

Bootstrap je všade, ale nie je to vždy ten správny nástroj pre danú úlohu. Tu je niekoľko skvelých alternatív!


Ak v týchto dňoch náhodne skontrolujete zdrojový kód klientskeho rozhrania webových stránok, je pravdepodobné, že pod ním nájdete zavádzaciu platformu. Všetci sme si zvykli na koncepty, ako je tekutina z kontajnerov, riadok, col-sm-6 atď., Že je ťažké si predstaviť, že je dokonca možný akýkoľvek iný štýl rozvoja frontendu. A tak keď musíme stavať ďalší projekt, nevedome siahneme po Bootstrap. To znamená, že popularita neznamená, že sa Bootstrap hodí pre všetky projekty a potreby.

V skutočnosti, pre skutočne štíhle frontendy, načítavanie všetkých Bootstrap CSS a JS môžu spôsobiť veľké nadúvanie.

Tento článok má dva ciele:

  1. Poskytnite živé alternatívy bez Bootstrapu ako Bootstrap
  2. Vysvetlite, prečo by ste mohli zvážiť tieto alternatívy v prípade systému Bootstrap

Myslím si, že časť s vysvetlením je naozaj dôležitá, pretože vo väčšine prípadov si ľudia ani neuvedomujú, že majú problém alebo že svoju prácu sťažujú vyzdvihnutím Bootstrapu. Nakoniec nezabudnite, že toto nie je nijaký príspevok proti zavádzaniu systému. Milujem Bootstrap 4 a používam ho kedykoľvek môžem. Ale potom som individuálny vývojár, ktorý musí premýšľať o použití najpopulárnejšieho riešenia; tiež nie som vývojár používateľského rozhrania per se, takže sa nemusím báť príliš veľa vecí, keď budujem svoje klientske rozhrania.

A s tým sa pozrime, aké alternatívy máme.

Mriežka Flexbox

Premýšľajte o tom na chvíľu: najväčším dôvodom, prečo ste začali používať Bootstrap a stále ho používate, je jeho sieťový systém. Určite to trvalo zvyknúť si na riadok, stĺpec-6, atď., Triedy, ale teraz je to druhá podstata premýšľať o rozložení, pokiaľ ide o riadky, stĺpce, kompenzácie atď..

A ak ste k sebe úprimní, zistíte, že všetko ostatné v službe Bootstrap je s troškou práce. Existuje veľa tried, ktoré si treba zapamätať, či už robíte formuláre, navigáciu, tlačidlá, tabuľky alebo čokoľvek iné. Ak ste ako ja, stále ste si nezvykli na všetky triedy a na to, čo robia, a často používate Bootstrap iba pre mriežku a sami napíšete všetky ostatné CSS.

Ak áno, dokážete s tým oveľa lepšie Mriežka Flexbox.

Grón Flexbox, ako už názov napovedá, je mriežkovým systémom založeným na CSS flexboxu Vlastnosti. Na rozdiel od techniky CSS je však všetka zložitosť pekne odstránená, takže sa sústredíte iba na umiestnenie prvkov tak, ako chcete. Najlepšie na tom je, že všetky kódy a názvy tried napodobňujú to, čo by ste chceli v Bootstrap 4, čo znamená, že prepínanie medzi týmito dvoma nástrojmi vyžaduje nulové mentálne trenie. Napríklad, ako vyzerá kód „space around“ v mriežke Flexbox:

okolo

okolo

okolo

Minimalizovaný súbor CSS pre tento mriežkový systém je iba 10,7 KB, ktorý vám ušetrí niekoľko stoviek kB v konečnej veľkosti stiahnutia. V súčasnosti je Flexbox Grid mojou obľúbenou, pretože sa nechcem brániť Bootstrapu, aby som ho úplne prispôsobil. Rád začínam s vanilkovými prvkami a navrhujem ich sám, pomocou siete Flexbox Grid kdekoľvek potrebujem.

učiť sa Flexbox tu, online.

PureCSS

Nebolo by pekné, keby bol Bootstrap rozdelený na moduly a mohli by ste importovať iba modul, ktorý ste potrebovali?

dobre, PureCSS už to urobil – je to sada modulov pokrývajúcich rôzne funkčné oblasti webovej stránky. Môžete si vybrať, či chcete stiahnuť jeden alebo všetky, a napriek tomu veľkosť sťahovania nepresiahne 3,7 KB!

Áno, čítate to správne.

Všetky moduly, keď sú zoskupené a gzipované, sú 3,7 KB, hoci jednotlivo predstavujú viac. Mriežkový modul je iba 0,8 KB, zatiaľ čo základný modul je 1,0 KB. Tím za PureCSS hovorí, že bol postavený výlučne s ohľadom na mobilné zariadenia, a preto bola každá línia CSS starostlivo preskúmaná z hľadiska efektívnosti predtým, ako bola zahrnutá.

Povedzme, že potrebujete iba modul mriežky a formuláre. Stačí si ich stiahnuť (spolu s modulom Base) a budete hotoví za menej ako 3,4 KB! Ak ich nebudete používať, nemusíte do nich vkladať moduly CSS z tlačidiel, tabuliek a ponúk.

PureCSS má svoje triedy a výsledný kód nenapodobňuje zavádzaciu platformu, na ktorú by ste mohli byť veľmi zvyknutí:

Lorem Ipsum

Dolor Sit Amet

Proident laborum

Predsedajúci poradca

Všimnite si, že už neexistuje mriežka s 12 stĺpcami. PureCSS má svoj mriežkový systém, ktorý určuje, akú veľkú šírku by mal mať stĺpec. Čistý u-lg-1-4 znamená, že tento prvok by mal zaberať 1/4 alebo 25% dostupnej šírky na veľkých obrazovkách. K dispozícii sú aj šírky v násobkoch 1/5.

Celkovo vzaté, PureCSS je oslobodzujúci a úžasný nástroj CSS (framework?), Z ktorého si môžete vybrať podľa potreby. To znamená, že prichádza s primeraným množstvom zakúpenia a učenia sa, pretože sa musíte naučiť nový (trochu odlišný) spôsob práce.

PureCSS má tiež svoje vlastné triedy a predvolený štýl, takže sa príliš nelíši od Bootstrapu.

Zimit

Zimit rámec je v tomto zozname trochu podivný. Áno, je to rámec na vytváranie používateľských rozhraní, ale je zameraný na konkrétne typy používateľských rozhraní: makety.

Sú časy, keď musíte vyvinúť klientske rozhranie na preukázanie fungovania produktu. Ideálnym spôsobom, ako to dosiahnuť, by samozrejme bolo zapojiť návrhára / vývojára používateľského rozhrania a vytvoriť makety jedného z pokročilých nástrojov na vytváranie drôtov (Moqups, Blasmic atď.). Stránky by boli dokonalé v pixeloch, farebná schéma bola elegantná a dobre vybraná a stránky by boli otvorené pre účasť, recenzie, komentáre atď..

Skutočný život však nie je ideálny a často ste jediný človek v práci a musíte nosiť všetky klobúky a svoju prácu dokončiť. V tej dobe chcete rámec, ktorý:

  • Umožňuje kódovať v HTML / CSS
  • Je ľahký
  • Má rozsiahlu zbierku základných komponentov
  • Má slušný a konzistentný štýl jazyka
  • Ak je to možné, pripomína sa „sivastý“ tón drôtového dizajnu
  • Dá sa ľahko naučiť
  • Má zabudovaný nejaký preprocesor CSS

Zimit skontroluje všetky tieto políčka. Má iba 84 kB a má na výber široký výber komponentov. Tu je niekoľko príkladov, ktoré mi pripadajú skutočne príťažlivé, pretože ich samotné kódovanie bude trvať veľa času.

Stromový pohľad

strúhanka

záložky

Existuje mnoho ďalších dobrôt na preskúmanie. Skontroluj ich tu.

Pozrime sa, ako vyzerá kód. Takto by ste použili mriežkový systém v spoločnosti Zimit:

4 stĺpce
4 stĺpce

4 stĺpce
4 stĺpce

Písmeno „c“ tu znamená „stĺpec“, takže „c4“ znamená stĺpec, ktorý pokrýva štyri jednotky (mriežka má veľkosť 12, rovnako ako Bootstrap). Veľmi podobné Bootstrapu a podľa môjho názoru veľmi intuitívne.

Celkovo vzaté, Zimit je kompletný a ľahký rámec na vývoj prototypov používateľského rozhrania, ktoré reagujú a rýchlo vyzerajú dobre. Je to lepšie ako Bootstrap (pokiaľ ide o prototypovanie), pretože Bootstrap je oveľa väčší súbor na stiahnutie a výsledný dizajn je lepkavý..

HTML KickStart

Vo väčšine projektov, ktoré zostavujete, je rýchlosť rozhodujúca. Najväčšou prekážkou pri vývoji webov je front-end časť a najväčší „oneskorovač“ v front-end vývoji je potreba kódovania elegantne vyzerajúcich interaktívnych komponentov. Pretože existuje veľa spôsobov, ako sa komponent môže správať, a existuje veľa veľkostí obrazovky, ktoré sa dajú spravovať, kódovať a spravovať komponenty, a preto sa pre vývojárov môže stať nočnou morou..

HTML KickStart ponúka alternatívu.

Zjednodušene povedané; je to zbierka skutočne elegantných komponentov, ktoré môžete jednoducho vložiť do svojich projektov a drasticky skrátiť dobu vývoja. Tu sú niektoré pekné komponenty, ktoré som našiel:

rozbaľovací

tlačidla

Karty (centrované a s ikonami)

Materialise

Ak sa vám páči Bootstrap, pretože má hotové riešenie všetkých bežných problémov s webovým dizajnom, ale ste fanúšikom štýlu Material Design, mali by ste vyskúšať Materialise.

Materialize je väčšinou rovnako ako systém Bootstrap – 12-bodový systém mriežky, ofset a známe komponenty, ako sú formuláre, karty atď. Má však určité dobroty, ktoré môžu osloviť mnohých.

Tlačiť ťahať

Funkcia push / pull v Materialize CSS vám umožňuje zmeniť poradie stĺpcov. Toto pripomína nový štandard mriežky CSS, kde sa rozloženie líši od usporiadania prvkov.

Tento diel div je široký 7 stĺpcov a napravo sa tlačí 5 stĺpcov.
5 stĺpcov široký ťahaný doľava o 7 stĺpcov.

Výsledkom je:

Všimnite si, že stĺpce zmenili miesta, čo je v tradičnej CSS založenej na Bootstrapoch pravdepodobne nedosiahnuteľné.

JavaScript dobroty

Existuje niekoľko funkcií a efektov JavaScriptu, ktoré sa dodávajú spolu s Materialize. Popisy, hrianky (prchavé oznámenia podobné Androidu), Parallex, pripináčika atď. Sú niektoré z nich. Jedným z naozaj úžasných efektov, ktoré sa mi páčili, je FeatureDiscovery, ktoré v podstate umožňuje zvýrazniť prvok na stránke pri nejakej udalosti (povedzme stlačením tlačidla), aby ste na tento prvok upozornili používateľa. Je ťažké to úplne opísať slovami, takže prejdite na stránku https://materializecss.com/feature-discovery.html a zistite, čo tým myslím.

Celkovo vzaté, Materialize je skvelou alternatívou k Bootstrapu alebo pre tých, ktorí chcú prijať plnohodnotný rámec CSS materiálu..

záver

Bootstrap je synonymom responzívneho dizajnu. Bootstrap popularizoval pojem „mobilný prvý dizajn“ a ukázal, ako sa to dá urobiť. Ale zatiaľ čo systém Bootstrap robí prácu väčšinou, nestačí ju len splnenie úlohy. Ak máte pocit, že vás systém Bootstrap obmedzuje a že vaše potreby sú zvláštne, pomôže vám niektorá z uvedených možností. ��

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