Bootstrap is oral, maar dit is nie altyd die regte hulpmiddel vir die werk nie. Hier is ‘n paar wonderlike alternatiewe!


As u deesdae ewekansig die bronkode van ‘n webwerf se voorkant ondersoek, is die kans goed dat u Bootstrap onder sal vind. Ons het almal so gewoond geraak aan konsepte soos houervloeistof, ry, col-sm-6, ens., Dat dit moeilik is om voor te stel dat enige ander styl van ontwikkeling in die voorkant selfs moontlik is. En dus, wanneer ons die volgende projek moet bou, reik ons ​​onbewustelik na Bootstrap. Dit gesê, die gewildheid maak Bootstrap nie goed vir alle projekte en behoeftes nie.

In werklikheid, vir baie maer frontante, laai al die Bootstrap CSS en JS kan groot opblaas veroorsaak.

Hierdie artikel het twee doeleindes:

  1. Voorsien nie-Bootstrap-agtige lewendige alternatiewe vir Bootstrap
  2. Verduidelik waarom u hierdie alternatiewe oor Bootstrap wil oorweeg

Ek dink die verduidelikingsgedeelte is baie belangrik, omdat mense in die meeste gevalle nie eens besef dat hulle ‘n probleem het nie, of dat hulle hul werk moeiliker maak deur Bootstrap op te tel. Laastens, let op dat dit nie ‘n anti-Bootstrap-pos is nie. Ek is mal oor Bootstrap 4 en gebruik dit wanneer ek kan. Maar dan is ek ‘n individuele ontwikkelaar wat die gewildste oplossing moet gebruik; ek is ook nie ‘n UI-ontwikkelaar nie, so ek hoef nie te veel dinge te bekommer as ek my voorkant uitbou nie.

En daarmee, kyk na watter alternatiewe ons het.

Flexbox-rooster

Dink ‘n oomblik daaraan: die grootste rede waarom u Bootstrap begin gebruik het en dit steeds gebruik, is die ruitnetwerkstelsel. Natuurlik, dit het gewoond geraak aan die ry, col-md-6, ens, klasse, maar nou is dit die tweede aard om aan ‘n uitleg te dink in terme van rye, kolomme, offset, ens..

En as jy eerlik is met jouself, sal jy vind dat alles in Bootstrap ‘n bietjie werk is om mee te werk. Daar is tonne klasse wat u moet onthou, of u nou vorms, navigasie, knoppies, tafels of iets anders doen. As jy soos ek is, het jy nog steeds nie gewoond geraak aan al die klasse en wat hulle doen nie, en jy gebruik Bootstrap dikwels slegs vir die ruitenet en skryf al die ander CSS self.

As ja, kan jy baie beter daarmee vaar Flexbox-rooster.

Die Flexbox Grid is, soos die naam aandui, ‘n roosterstelsel gebaseer op die CSS Flexbox eienskappe. Anders as die CSS-tegniek, word die kompleksiteit egter mooi onttrek sodat u slegs daarop fokus om elemente te plaas soos u wil. Die beste is dat al die kode- en klasname naboots wat u in Bootstrap 4 wil hê, wat beteken dat ‘n skakel tussen hierdie twee instrumente geen verstandelike wrywing benodig nie. Byvoorbeeld, hoe lyk die kode vir die “ruimte rondom” in die Flexbox Grid:

rondom

rondom

rondom

Die verkleineerde CSS-lêer vir hierdie roosterstelsel is slegs 10,7 KB en bespaar u ‘n paar honderd kB in die finale aflaaigrootte. Deesdae is die Flexbox Grid my gunsteling, want ek wil nie Bootstrap beveg om dit volledig aan te pas nie. Ek wil graag met vanielje-elemente begin en dit self styl, deur die Flexbox Grid te gebruik waar ek ook al moet.

Leer Flexbox hier, aanlyn.

PureCSS

Sou dit nie lekker wees as Bootstrap in modules verdeel is en u slegs die module wat u benodig, kon invoer nie?

goed, PureCSS het presies dit gedoen – dit is ‘n stel modules wat verskillende funksionele gebiede van ‘n webwerf dek. U kan kies om een ​​of almal af te laai, en tog sal die aflaaigrootte nie 3,7 KB oorskry nie!

Ja, jy lees dit reg.

Al die modules wat saamgebind en saamgepak is, is 3,7 KB, hoewel dit afsonderlik meer is. Die roostermodule is net 0,8 KB, terwyl die basismodule 1,0 KB is. Die span agter PureCSS sê dat dit geheel en al gebou is met mobiele toestelle in gedagte, en daarom is elke lyn van CSS noukeurig ondersoek na doeltreffendheid voordat dit ingesluit is.

Laat ons dus sê dat u net die rooster- en vormmodule benodig. Wel, laai net hierdie twee af (saam met die basismodule), en jy sal binne minder as 3,4 kB klaar wees! U hoef nie die CSS vanaf knoppies, tabelle en spyskaarte-modules in te sluit as u dit nie wil gebruik nie.

PureCSS het egter sy klasse, en die gevolglike kode naboots nie die Bootstrap waaraan u baie gewoond is nie:

Lorem Ipsum

Dolor Sit Amet

Bewese laborum

Praesent consectetur

U sal sien dat daar nie meer ‘n 12-kolomrooster is nie. PureCSS het sy roosterstelsel wat spesifiseer hoeveel breedte ‘n kolom moet neem. Dus, pure-u-lg-1-4 beteken dat hierdie element 1/4 of 25% van die beskikbare breedte op groot skerms moet inneem. Breedtes as veelvoude van 1/5 is ook beskikbaar.

Al met al is PureCSS ‘n bevrydende en ongelooflike CSS-instrument (raamwerk?) Wat u kan kies en kies waar nodig. Dit gesê, dit kom wel met ‘n redelike hoeveelheid aankoop- en leerkurwe, want u moet ‘n nuwe (effens ander) manier van dinge doen.

PureCSS het ook sy eie klasse en standaard-stilering, en in dié opsig verskil dit nie van Bootstrap nie.

Zimit

Die Zimit raamwerk is soort van ‘n vreemde-man-out in hierdie lys. Ja, dit is ‘n raamwerk vir die opbou van UI’s, maar is gerig op spesifieke soorte UI: mockups.

Daar is tye dat u die voorpunt moet ontwikkel om die werking van die produk te toon. Die ideale manier om dit te doen, sou natuurlik wees om ‘n UI-ontwerper / ontwikkelaar te betrek en die bespotting van een van die gevorderde wireframing-instrumente (Moqups, Blasmic, ens.) Te skep. Die bladsye is pixel-perfek, die kleurskema glad en goed gekies, en die bladsye is oop vir deelname, resensies, kommentaar, ens..

Maar die regte lewe is nie ideaal nie, en jy is dikwels die enigste man op die baan en moet al die hoede dra en die werk doen. Op daardie tye wil u ‘n raamwerk hê wat:

  • Laat u in HTML / CSS kode
  • Is liggewig
  • Het ‘n uitgebreide versameling van fundamentele komponente
  • Het ‘n ordentlike en konsekwente stylstaal
  • As dit moontlik is, lyk dit soos die gryserige toon van draadraamontwerp
  • Is maklik om te leer
  • Het ‘n ingeboude CSS-voorverwerker

Zimit merk al hierdie kassies aan. Dit is net 84 KB groot en het ‘n wye verskeidenheid komponente om van te kies. Hier is ‘n paar voorbeelde wat ek baie aantreklik gevind het, want dit kan baie tyd neem om dit op u eie te kodering.

Boomuitsig

bread

oortjies

Daar is nog baie meer lekker om te verken. Kyk hier na hulle hier.

Kom ons kyk hoe lyk die kode. Hoe jy die roosterstelsel in Zimit sou gebruik:

4 kolomme
4 kolomme

4 kolomme
4 kolomme

Die ‘c’ hier staan ​​vir ‘kolom’, dus ‘c4’ beteken ‘n kolom wat oor vier eenhede strek (die rooster is 12-grootte, net soos Bootstrap s’n). Baie na Bootstrap, en volgens my mening baie intuïtief.

Al met al is Zimit ‘n volledige en maklike raamwerk om UI-prototipes te ontwikkel wat reageer en vinnig goed lyk. Dit is beter as Bootstrap (as dit kom by prototipering), want Bootstrap is ‘n veel groter aflaai en die gevolglike ontwerp is, wel, klewerig.

HTML KickStart

In die meeste projekte wat u bou, is spoed van kritieke belang. Die grootste hindernis om webontwikkeling te bespoedig, is die voorste deel, en die grootste ‘vertraging’ in die voorpuntontwikkeling is die behoefte om interaktiewe komponente wat elegant lyk, te kodeer. Aangesien daar baie maniere is waarop ‘n komponent kan optree, en daar baie skermgroottes is om komponente te bestuur, kodering en bestuur, kan dit ‘n nagmerrie vir die ontwikkelaar word.

HTML KickStart bied ‘n alternatief.

Eenvoudig gestel; dit is ‘n versameling werklike gladde komponente wat u net in u projekte kan inslaan en die ontwikkelingstyd drasties kan verminder. Hier is ‘n paar oulike komponente wat ek gevind het:

vervolg

knoppies

Tabs (gesentreer en met ikone)

Materialise

As u van Bootstrap hou omdat dit ‘n gereedheidsoplossing het vir alle algemene webontwerpprobleme, maar u ‘n aanhanger van die Materiaal-ontwerpstyl het, moet u dit probeer Materialise.

Materialisering is meestal net soos Bootstrap – 12-punts roosterstelsel, kompensasies en bekende komponente soos vorms, kaarte, ens. Dit het egter sekere goed wat baie mense kan aantrek.

Stoot trek

Met die push / pull-funksie van Materialize CSS kan u die kolomme herrangskik. Dit herinner aan die nuwe CSS Grid-standaard, waar die uitleg anders is as die elementorde.

Hierdie div is 7-kolomme breed en is regs gedruk deur 5-kolomme.
5-kolomme wyd na links getrek deur 7-kolomme.

Dit lei tot die volgende:

U sal oplet dat die kolomme van plekke verander het, wat miskien onaanvaarbaar is in die tradisionele CSS-gebaseerde CSS.

JavaScript-lekkergoed

Daar is ‘n hele paar JavaScript-funksies en -effekte wat saam met Materialize gestuur word. Gereedskapstips, roosterbrood (Android-agtige kortstondige kennisgewings), Parallex, Pushpin, ens. Is enkele daarvan. ‘N Eintlik ongelooflike effek wat ek van gehou het, is FeatureDiscovery, wat u basies toelaat om ‘n element op die bladsy tydens een of ander gebeurtenis (sê, druk op die knoppie) uit te lig om die gebruiker se aandag op daardie element te vestig. Dit is moeilik om dit volledig in woorde te beskryf, so gaan na https://materializecss.com/feature-discovery.html om te sien wat ek bedoel.

Al met al is Materialize ‘n uitstekende alternatief vir Bootstrap of vir diegene wat ‘n volledige CSS-raamwerk wil gebruik.

Afsluiting

Bootstrap is sinoniem met responsiewe ontwerp. Dit was Bootstrap wat die term ‘mobiele eerste ontwerp’ gewild gemaak het en gewys het hoe dit gedoen kan word. Maar hoewel Bootstrap die meeste van die tyd die werk verrig, is dit nie altyd genoeg om die werk gedoen te kry nie. As u voel dat Bootstrap u beperk en dat u behoeftes spesiaal is, sal een van die opsies wat hier gelys word, help. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me