A Bootstrap mindenhol megtalálható, de nem mindig a megfelelő eszköz a munkához. Íme néhány nagyszerű alternatíva!
Ha manapság véletlenszerűen ellenőrzi egy webhely kezelőfelületének forráskódját, nagy eséllyel találja alatta a Bootstrapet. Mindannyian annyira hozzászoktunk az olyan fogalmakhoz, mint a konténer-fluid, a sor, a col-sm-6 stb., hogy nehéz elképzelni, hogy a front-end fejlesztés bármilyen más stílusa lehetséges. Így amikor meg kell építenünk a következő projektet, öntudatlanul a Bootstrap-hez nyúlunk. Ennek ellenére a népszerűség nem teszi a Bootstrapet minden projekthez és igényhez megfelelővé.
Valójában az igazán karcsú frontendeknél az összes betöltése Bootstrap CSS és a JS jelentős puffadást okozhat.
Ennek a cikknek két célja van:
Szerintem a magyarázat nagyon fontos, mert a legtöbb esetben az emberek észre sem veszik, hogy problémájuk van, vagy hogy megnehezítik a munkájukat a Bootstrap felvételével. Végül, kérjük, vegye figyelembe, hogy ez semmiképpen sem Bootstrap-ellenes bejegyzés. Szeretem a Bootstrap 4-et, és amikor csak tudom, használom. De akkor egyéni fejlesztő vagyok, akinek a legnépszerűbb megoldás használatán kell gondolkodnia; Emellett nem vagyok UI fejlesztő önmagában, így nem aggódom túl sok dolog miatt, amikor kiépítem a kezelőfelületeimet.
És ezzel együtt nézzük meg, milyen alternatíváink vannak.
Tartalomjegyzék
Flexbox rács
Gondoljon bele egy percre: a legnagyobb ok, amiért elkezdte használni a Bootstrap-et, és még mindig használja, a rácsrendszere. Persze kellett némi szoktatás a sor, col-md-6 stb. osztályokhoz, de most már természetes, hogy sorokat, oszlopokat, eltolásokat stb.
És ha őszinte vagy önmagához, rá fog jönni, hogy a Bootstrapben minden mással nehéz dolgozni. Rengeteg osztályra kell emlékezni, akár űrlapokat, navigációt, gombokat, táblázatokat vagy bármi mást csinál. Ha olyan vagy, mint én, még mindig nem szoktad meg az összes osztályt és azt, amit csinálnak, és gyakran csak a rácshoz használod a Bootstrapet, és magad írod az összes többi CSS-t.
Ha igen, sokkal jobbat tudna csinálni Flexbox rács.
A Flexbox Grid, ahogy a neve is sugallja, egy CSS-en alapuló grid rendszer Flexbox tulajdonságait. A CSS technikával ellentétben azonban az összes bonyolultság szépen le van vonva, így Ön csak az elemek kívánt módon történő elhelyezésére összpontosít. A legjobb az egészben az, hogy az összes kód- és osztálynév azt utánozza, amit a Bootstrap 4-ben szeretnél, ami azt jelenti, hogy a két eszköz közötti váltás nulla mentális súrlódást igényel. Például a következőképpen néz ki a „körülötti tér” kódja a Flexbox Gridben:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
Ennek a grid-rendszernek a kicsinyített CSS-fájlja mindössze 10,7 KB, így több száz KB-ot takaríthat meg a végső letöltési méretben. Manapság a Flexbox Grid a kedvencem, mivel nem akarok harcolni a Bootstrap ellen a teljes testreszabásért. Szeretek a vanília elemekkel kezdeni, és saját magam formázom őket, ahol csak kell, használom a Flexbox Grid-et.
Tanul Flexbox itt, online.
PureCSS
Nem lenne jó, ha a Bootstrap modulokra lenne osztva, és csak a szükséges modult tudnád importálni?
Jól, PureCSS előrement, és pontosan ezt tette – ez egy olyan modulkészlet, amely egy webhely különböző funkcionális területeit fedi le. Választhat egyet vagy az összeset, de a letöltési méret nem haladja meg a 3,7 KB-ot!
Igen, jól olvastad.
Az összes modul egybecsomagolva és gzip-csomagolva 3,7 KB-os, bár egyenként több. A grid modul mindössze 0,8 KB, míg az alapmodul 1,0 KB. A PureCSS mögött álló csapat azt állítja, hogy teljes egészében a mobileszközöket szem előtt tartva készült, így a CSS minden sorát alaposan átvizsgálták a hatékonyság érdekében, mielőtt belefoglalták volna.
Tegyük fel, hogy csak a rács- és űrlapmodulra van szüksége. Nos, csak töltse le ezt a kettőt (a Base modullal együtt), és kevesebb mint 3,4 KB alatt kész is lesz! Ha nem kívánja használni őket, nincs szükség a Gombok, Táblázatok és Menük modulok CSS-jének megadására.
A PureCSS-nek azonban megvannak a maga osztályai, és az eredményül kapott kód nem utánozza a Bootstrap-et, amelyhez már nagyon hozzászokott:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Észre fogja venni, hogy már nincs 12 oszlopos rács. A PureCSS-nek van rácsrendszere, amely meghatározza, hogy egy oszlop mekkora szélességű legyen. Tehát a pure-u-lg-1-4 azt jelenti, hogy ennek az elemnek a rendelkezésre álló szélesség 1/4-ét vagy 25%-át kell elfoglalnia nagy képernyőkön. 1/5 többszörösei is rendelkezésre állnak.
Összességében a PureCSS egy felszabadító és lenyűgöző CSS-eszköz (keretrendszer?), amelyből szükség szerint választhat. Ennek ellenére meglehetősen sok nevezési és tanulási görbével jár, mivel meg kell tanulnia egy új (kissé eltérő) módszert a dolgokhoz.
A PureCSS-nek saját osztályai és alapértelmezett stílusa is van, tehát ebben nem különbözik túlságosan a Bootstrap-től.
Zimit
Az Zimit A keretrendszer egyfajta furcsa kitörés ebben a listában. Igen, ez egy keretrendszer a felhasználói felületek létrehozásához, de bizonyos típusú felhasználói felületekre irányul: makettekre.
Van, amikor a termék működésének bemutatására szolgáló front-endet kell fejleszteni. Ennek ideális módja természetesen az lenne, ha bevonunk egy UI tervezőt/fejlesztőt, és elkészítjük a maketteket valamelyik fejlett drótkeretezési eszközön (Moqups, Blasmic stb., ha eszembe jut). Az oldalak pixel-tökéletesek lennének, a színvilág letisztult és jól megválasztott, az oldalak pedig nyitottak lennének részvételre, véleményezésre, hozzászólásra stb.
De a való élet nem ideális, és gyakran te vagy az egyetlen ember a munkában, és viselned kell minden kalapot, és el kell végezned a munkát. Ilyenkor olyan keretet szeretne, amely:
- Lehetővé teszi a kódolást HTML/CSS-ben
- Könnyű
- Alapvető összetevők széles gyűjteményével rendelkezik
- Tisztességes és következetes stílusnyelve van
- Ha lehetséges, a drótvázas kialakítás „szürkés” tónusára emlékeztet
- Könnyen megtanulható
- Beépített CSS előfeldolgozója van
Zimit bejelöli ezeket a négyzeteket. Mindössze 84 KB méretű, és az összetevők széles skálája közül választhat. Íme néhány példa, amelyeket igazán vonzónak találtam, mivel ezek önálló kódolása sok időt vesz igénybe.
Fanézet
Kenyérmorzsa
Tabs
Még sok felfedeznivaló van. Nézd meg őket itt.
Nézzük meg, hogyan néz ki a kód. Íme, hogyan használja a rácsrendszert a Zimitben:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
A „c” itt az „oszlopot” jelenti, tehát a „c4” olyan oszlopot jelent, amely négy egységet ölel fel (a rács 12 méretű, akárcsak a Bootstrap-é). Nagyon hasonlít a Bootstraphez, és véleményem szerint nagyon intuitív.
Összességében a Zimit egy teljes és egyszerű keretrendszer olyan UI prototípusok fejlesztéséhez, amelyek gyorsan reagálnak és jól néznek ki. Jobb, mint a Bootstrap (ami a prototípust illeti), mert a Bootstrap sokkal nagyobb letöltési lehetőség, és az így létrejövő dizájn, nos, ragacsos.
HTML KickStart
A legtöbb megépített projektben a sebesség kritikus. A webfejlesztés sebességének legnagyobb akadálya a front-end rész, a front-end fejlesztés legnagyobb „késleltetője” pedig az elegáns megjelenésű, interaktív komponensek kódolásának szükségessége. Mivel egy komponens sokféleképpen viselkedhet, és sok képernyőméretet kell kezelni, az összetevők kódolása és kezelése rémálommá válhat a fejlesztő számára.
HTML KickStart alternatívát kínál.
Egyszerűen fogalmazva; Ez egy igazán elegáns komponensek gyűjteménye, amelyeket egyszerűen beilleszthet projektjeibe, és drasztikusan lecsökkentheti a fejlesztési időt. Íme néhány szép összetevő, amit találtam:
Ledob
Gombok
Lapok (középen és ikonokkal)
Materializálni
Ha szereted a Bootstrap-et amiatt, hogy kész megoldást kínál az összes gyakori webtervezési problémára, de rajongsz az anyagtervezési stílusért, akkor próbáld ki Materializálni.
A Materialize többnyire olyan, mint a Bootstrap – 12 pontos rácsrendszer, eltolások és ismerős összetevők, mint például űrlapok, kártyák stb. Vannak azonban bizonyos finomságok, amelyek sokak számára vonzóak.
Ellenütemű
A Materialize CSS push/pull funkciója lehetővé teszi az oszlopok átrendezését. Ez az új CSS Grid szabványra emlékeztet, ahol az elrendezés eltér az elemek sorrendjétől.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
Ennek eredménye a következő:
Észreveheti, hogy az oszlopok helyet cseréltek, ami a hagyományos Bootstrap-alapú CSS-ben talán megvalósíthatatlan.
JavaScript finomságok
Jó néhány JavaScript-funkció és effektus található a Materialize-szel. Eszköztippek, Toasts (Android-szerű efemer értesítések), Parallex, Pushpin stb. Az egyik igazán elképesztő hatás, ami tetszett, a FeatureDiscovery, amely alapvetően lehetővé teszi, hogy valamilyen eseménynél (például gombnyomásnál) kiemeljünk egy elemet az oldalon, hogy felhívjuk a felhasználó figyelmét arra az elemre. Nehéz teljesen szavakkal leírni, ezért látogasson el a https://materializecss.com/feature-discovery.html oldalra, hogy lássa, mire gondolok.
Összességében a Materialize nagyszerű alternatíva a Bootstrap számára, vagy azoknak, akik egy teljes értékű Material CSS keretrendszert szeretnének elfogadni.
Következtetés
A Bootstrap a reszponzív dizájn szinonimája. A Bootstrap volt az, amely népszerűsítette a „mobile-first design” kifejezést, és megmutatta, hogyan lehet ezt megtenni. De míg a Bootstrap legtöbbször elvégzi a munkát, nem mindig elég a feladat elvégzése. Ha úgy érzi, hogy a Bootstrap korlátozza Önt, és az Ön igényei különlegesek, az itt felsorolt lehetőségek egyike segít. 🙂