Topp 5 stígvélakostir

Bootstrap er alls staðar, en það er ekki alltaf rétt verkfæri fyrir starfið. Hér eru nokkur frábær val!


Ef þú skoðar kóðann í framhlið vefsíðu af handahófi þessa dagana er líklegt að þú finnir Bootstrap undir. Við erum öll orðin svo vön hugtök eins og gámavökvi, röð, col-sm-6 o.s.frv., Að það er erfitt að ímynda sér að einhver annar háttur í framþróun sé jafnvel mögulegur. Og svo þegar við verðum að byggja næsta verkefni, þá náum við til Bootstrap ómeðvitað. Sem sagt, vinsældirnar gera Bootstrap ekki hentugar fyrir öll verkefni og þarfir.

Reyndar, fyrir virkilega halla framhlið, hleður öll Bootstrap CSS og JS getur valdið meiriháttar uppblæstri.

Þessi grein hefur tvo tilgangi:

  1. Búðu til valkosti sem ekki er hægt að nota Bootstrap eins og Bootstrap
  2. Útskýrðu hvers vegna þú gætir viljað íhuga þessa valkosti fram yfir Bootstrap

Ég held að skýringarhlutinn sé mjög mikilvægur vegna þess að í flestum tilvikum er fólk ekki einu sinni ljóst að þeir eiga í vandræðum eða að þeir gera vinnuna erfiðari með því að sækja Bootstrap. Að lokum, vinsamlegast athugið að þetta er ekki andstæðingur-Bootstrap staða á neinn hátt. Ég elska Bootstrap 4 og nota það hvenær sem ég get. En þá er ég einstaklingur verktaki sem þarf að hugsa um að nota vinsælustu lausnina; líka, ég er ekki forritari í HÍ í sjálfu sér, svo ég hef ekki áhyggjur af of mörgum hlutum þegar ég byggi framhliðina mína.

Og með það skulum við skoða hvaða valkosti við höfum.

Flexbox rist

Hugsaðu um það í eina mínútu: Stærsta ástæðan fyrir því að þú byrjaðir að nota Bootstrap og ert enn að nota það er netkerfið. Jú, það tók nokkurn tíma að venjast röðinni, col-md-6 o.fl., flokkum, en nú er það önnur eðli að hugsa um skipulag hvað varðar línur, dálka, offset, osfrv..

Og ef þú ert heiðarlegur við sjálfan þig, munt þú komast að því að allt annað í Bootstrap er svolítið agalegt að vinna með. Það er margt af flokkum sem þarf að muna, hvort sem þú ert að nota eyðublöð, flakk, hnappa, töflur eða eitthvað annað. Ef þú ert eins og ég, hefur þú samt ekki vanist öllum bekkjunum og því sem þeir gera, og þú notar oft Bootstrap aðeins fyrir ristina og skrifar sjálfur alla aðra CSS.

Ef já, þá gætirðu gert miklu betur með Flexbox rist.

Flexbox Grid, eins og nafnið gefur til kynna, er ristakerfi sem byggir á CSS Flexbox eignir. Hins vegar, ólíkt CSS tækni, er allur flækjustigið ágripið þannig að þú einbeitir þér aðeins að því að setja þætti eins og þú vilt. Það besta er að allir kóðinn og bekkjarnöfnin líkja eftir því sem þú vilt í Bootstrap 4, sem þýðir að skipta á milli þessara tveggja tækja þarfnast núlls núnings. Hér er til dæmis hvernig kóðinn fyrir „rýmið í kring“ lítur út í Flexbox ristinni:

umhverfis

umhverfis

umhverfis

Skerta CSS skrá fyrir þetta ristakerfi er aðeins 10,7 KB og sparar þér nokkur hundruð KB í endanlegri niðurhalsstærð. Þessa dagana er Flexbox Grid uppáhaldið mitt þar sem ég vil ekki berjast við Bootstrap til að sérsníða það að fullu. Mér finnst gaman að byrja á vanilluþáttum og stíl þá sjálf, nota Flexbox Grid hvert sem ég þarf.

Læra Flexbox hér, á netinu.

PureCSS

Væri ekki fínt ef Bootstrap væri skipt í einingar og þú gætir flutt inn eininguna sem þú þarft?

Jæja, PureCSS hefur gengið á undan og gert einmitt það – þetta er mengi eininga sem nær yfir mismunandi starfssvið á vefsíðu. Þú getur valið að hlaða niður einum eða öllum og samt mun stærð niðurhals ekki fara yfir 3,7 KB!

Já, þú lest það rétt.

Allar einingarnar þegar þær eru bundnar saman og gzippaðar eru 3,7 KB, þó hver fyrir sig nemi þær meira. Taflan er aðeins 0,8 KB en grunneiningin er 1,0 KB. Liðið á bak við PureCSS segir að það hafi verið alfarið byggt með farsíma í huga og því hafi hver lína af CSS verið vandlega skoðuð til skilvirkni áður en hún var með.

Svo skulum við segja að þú þarft bara rist og eyðublöð. Jæja, bara halaðu niður þessum tveimur (ásamt grunneiningunni) og þú munt vera búinn á innan við 3,4 KB! Þú þarft ekki að hafa CSS frá hnöppum, töflum og valmyndum ef þú ætlar ekki að nota þær.

PureCSS er þó með sína flokka og kóðinn sem myndast hermir ekki eftir Bootstrap sem þú gætir verið mjög vanur að:

Lorem Ipsum

Dolor Sit Amet

Sannað laborum

Praesent Consectetur

Þú munt taka eftir því að það er ekkert tólf dálka rist lengur. PureCSS er með ristakerfi sitt sem tilgreinir hversu mikil breidd dálkur ætti að taka. Svo, pure-u-lg-1-4 þýðir að þessi þáttur ætti að taka 1/4 eða 25% af tiltækri breidd á stórum skjám. Breiddar sem margfeldi 1/5 eru einnig fáanlegar.

Allt í allt er PureCSS frelsandi og ótrúlegt CSS tól (umgjörð?) Sem þú getur valið og valið úr eftir þörfum. Sem sagt, það kemur með talsverðum innkaupa- og námsferli þar sem þú þarft að læra nýja (aðeins mismunandi) leið til að gera hluti.

PureCSS hefur einnig sína eigin flokka og sjálfgefna stíl, þannig að það er ekki of frábrugðið Bootstrap.

Zimit

The Zimit umgjörð er soldið skrýtið mann á þessum lista. Já, það er rammi til að byggja upp HÍ en það miðar að tilteknum tegundum HÍ: mockups.

Stundum þarf að þróa framhliðina til að sýna virkni vörunnar. Hin fullkomna leið til að gera þetta væri auðvitað að fá HÍ hönnuð / hönnuð til að taka þátt og búa til spotta á eitt af háþróuðum tólbúnaðartækjum (Moqups, Blasmic osfrv., Koma upp í hugann). Síðurnar væru pixla fullkomnar, litasamsetningin slétt og vel valin og síðurnar væru opnar fyrir þátttöku, umsagnir, athugasemdir osfrv..

En raunveruleikinn er ekki hugsjón og oft ertu eini maðurinn í starfinu og verður að vera með alla hattana og fá starfið. Á þeim stundum vilt þú ramma sem:

  • Leyfir þér að kóða í HTML / CSS
  • Er léttur
  • Er með mikið safn af grunnþáttum
  • Er með ágætis og stöðugt stílmál
  • Ef mögulegt er, líkist það „gráa“ tónnum við hönnun ramma
  • Er auðvelt að læra
  • Er með einhverja CSS forvinnsluaðila innbyggðan

Zimit hakar við alla þessa kassa. Það er aðeins 84 KB að stærð og hefur mikið úrval af íhlutum til að velja úr. Hér eru nokkur dæmi sem mér fannst virkilega aðlaðandi þar sem að það að taka það á eigin spýtur mun taka mikinn tíma.

Trjásýn

Brauðmylla

Flipar

Það er margt fleira góðgæti að skoða. Athugaðu þá hér.

Við skulum skoða hvernig kóðinn lítur út. Svona myndir þú nota ristakerfið í Zimit:

4 dálkar
4 dálkar

4 dálkar
4 dálkar

„C“ hérna stendur fyrir „súla,“ þannig að „c4“ þýðir dálkur sem spannar fjórar einingar (ristin er 12 að stærð, rétt eins og Bootstrap er). Mjög svipað Bootstrap og mjög leiðandi að mínu mati.

Allt í allt er Zimit heill og auðveldur rammi til að þróa frumgerðir HÍ sem svara og líta vel út fljótt. Það er betra en Bootstrap (þegar kemur að frumgerð) vegna þess að Bootstrap er miklu stærri niðurhal og hönnunin sem af því kemur er vel, klístur.

HTML KickStart

Í flestum verkefnum sem þú byggir er hraðinn mikilvægur. Stærsta hindrunin til að hraða þróun á vefnum er framhliðin, og stærsti „seinkinn“ í framþróuninni er nauðsyn þess að kóða glæsilegan og gagnvirkan íhlut. Þar sem það eru margar leiðir sem íhlutur getur hegðað sér, og það eru margar skjástærðir til að stjórna, kóða og stjórna íhlutum geta orðið martröð fyrir verktaki.

HTML KickStart býður upp á val.

Settu einfaldlega; það er safn af mjög sléttum íhlutum sem þú getur bara sleppt verkefnum þínum og skera niður þróunartímabilið verulega. Hérna eru nokkrir ágætir þættir sem ég fann:

Niðurtalning

Hnappar

Flipar (miðju og með táknum)

Veruleika

Ef þér líkar vel við Bootstrap fyrir þá staðreynd að hún er með tilbúna lausn fyrir öll algeng vandamál í vefhönnun, en þú ert aðdáandi efnishönnunarstíls, ættirðu að prófa Veruleika.

Að veruleika er að mestu leyti rétt eins og Bootstrap – 12 stiga ristakerfi, offset og kunnuglegir hlutar eins og form, kort osfrv. Það hefur þó ákveðin góðgæti sem geta höfðað til margra.

Ýta toga

Push / pull aðgerðin í Materialize CSS gerir þér kleift að endurraða dálkum. Þetta minnir á nýja CSS Grid staðalinn þar sem skipulag er frábrugðið þáttaröð.

Þessi deild er 7 dálka á breidd og ýtt til hægri með 5 dálkum.
5 dálkar á breidd dregnir til vinstri með 7 dálkum.

Þetta leiðir af sér eftirfarandi:

Þú munt taka eftir því að dálkarnir hafa skipt um stað, sem er eitthvað sem er ómögulegt í hefðbundnum CSS-byggðum CSS.

JavaScript góðgæti

Það eru töluvert af JavaScript aðgerðum og áhrifum sem fylgja með Materialize. Verkfæri, ristuðu brauði (Android-eins og tilkynningar um skammtímamyndun), Parallex, Pushpin osfrv., Eru nokkur þeirra. Eitt virkilega ótrúleg áhrif sem mér líkaði við er FeatureDiscovery, sem í grundvallaratriðum gerir þér kleift að draga fram frumefni á síðunni á einhverjum atburði (segjum, hnappapressa) til að vekja athygli notandans á þeim þætti. Það er erfitt að lýsa því með orðum að fullu, farðu svo yfir á https://materializecss.com/feature-discovery.html til að sjá hvað ég meina.

Allt í allt er Materialize frábært valkostur við Bootstrap eða fyrir þá sem eru að leita að nýta sér fullan efnis CSS ramma.

Niðurstaða

Bootstrap er samheiti við móttækileg hönnun. Það var Bootstrap sem útbreiddi hugtakið „hreyfanlegur fyrst hönnun“ og sýndi hvernig hægt var að gera það. En þó Bootstrap fái verkið oftast er það ekki alltaf nóg að fá starfið. Ef þér líður eins og Bootstrap takmarki þig og að þarfir þínar séu sérstakar, mun einn af valkostunum sem talin eru upp hér hjálpa. ��

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