5 populiariausios „Bootstrap“ alternatyvos

„Bootstrap“ yra visur, tačiau tai ne visada yra tinkamas įrankis šiam darbui. Čia yra keletas puikių alternatyvų!


Jei šiomis dienomis atsitiktine tvarka patikrinsite svetainės pagrindinio puslapio šaltinio kodą, tikėtina, kad apačioje rasite „Bootstrap“. Mes visi taip įpratę prie tokių sąvokų kaip skysčio iš konteinerio, eilutė, col-sm-6 ir kt., Kad sunku įsivaizduoti, kad netgi galimas bet koks kitas „front-end“ kūrimo stilius. Taigi, kai turime sukurti kitą projektą, mes nesąmoningai siekiame „Bootstrap“. Vis dėlto populiarumas nereiškia, kad „Bootstrap“ tinka visiems projektams ir poreikiams.

Tiesą sakant, tikrai liesoms priekinėms dalims, kraunant visus „Bootstrap CSS“ ir JS gali sukelti didelę pūtimą.

Šis straipsnis turi du tikslus:

  1. Pateikite „Bootstrap“ neturinčias tiesiogines „Bootstrap“ alternatyvas
  2. Paaiškinkite, kodėl galbūt norėsite apsvarstyti šias alternatyvas naudodamiesi „Bootstrap“

Aš manau, kad paaiškinimo dalis yra tikrai svarbi, nes daugeliu atvejų žmonės net nenutuokia, kad turi problemų ar kad apsunkina savo darbą pasirinkdami „Bootstrap“. Galiausiai atkreipkite dėmesį, kad tai jokiu būdu nėra „anti-boototrap“ įrašas. Aš myliu „Bootstrap 4“ ir naudoju jį kada tik galiu. Bet tada aš esu atskiras kūrėjas, turintis galvoti apie populiariausio sprendimo naudojimą; Aš pats nesu UI kūrėjas, todėl nesijaudinu dėl per daug dalykų, kurdamas savo sąsajas..

Pažvelkime į tai, kokias alternatyvas turime.

„Flexbox“ tinklelis

Galvok apie minutę: didžiausia priežastis, dėl kurios pradėjote naudoti „Bootstrap“ ir vis dar naudojate tai yra jo tinklelio sistema. Aišku, reikėjo šiek tiek priprasti prie eilių, stulpelių-md-6 ir kt. Klasių, bet dabar yra antra prigimtis galvoti apie išdėstymą eilutėmis, stulpeliais, poslinkiais ir kt..

Ir jei esate sąžiningas su savimi, pastebėsite, kad visa kita „Bootstrap“ yra šiek tiek sudėtinga dirbti. Yra daugybė klasių, kurias reikia atsiminti, ar darote formas, naršote, mygtukus, lenteles ar dar ką nors. Jei esate panašus į mane, jūs vis dar nepripratote prie visų užsiėmimų ir to, ką jie daro, ir dažnai naudojate „Bootstrap“ tik tinkleliui, o pats rašote visas kitas CSS..

Jei taip, galėtumėte padaryti daug geriau „Flexbox“ tinklelis.

Kaip rodo pavadinimas, „Flexbox“ tinklelis yra tinklelio sistema, pagrįsta CSS „Flexbox“ savybes. Tačiau, skirtingai nuo CSS technikos, visas sudėtingumas yra santūriai atskirtas, kad jūs sutelktumėte dėmesį tik į elementų išdėstymą taip, kaip norite. Geriausia tai, kad visi kodų ir klasių pavadinimai imituoja tai, ko norėtumėte „Bootstrap 4“, o tai reiškia, kad norint perjungti šiuos du įrankius nereikia jokios psichinės trinties. Pvz., Štai, koks „erdvės aplink“ kodas atrodo „Flexbox“ tinklelyje:

aplink

aplink

aplink

Minimalus šios tinklelio sistemos CSS failas yra tik 10,7 KB, sutaupant kelis šimtus KB galutinio atsisiuntimo dydžio. Šiomis dienomis „Flexbox“ tinklelis yra mano mėgstamiausias, nes nenoriu kovoti su „Bootstrap“, kad galėčiau jį visiškai pritaikyti. Man patinka pradėti nuo vanilės elementų ir patiems juos formuoti, naudojant „Flexbox“ tinklelį visur, kur man reikia.

Mokytis „Flexbox“ čia, internete.

„PureCSS“

Nebūtų puiku, jei „Bootstrap“ būtų padalintas į modulius ir galėtumėte importuoti tik jums reikalingą modulį?

Na, „PureCSS“ žengė į priekį ir padarė tik tai – tai modulių rinkinys, apimantis skirtingas svetainės funkcines sritis. Galite pasirinkti atsisiųsti vieną arba visus, tačiau atsisiuntimo dydis neviršys 3,7 KB!

Taip, jūs teisingai perskaitėte.

Visi sujungti ir sujungti moduliai yra 3,7 KB, nors atskirai jų yra daugiau. Tinklelio modulis yra tik 0,8 KB, o bazinis modulis – 1,0 KB. „PureCSS“ komanda teigia, kad ji buvo sukurta atsižvelgiant tik į mobiliuosius įrenginius, todėl prieš įtraukiant kiekvieną CSS eilutę buvo atidžiai patikrinta, ar ji veiksminga..

Tarkime, jums reikia tik tinklo ir formų modulio. Na, tiesiog atsisiųskite šiuos du (kartu su baziniu moduliu) ir būsite pasiruošę mažiau nei 3,4 KB! Nereikia įtraukti CSS iš mygtukų, lentelių ir meniu modulių, jei nesinaudosite jais.

Vis dėlto „PureCSS“ turi savo klases, o gautas kodas nėra imituojantis „Bootstrap“, prie kurio galbūt esate labai įpratę:

Loremas Ipsumas

„Dolor Sit Amet“

Tikimasi gimdos

Praeinantis konsekventas

Pastebėsite, kad nebėra 12 stulpelių tinklelio. „PureCSS“ turi savo tinklelio sistemą, kuri nurodo, kokio pločio stulpelis turėtų užtrukti. Taigi, grynasis-u-lg-1-4 reiškia, kad šis elementas turėtų užimti 1/4 arba 25% turimo pločio dideliuose ekranuose. Taip pat galimas 1/5 kartotinis plotis.

Apskritai, „PureCSS“ yra išlaisvinantis ir nuostabus CSS įrankis (sistema?), Kurį galite pasirinkti pagal poreikį. Vis dėlto, jūs turite išmokti naują (šiek tiek kitokį) darbo atlikimo būdą su nemaža įėjimo ir mokymosi kreive..

„PureCSS“ taip pat turi savo klases ir numatytąjį stilių, taigi jis nelabai skiriasi nuo „Bootstrap“.

Zimit

Zimit šiame sąraše labai keista, kad sistema nėra tinkama. Taip, tai yra UI kūrimo sistema, tačiau ji skirta tam tikriems UI tipams: maketams.

Kartais reikia sukurti priekinį gaminio veikimo principą. Idealiausias būdas tai padaryti, žinoma, būtų įtraukti UI dizainerį / kūrėją ir sukurti maketus ant vieno iš pažangiausių laidų formavimo įrankių („Atėjo į galvą“, „Moqups“, „Blasmic“ ir kt.). Puslapiai būtų tobuli taškais, spalvų schema būtų aptaki ir tinkamai parinkta, o puslapiuose būtų galima dalyvauti, peržiūrėti, komentuoti ir pan..

Tačiau tikrasis gyvenimas nėra idealus, ir dažnai jūs esate vienintelis vyras, dirbantis darbą, todėl turite dėvėti visas skrybėles ir atlikti darbą. Tuomet norisi sistemos, kuri:

  • Leidžia koduoti HTML / CSS
  • Ar lengvas
  • Turi didelę pagrindinių komponentų kolekciją
  • Gerai ir nuosekliai apibūdina kalbą
  • Jei įmanoma, jis primena „pilkšvą“ vielos karkaso toną
  • Lengva išmokti
  • Ar turi įmontuotą CSS pirminį procesorių

„Zimit“ pažymi visus šiuos langelius. Tai yra tik 84 KB dydžio ir jame yra platus komponentų pasirinkimas. Štai keli pavyzdžiai, kurie man pasirodė labai patrauklūs, nes jų pačių kodavimas užtruks daug laiko.

Medžio vaizdas

Duonos riekė

Skirtukai

Yra daug daugiau gėrybių, kurias reikia ištirti. Patikrink juos čia.

Pažvelkime, kaip atrodo kodas. Štai kaip jūs naudojote „Zimit“ tinklelio sistemą:

4 stulpeliai
4 stulpeliai

4 stulpeliai
4 stulpeliai

„C“ čia reiškia „stulpelį“, taigi „c4“ reiškia stulpelį, kuriame yra keturi vienetai (tinklelis yra 12 dydžio, kaip ir „Bootstrap“). Labai panašus į „Bootstrap“ ir, mano nuomone, labai intuityvus.

Apskritai, „Zimit“ yra išsami ir lengva sistema, skirta sukurti UI prototipus, kurie reaguoja greitai ir atrodo gerai. Tai geriau nei „Bootstrap“ (kai kalbama apie prototipų kūrimą), nes „Bootstrap“ yra daug didesnis atsisiuntimas, o gautas dizainas yra gerai.

HTML „KickStart“

Daugelyje jūsų statomų projektų greitis yra kritinis. Didžiausias interneto plėtros tempas yra priekinė dalis, o didžiausias „vėlavimas“ plėtojant internetinę svetainę yra poreikis koduoti elegantiškai atrodančius, interaktyvius komponentus. Kadangi komponentai gali būti naudojami daugybe būdų ir yra daugybė ekranų, kuriuos reikia valdyti, komponentų kodavimas ir valdymas gali tapti košmaru kūrėjui.

HTML „KickStart“ siūlo alternatyvą.

Paprasčiau tariant; Tai tikrai aptakus komponentų rinkinys, kurį galite tiesiog mesti į savo projektus ir drastiškai sutrumpinti kūrimo laiką. Štai keletas gražių komponentų, kuriuos radau:

Nuleidimas

Mygtukai

Skirtukai (centre ir su piktogramomis)

Realizuokis

Jei jums patinka „Bootstrap“ dėl to, kad jame yra paruoštas sprendimas visoms įprastoms žiniatinklio kūrimo problemoms, bet jūs esate „Medžiagos dizaino stiliaus“ gerbėjas, turėtumėte išbandyti Realizuokis.

Įgyvendinimas dažniausiai yra panašus į „Bootstrap“ – 12 taškų tinklelio sistema, nuokrypiai ir pažįstami komponentai, tokie kaip formos, kortelės ir kt., Tačiau ji turi tam tikrų gėrybių, kurios gali patikti daugeliui.

Stumti traukti

„Materialize CSS“ stumimo / traukimo funkcija leidžia pertvarkyti stulpelius. Tai primena naują CSS tinklelio standartą, kur išdėstymas skiriasi nuo elementų tvarkos.

Šis skyrius yra 7 stulpelių pločio, stumiamas į dešinę 5 kolonų.
5 kolonų pločio, iš kairės ištrauktos 7 kolonų.

Tai lemia:

Pastebėsite, kad stulpeliai pasikeitė vietomis, o tai yra kažkas, ko tradiciniame „Bootstrap“ pagrindu sukurtoje CSS yra neįmanoma pasiekti..

„JavaScript“ gėrybės

„Materialize“ yra nemažai „JavaScript“ funkcijų ir efektų. Patarimai, rupūžės („Android“ tipo trumpalaikiai pranešimai), „Parallex“, „Pushpin“ ir kt. Yra keletas iš jų. Vienas tikrai nuostabus efektas, kuris man patiko, yra „FeatureDiscovery“, kuris iš esmės leidžia paryškinti tam tikro įvykio puslapio elementą (tarkim, mygtuko paspaudimą), kad atkreiptų vartotojo dėmesį į tą elementą. Sunku tai išsamiai apibūdinti žodžiais, todėl eikite į https://materializecss.com/feature-discovery.html, kad pamatytumėte, ką turiu omenyje.

Apskritai, „Materialize“ yra puiki „Bootstrap“ alternatyva arba norintiems pritaikyti pilnavertę „Material CSS“ sistemą..

Išvada

„Bootstrap“ yra reaktyvaus dizaino sinonimas. Būtent „Bootstrap“ išpopuliarino terminą „pirmiausia mobilusis dizainas“ ir parodė, kaip tai galima padaryti. Bet nors „Bootstrap“ dažniausiai atlieka darbą, ne visada to pakanka. Jei manote, kad „Bootstrap“ jus riboja ir kad jūsų poreikiai yra ypatingi, padės vienas iš čia išvardytų variantų. ��

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