Top 5 Bootstrap alternativ

Bootstrap je všude, ale ne vždy je to ten správný nástroj pro danou práci. Zde je několik skvělých alternativ!

Pokud v dnešní době náhodně zkontrolujete zdrojový kód front-endu webové stránky, je pravděpodobné, že pod ním najdete Bootstrap. Všichni jsme si tak zvykli na pojmy jako kontejner-fluid, řádek, col-sm-6 atd., že je těžké si představit, že je vůbec možný jiný styl vývoje frontendu. A tak když máme postavit další projekt, nevědomky sáhneme po Bootstrapu. To znamená, že popularita nedělá Bootstrap vhodný pro všechny projekty a potřeby.

Ve skutečnosti, pro opravdu štíhlé frontendy, načítání všech Bootstrap CSS a JS může způsobit velké nadýmání.

Tento článek má dva účely:

Poskytujte živé alternativy k Bootstrapu, které nejsou podobné Bootstrapu

Vysvětlete, proč byste měli zvážit tyto alternativy oproti Bootstrapu

Myslím si, že část s vysvětlením je opravdu důležitá, protože ve většině případů si lidé ani neuvědomují, že mají problém nebo že si tím, že vezmou Bootstrap, ztěžují práci. Na závěr si prosím uvědomte, že se v žádném případě nejedná o příspěvek proti bootstrapu. Mám rád Bootstrap 4 a používám ho, kdykoli můžu. Ale pak jsem individuální vývojář, který musí myslet na použití nejoblíbenějšího řešení; také sám o sobě nejsem vývojář uživatelského rozhraní, takže se při vytváření front-endů nestarám o příliš mnoho věcí.

A s tím se pojďme podívat na to, jaké máme alternativy.

Table of Contents

Mřížka Flexbox

Přemýšlejte o tom chvíli: největším důvodem, proč jste začali používat Bootstrap a stále jej používáte, je jeho mřížkový systém. Jistě, trvalo to trochu si zvyknout na třídy řádek, col-md-6 atd., ale nyní je druhou přirozeností myslet na rozvržení z hlediska řádků, sloupců, posunů atd.

A pokud k sobě budete upřímní, zjistíte, že se vším ostatním je v Bootstrapu trochu fuška. Existuje spousta tříd, které si zapamatujete, ať už děláte formuláře, navigaci, tlačítka, tabulky nebo cokoli jiného. Pokud jste jako já, stále jste si nezvykli na všechny třídy a na to, co dělají, a často používáte Bootstrap pouze pro grid a všechny ostatní CSS si píšete sami.

Pokud ano, můžete to udělat mnohem lépe Mřížka Flexbox.

Flexbox Grid, jak název napovídá, je mřížkový systém založený na CSS Flexbox vlastnosti. Na rozdíl od techniky CSS je však veškerá složitost pěkně abstrahována, takže se soustředíte pouze na umístění prvků tak, jak chcete. Nejlepší na tom je, že všechny názvy kódů a tříd napodobují to, co byste chtěli v Bootstrapu 4, což znamená, že přepínání mezi těmito dvěma nástroji nevyžaduje žádné duševní tření. Zde je například, jak vypadá kód pro „prostor kolem“ v mřížce Flexbox:

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

Minifikovaný soubor CSS pro tento gridový systém má pouhých 10,7 KB, což vám ušetří několik set KB v konečné velikosti stahování. V těchto dnech je Flexbox Grid můj oblíbený, protože nechci bojovat s Bootstrapem, abych si ho plně přizpůsobil. Rád začínám s vanilkovými prvky a upravuji je sám, pomocí Flexbox Grid, kdekoli potřebuji.

Práce s daty Použití date-fns v JavaScriptu

Učit se Flexbox zde, online.

PureCSS

Nebylo by hezké, kdyby byl Bootstrap rozdělen na moduly a vy byste mohli importovat pouze modul, který potřebujete?

Studna, PureCSS pokročil a udělal právě to – je to sada modulů pokrývajících různé funkční oblasti webu. Můžete si vybrat mezi stažením jednoho nebo všech, a přesto velikost stahování nepřesáhne 3,7 KB!

Ano, čtete správně.

Všechny moduly, když jsou spojeny dohromady a zabaleny pomocí gzip, mají 3,7 KB, i když jednotlivě dosahují více. Mřížkový modul má pouze 0,8 KB, zatímco základní modul má 1,0 KB. Tým stojící za PureCSS říká, že byl vytvořen výhradně s ohledem na mobilní zařízení, a proto byl každý řádek CSS před zařazením pečlivě zkontrolován z hlediska účinnosti.

Řekněme, že potřebujete pouze modul mřížky a formulářů. Stačí si stáhnout tyto dva (spolu s modulem Base) a budete mít hotovo za méně než 3,4 KB! Není třeba zahrnout CSS z modulů tlačítek, tabulek a nabídek, pokud je nebudete používat.

PureCSS však má své třídy a výsledný kód nenapodobuje Bootstrap, na který byste mohli být velmi zvyklí:

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

Všimnete si, že již neexistuje mřížka s 12 sloupci. PureCSS má svůj mřížkový systém, který určuje, jak velkou šířku by měl mít sloupec. Čistý-u-lg-1-4 tedy znamená, že tento prvek by měl zabírat 1/4 nebo 25 % dostupné šířky na velkých obrazovkách. K dispozici jsou také šířky jako násobky 1/5.

Jak odstranit návrhy kontaktů ze sdílení na iPhone a iPad

Celkově vzato je PureCSS osvobozující a úžasný CSS nástroj (rámec?), ze kterého si můžete vybírat podle potřeby. To znamená, že přichází se značným množstvím vstupů a učení, protože se potřebujete naučit nový (trochu jiný) způsob, jak věci dělat.

PureCSS má také své vlastní třídy a výchozí styl, takže v tom se příliš neliší od Bootstrapu.

Zimit

The Zimit framework je v tomto seznamu jakýmsi zvláštním mužem. Ano, je to rámec pro vytváření uživatelských rozhraní, ale je zaměřen na konkrétní typy uživatelského rozhraní: makety.

Jsou chvíle, kdy musíte vyvinout front-end pro ukázku fungování produktu. Ideálním způsobem, jak toho dosáhnout, by samozřejmě bylo zapojit návrháře/vývojáře uživatelského rozhraní a vytvořit makety na některém z pokročilých nástrojů pro vytváření drátových modelů (napadá mě Moqups, Blasmic atd.). Stránky by byly pixelově dokonalé, barevné schéma elegantní a dobře zvolené a stránky by byly otevřené pro účast, recenze, komentáře atd.

Ale skutečný život není ideální a často jste jediným mužem v práci a musíte nosit všechny klobouky a dokončit práci. V takovém případě chcete rámec, který:

Umožňuje kódovat v HTML/CSS
Je lehký
Má rozsáhlou sbírku základních komponent
Má slušný a konzistentní stylový jazyk
Pokud je to možné, připomíná „šedivý“ tón drátěného designu
Je snadné se naučit
Má vestavěný nějaký CSS preprocesor

Zimit kontroluje všechna tato políčka. Má velikost pouhých 84 KB a má na výběr širokou škálu komponent. Zde je několik příkladů, které se mi zdály opravdu přitažlivé, protože jejich vlastní kódování zabere spoustu času.

Pohled na strom

Strouhanka

Karty

Existuje mnoho dalších dobrot k prozkoumání. Zkontroluj je tady.

Podívejme se, jak kód vypadá. Zde je návod, jak byste použili systém mřížky v Zimit:

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

„c“ zde znamená „sloupec“, takže „c4“ znamená sloupec, který zahrnuje čtyři jednotky (mřížka má velikost 12, stejně jako Bootstrap). Velmi podobné Bootstrapu a podle mého názoru velmi intuitivní.

Celkově vzato, Zimit je kompletní a snadný rámec pro vývoj prototypů uživatelského rozhraní, které reagují a rychle vypadají dobře. Je to lepší než Bootstrap (pokud jde o prototypování), protože Bootstrap je mnohem větší stahování a výsledný design je, no, nevkusný.

Co dělat před prodejem, darováním nebo obchodováním s iPhonem

HTML KickStart

Ve většině projektů, které stavíte, je rychlost rozhodující. Největší překážkou pro urychlení vývoje webu je front-endová část a největším „zdržovačem“ front-endového vývoje je potřeba kódovat elegantně vypadající interaktivní komponenty. Vzhledem k tomu, že existuje mnoho způsobů, jak se může komponenta chovat, a existuje mnoho velikostí obrazovky pro správu, může se kódování a správa komponent stát pro vývojáře noční můrou.

HTML KickStart nabízí alternativu.

Jednoduše řečeno; je to sbírka opravdu elegantních komponent, které můžete jednoduše vložit do svých projektů a drasticky zkrátit dobu vývoje. Zde jsou některé pěkné komponenty, které jsem našel:

Rozbalovací nabídka

Tlačítka

Karty (uprostřed a s ikonami)

Zhmotnit

Pokud máte rádi Bootstrap pro to, že má hotové řešení pro všechny běžné problémy s webdesignem, ale jste fanouškem stylu Material design, měli byste vyzkoušet Zhmotnit.

Materialize je většinou jako Bootstrap – 12bodový mřížkový systém, offsety a známé komponenty, jako jsou formuláře, karty atd. Má však určité vychytávky, které mohou oslovit mnohé.

Tlačit táhnout

Funkce push/pull Materialize CSS umožňuje změnit pořadí sloupců. To připomíná nový standard CSS Grid, kde se rozložení liší od pořadí prvků.

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

Výsledkem je následující:

Všimnete si, že si sloupce vyměnily místa, což je něco, co je možná nedosažitelné v tradičním CSS založeném na Bootstrapu.

JavaScriptové dobroty

S Materialize je dodáváno několik funkcí a efektů JavaScriptu. Popisky, Toasty (pomíjivá oznámení podobná Androidu), Parallex, Pushpin atd., jsou některé z nich. Jeden opravdu úžasný efekt, který se mi líbil, je FeatureDiscovery, který vám v podstatě umožňuje zvýraznit prvek na stránce při nějaké události (řekněme stisknutí tlačítka), abyste na tento prvek upoutali pozornost uživatele. Je těžké to plně popsat slovy, takže přejděte na https://materializecss.com/feature-discovery.html, abyste viděli, co tím myslím.

Celkově vzato je Materialize skvělou alternativou k Bootstrapu nebo pro ty, kteří chtějí přijmout plnohodnotný rámec Material CSS.

Závěr

Bootstrap je synonymem pro responzivní design. Byl to Bootstrap, který zpopularizoval termín „mobile-first design“ a ukázal, jak by se to dalo udělat. Ale i když Bootstrap většinu času odvede svou práci, samotné dokončení práce není vždy dostačující. Pokud máte pocit, že vás Bootstrap omezuje a že vaše potřeby jsou speciální, pomůže vám jedna ze zde uvedených možností. 🙂