Top 5 Bootstrap-alternatieven

Bootstrap is overal, maar het is niet altijd de juiste tool voor de klus. Hier zijn enkele geweldige alternatieven!

Als je tegenwoordig willekeurig de broncode van de front-end van een website controleert, is de kans groot dat je daaronder Bootstrap vindt. We zijn allemaal zo gewend geraakt aan concepten als container-fluid, row, col-sm-6, enz., dat het moeilijk voor te stellen is dat een andere stijl van front-end ontwikkeling zelfs mogelijk is. En dus wanneer we het volgende project moeten bouwen, grijpen we onbewust naar Bootstrap. Dat gezegd hebbende, maakt de populariteit Bootstrap niet geschikt voor alle projecten en behoeften.

In feite, voor echt slanke frontends, het laden van alle Bootstrap-CSS en JS kan een grote bloat veroorzaken.

Dit artikel heeft twee doelen:

  • Bied niet-Bootstrap-achtige live alternatieven voor Bootstrap
  • Leg uit waarom u deze alternatieven misschien wilt overwegen in plaats van Bootstrap
  • Ik denk dat het gedeelte met uitleg erg belangrijk is, omdat mensen in de meeste gevallen niet eens beseffen dat ze een probleem hebben of dat ze hun werk moeilijker maken door Bootstrap op te pakken. Houd er ten slotte rekening mee dat dit op geen enkele manier een anti-Bootstrap-paal is. Ik ben dol op Bootstrap 4 en gebruik het wanneer ik kan. Maar dan ben ik een individuele ontwikkelaar die moet denken aan het gebruik van de meest populaire oplossing; ook ben ik niet per se een UI-ontwikkelaar, dus ik maak me niet al te veel zorgen bij het uitbouwen van mijn front-ends.

    En laten we daarmee eens kijken welke alternatieven we hebben.

    Flexbox-raster

    Denk er eens over na: de grootste reden waarom u Bootstrap bent gaan gebruiken en het nog steeds gebruikt, is het rastersysteem. Natuurlijk was het even wennen aan de klassen rij, col-md-6, enz., maar nu is het een tweede natuur om een ​​lay-out te bedenken in termen van rijen, kolommen, offsets, enz.

    En als je eerlijk bent tegen jezelf, zul je merken dat al het andere in Bootstrap een beetje een karwei is om mee te werken. Er zijn talloze klassen om te onthouden, of je nu formulieren, navigatie, knoppen, tabellen of iets anders doet. Als je op mij lijkt, ben je nog steeds niet gewend aan alle klassen en wat ze doen, en gebruik je Bootstrap vaak alleen voor het raster en schrijf je alle andere CSS zelf.

    Zo ja, dan zou je veel beter kunnen doen met Flexbox-raster.

    Het Flexbox Grid is, zoals de naam al doet vermoeden, een rastersysteem gebaseerd op de CSS Flexbox eigendommen. In tegenstelling tot de CSS-techniek wordt alle complexiteit echter mooi weggeabstraheerd, zodat u zich alleen kunt concentreren op het plaatsen van elementen zoals u dat wilt. Het beste is dat alle code- en klassenamen lijken op wat je zou willen in Bootstrap 4, wat betekent dat het schakelen tussen deze twee tools geen mentale wrijving vereist. Hier ziet u bijvoorbeeld hoe de code voor de “ruimte eromheen” eruitziet in het Flexbox-raster:

    <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>

    Het verkleinde CSS-bestand voor dit rastersysteem is slechts 10,7 KB, wat je honderden KB bespaart in de uiteindelijke downloadgrootte. Tegenwoordig is de Flexbox Grid mijn favoriet omdat ik niet wil vechten met Bootstrap om het volledig aan te passen. Ik begin graag met vanille-elementen en style ze zelf, waarbij ik de Flexbox Grid gebruik waar ik maar wil.

      De fout 'iTunes kan geen verbinding maken met deze iPhone' oplossen

    Leren Flexbox hier, online.

    PureCSS

    Zou het niet mooi zijn als Bootstrap in modules was opgesplitst en je alleen de module kon importeren die je nodig had?

    We zullen, PureCSS is doorgegaan en heeft precies dat gedaan – het is een set modules die verschillende functionele delen van een website bestrijken. U kunt ervoor kiezen om één of alle te downloaden, en toch zal de downloadgrootte niet groter zijn dan 3,7 KB!

    Ja, u leest het goed.

    Alle modules samen gebundeld en gezipt zijn 3,7 KB, hoewel ze afzonderlijk meer bedragen. De rastermodule is slechts 0,8 KB, terwijl de basismodule 1,0 KB is. Het team achter PureCSS zegt dat het volledig is gebouwd met mobiele apparaten in het achterhoofd, en daarom werd elke CSS-regel zorgvuldig onderzocht op efficiëntie voordat deze werd opgenomen.

    Dus laten we zeggen dat je alleen de module raster en formulieren nodig hebt. Nou, download deze twee gewoon (samen met de Base-module), en je bent klaar in minder dan 3,4 KB! U hoeft de CSS van de modules Knoppen, Tabellen en Menu’s niet op te nemen als u ze niet gaat gebruiken.

    PureCSS heeft echter zijn klassen en de resulterende code bootst niet de Bootstrap na waaraan u misschien erg gewend bent:

    <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>

    U zult merken dat er geen raster met 12 kolommen meer is. PureCSS heeft een rastersysteem dat aangeeft hoeveel breedte een kolom moet hebben. Dus pure-u-lg-1-4 betekent dat dit element 1/4 of 25% van de beschikbare breedte op grote schermen moet innemen. Breedtes als veelvouden van 1/5 zijn ook beschikbaar.

    Al met al is PureCSS een bevrijdende en verbazingwekkende CSS-tool (raamwerk?) waaruit je kunt kiezen en kiezen als dat nodig is. Dat gezegd hebbende, het komt met een behoorlijke hoeveelheid buy-in en leercurve, omdat je een nieuwe (iets andere) manier moet leren om dingen te doen.

      Welke apparaten ondersteunen HBO Max? Roku en Amazon Fire TV niet

    PureCSS heeft ook zijn eigen klassen en standaardstijl, dus daarin verschilt het niet veel van Bootstrap.

    Zimit

    De Zimit framework is een beetje een vreemde eend in de bijt in deze lijst. Ja, het is een raamwerk voor het bouwen van UI’s, maar het is gericht op bepaalde soorten UI: mockups.

    Er zijn momenten waarop je de front-end moet ontwikkelen om de werking van het product te laten zien. De ideale manier om dit te doen, zou natuurlijk zijn om een ​​UI-ontwerper/-ontwikkelaar erbij te betrekken en de mockups te maken op een van de geavanceerde wireframing-tools (Moqups, Blasmic, enz., denk ik). De pagina’s zouden tot op de pixel perfect zijn, het kleurenschema strak en goed gekozen, en de pagina’s zouden openstaan ​​voor deelname, recensies, opmerkingen, enz.

    Maar het echte leven is niet ideaal, en vaak ben je de enige man op het werk en moet je alle hoeden dragen en de klus klaren. Op die momenten wil je een raamwerk dat:

    • Hiermee kunt u coderen in HTML/CSS
    • Is lichtgewicht
    • Heeft een uitgebreide verzameling fundamentele componenten
    • Heeft een fatsoenlijke en consistente stijltaal
    • Lijkt, indien mogelijk, op de “grijze” toon van wireframe-ontwerp
    • Is gemakkelijk te leren
    • Heeft een ingebouwde CSS-preprocessor

    Zimit vinkt al deze vakjes aan. Het is slechts 84 KB groot en heeft een breed scala aan componenten om uit te kiezen. Hier zijn enkele voorbeelden die ik erg aantrekkelijk vond, omdat het veel tijd kost om ze zelf te coderen.

    Boom zicht

    broodkruimel

    Tabbladen

    Er is nog veel meer lekkers om te ontdekken. Bekijk ze eens hier.

    Laten we eens kijken hoe de code eruitziet. Zo zou je het rastersysteem in Zimit gebruiken:

    <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>

    De “c” staat hier voor “kolom”, dus “c4” betekent een kolom die vier eenheden beslaat (het raster is 12-formaat, net als bij Bootstrap). Zeer vergelijkbaar met Bootstrap, en naar mijn mening zeer intuïtief.

    Al met al is Zimit een compleet en eenvoudig framework om UI-prototypes te ontwikkelen die responsief zijn en er snel goed uitzien. Het is beter dan Bootstrap (als het gaat om prototyping) omdat Bootstrap een veel grotere download is en het resulterende ontwerp, nou ja, plakkerig is.

    HTML KickStart

    In de meeste projecten die u bouwt, is snelheid van cruciaal belang. De grootste hindernis voor snelheid bij webontwikkeling is het front-end gedeelte, en de grootste “vertraging” in front-end ontwikkeling is de noodzaak om elegant ogende, interactieve componenten te coderen. Aangezien er veel manieren zijn waarop een component zich kan gedragen en er veel schermformaten zijn om te beheren, kan het coderen en beheren van componenten een nachtmerrie worden voor de ontwikkelaar.

      Waarom piepte of trilde uw iPhone? Hier leest u hoe u erachter komt

    HTML KickStart biedt een alternatief.

    Simpel gezegd; het is een verzameling van echt gestroomlijnde componenten die je gewoon in je projecten kunt stoppen en de ontwikkeltijd drastisch kunt verkorten. Hier zijn enkele leuke componenten die ik heb gevonden:

    Laten vallen

    Toetsen

    Tabbladen (gecentreerd en met pictogrammen)

    materialiseren

    Als je van Bootstrap houdt vanwege het feit dat het een kant-en-klare oplossing heeft voor alle veelvoorkomende webontwerpproblemen, maar je bent een fan van de materiaalontwerpstijl, moet je het proberen materialiseren.

    Materialise is meestal net als Bootstrap – 12-punts rastersysteem, offsets en bekende componenten zoals formulieren, kaarten, enz. Het heeft echter bepaalde goodies die velen kunnen aanspreken.

    Duwen trekken

    Met de push/pull-functie van Materialize CSS kunt u kolommen opnieuw ordenen. Dit doet denken aan de nieuwe CSS Grid-standaard, waarbij de lay-out anders is dan de volgorde van de elementen.

    <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>

    Dit resulteert in het volgende:

    U zult merken dat de kolommen van plaats zijn verwisseld, wat misschien niet haalbaar is in traditionele op Bootstrap gebaseerde CSS.

    JavaScript-goodies

    Er zijn nogal wat JavaScript-functies en -effecten die bij Materialise worden geleverd. Tooltips, Toasts (Android-achtige kortstondige meldingen), Parallex, Pushpin, etc., zijn enkele van hen. Een echt geweldig effect dat ik leuk vond, is FeatureDiscovery, waarmee je in feite een element op de pagina kunt markeren bij een evenement (bijvoorbeeld door op een knop te drukken) om de aandacht van de gebruiker op dat element te vestigen. Het is moeilijk om het volledig in woorden te beschrijven, dus ga naar https://materializecss.com/feature-discovery.html om te zien wat ik bedoel.

    Al met al is Materialise een geweldig alternatief voor Bootstrap of voor wie op zoek is naar een volledig uitgerust Material CSS-framework.

    Conclusie

    Bootstrap staat synoniem voor responsive design. Het was Bootstrap die de term ‘mobile-first design’ populair maakte en liet zien hoe het kon. Maar hoewel Bootstrap de klus meestal klaart, is het niet altijd genoeg om de klus te klaren. Als u het gevoel heeft dat Bootstrap u beperkt en dat uw behoeften speciaal zijn, kan een van de hier vermelde opties helpen.

    gerelateerde berichten