Nangungunang 5 Bootstrap Alternatibo

Ang Bootstrap ay nasa lahat ng dako, ngunit hindi ito palaging tamang tool para sa trabaho. Narito ang ilang mga mahusay na kahalili!


Kung susuriin mo ang source code ng front-end ng isang website nang random nang mga araw na ito, pagkakataon na makikita mo sa Bootstrap sa ilalim. Nasanay na kaming lahat sa mga konsepto tulad ng lalagyan-likido, hilera, col-sm-6, atbp, na mahirap isipin na ang anumang iba pang estilo ng pag-unlad sa harap ay posible. At kaya kapag kailangan nating magtayo ng susunod na proyekto, naabot namin ang Bootstrap nang hindi sinasadya. Sinabi nito, ang katanyagan ay hindi ginagawang Bootstrap ng isang mahusay na akma para sa lahat ng mga proyekto at pangangailangan.

Sa katunayan, para sa tunay na sandalan ng harapan, paglo-load ng lahat Bootstrap CSS at JS ay maaaring maging sanhi ng pangunahing bloat.

Ang artikulong ito ay may dalawang layunin:

  1. Bigyan ang mga hindi alternatibong alternatibong alternatibong tulad ng Bootstrap sa Bootstrap
  2. Ipaliwanag kung bakit nais mong isaalang-alang ang mga kahaliling ito sa Bootstrap

Sa palagay ko ang bahagi ng paliwanag ay talagang mahalaga dahil sa karamihan ng mga kaso, hindi alam ng mga tao na mayroon silang problema o na pinapagod nila ang kanilang trabaho sa pamamagitan ng pagpili ng Bootstrap. Sa wakas, mangyaring tandaan na hindi ito isang post ng anti-Bootstrap ng anumang paraan. Gustung-gusto ko ang Bootstrap 4 at ginagamit ko ito hangga’t maaari. Ngunit, kung gayon, ako ay isang indibidwal na developer na kailangang mag-isip ng paggamit ng pinakatanyag na solusyon; din, hindi ako isang developer ng UI per se, kaya hindi ako nag-aalala tungkol sa maraming mga bagay kapag pinapaglarawan ang aking mga harapan.

At doon, tingnan natin kung ano ang mga kahaliliang mayroon tayo.

Flexbox Grid

Isipin ito nang isang minuto: ang pinakamalaking kadahilanan na sinimulan mo ang paggamit ng Bootstrap at ginagamit mo pa rin ito ay ang sistema ng grid nito. Oo naman, nasanay na sa hilera, col-md-6, atbp., Mga klase, ngunit ngayon pangalawang kalikasan na mag-isip ng isang layout sa mga tuntunin ng mga hilera, haligi, offset, atbp.

At kung ikaw ay matapat sa iyong sarili, makikita mo na ang lahat sa Bootstrap ay isang maliit na gawain upang magtrabaho. Mayroong mga tonelada ng mga klase na dapat tandaan, kung gumagawa ka ng mga form, nabigasyon, pindutan, mga talahanayan, o anumang iba pa. Kung gusto mo ako, hindi ka pa nakasanayan sa lahat ng mga klase at kung ano ang ginagawa nila, at madalas kang gumagamit ng Bootstrap lamang para sa grid at isulat ang lahat ng iba pang CSS mismo.

Kung oo, marami kang magagawa Flexbox Grid.

Ang Flexbox Grid, tulad ng iminumungkahi ng pangalan, ay isang sistema ng grid batay sa CSS Flexbox ari-arian. Gayunpaman, hindi tulad ng diskarteng CSS, ang lahat ng pagiging kumplikado ay mahusay na naalis sa malayo upang tumutok ka lamang sa paglalagay ng mga elemento sa gusto mo. Ang pinakamagandang bahagi ay ang lahat ng mga code at pangalan ng klase ay gayahin ang gusto mo sa Bootstrap 4, na nangangahulugang ang paglipat sa pagitan ng dalawang tool na ito ay nangangailangan ng zero na alitan ng kaisipan. Halimbawa, narito kung ano ang code para sa “puwang sa paligid” sa Flexbox Grid:

sa paligid

sa paligid

sa paligid

Ang minified na CSS file para sa sistemang ito ng grid ay isang 10.7 KB na naka-save ka ng ilang daang KB sa panghuling laki ng pag-download. Sa mga araw na ito ang Flexbox Grid ay ang aking paborito dahil ayaw kong labanan ang Bootstrap upang ganap itong ipasadya. Gusto kong magsimula sa mga elemento ng banilya at istilo ang mga ito sa aking sarili, gamit ang Flexbox Grid saanman kailangan.

Alamin Flexbox dito, online.

PureCSS

Hindi ba maganda kung ang Bootstrap ay nahati sa mga module at mai-import mo lamang ang module na kailangan mo?

Kumbaga, PureCSS nauna na at nagawa na – ito ay isang hanay ng mga module na sumasaklaw sa iba’t ibang mga functional na lugar ng isang website. Maaari kang pumili upang mag-download ng isa o lahat, at ang laki ng pag-download ay hindi lalampas sa 3.7 KB!

Oo, nabasa mo iyan ng tama.

Ang lahat ng mga module kapag pinagsama at gzipped ay 3.7 KB, kahit na isa-isa ay nagkakahalaga sila ng higit. Ang grid module ay 0.8 KB lamang, habang ang Base module ay 1.0 KB. Sinabi ng koponan sa likod ng PureCSS na buo itong itinayo na may mga aparatong mobile, at sa gayon ang bawat linya ng CSS ay maingat na sinuri para sa kahusayan bago isinama.

Kaya sabihin na kailangan mo lamang ang module at form module. Kaya, i-download lamang ang dalawang ito (kasama ang Base module), at magawa mo nang mas mababa sa 3.4 KB! Hindi na kailangang isama ang CSS mula sa mga pindutan ng Buttons, Tables, at Menus kung hindi mo gagamitin ang mga ito.

Ang PureCSS ay may mga klase, bagaman, at ang nagresultang code ay hindi gayahin ang Bootstrap na maaari mong sanay na:

Lorem Ipsum

Dolor Sit Amet

Proident laborum

Praesent consectetur

Mapapansin mo na wala nang 12-haligi na grid. Ang PureCSS ay mayroong sistema ng grid na tumutukoy kung gaano karaming lapad ang dapat gawin ng isang haligi. Kaya, ang purong-u-lg-1-4 ay nangangahulugang ang elementong ito ay dapat kumuha ng 1/4 o 25% ng magagamit na lapad sa malalaking mga screen. Ang mga lapad bilang multiple ng 1/5 ay magagamit din.

Lahat sa lahat, ang PureCSS ay isang liberating at kamangha-manghang tool ng CSS (balangkas?) Na maaari mong piliin at pumili mula sa kung kinakailangan. Iyon ay sinabi, ito ay dumating sa isang makatarungang halaga ng buy-in at curve ng pagkatuto dahil kailangan mong malaman ang isang bago (bahagyang magkaibang) paraan ng paggawa ng mga bagay.

Ang PureCSS ay mayroon ding sariling mga klase at default na estilo, kaya’t, hindi ito masyadong naiiba sa Bootstrap.

Hangganan

Ang Hangganan balangkas ay uri ng isang kakatwa-tao-out sa listahan na ito. Oo, ito ay isang balangkas para sa pagbuo ng mga UI, ngunit naglalayong ito sa mga partikular na uri ng UI: mga pangungutya.

Mayroong mga oras kung kailan kailangan mong bumuo ng front-end para sa pagpapakita ng paggana ng produkto. Ang perpektong paraan upang gawin ito, siyempre, ay upang makakuha ng isang disenyo ng UI / developer na kasangkot at lumikha ng mga pangungutya sa isa sa mga advanced na tool ng wireframing (Moqups, Blasmic, atbp., Isipin). Ang mga pahina ay magiging perpekto ng pixel, makinis at maayos ang pagpili ng kulay, at magiging bukas ang mga pahina para sa pakikilahok, mga pagsusuri, puna, atbp.

Ngunit ang tunay na buhay ay hindi perpekto, at madalas ikaw ang tanging tao sa trabaho at dapat na magsuot ng lahat ng mga sumbrero at magawa ang trabaho. Sa mga oras na iyon, gusto mo ng isang balangkas na:

  • Pinapayagan kang mag-code sa HTML / CSS
  • Ay magaan
  • Mayroong isang malawak na koleksyon ng mga pangunahing sangkap
  • Mayroong isang disente at pare-pareho na wika ng estilo
  • Kung maaari, kahawig ng “greyish” na tono ng disenyo ng wireframe
  • Madaling matuto
  • Mayroong CSS preprocessor built-in

Zimit tseke ang lahat ng mga kahon na ito. Sakto lamang ang 84 KB at may malawak na hanay ng mga sangkap na pipiliin. Narito ang ilang mga halimbawa na natagpuan ko talagang sumasamo, dahil ang pag-coding ng mga ito sa iyong sarili ay tatagal ng maraming oras.

View ng puno

Tinapay

Mga Tab

Marami pang mga goodies upang galugarin. Suriin ang mga ito dito.

Tingnan natin kung ano ang hitsura ng code. Narito kung paano mo gagamitin ang system ng grid sa Zimit:

4 na mga haligi
4 na mga haligi

4 na mga haligi
4 na mga haligi

Ang “c” dito ay nangangahulugang “haligi,” kaya ang “c4” ay nangangahulugang isang haligi na sumasaklaw sa apat na yunit (ang grid ay 12-laki, tulad ng Bootstrap’s). Tunay na katulad ng Bootstrap, at napaka madaling maunawaan, sa aking opinyon.

Lahat sa lahat, ang Zimit ay isang kumpleto at madaling balangkas upang makabuo ng mga prototype ng UI na tumutugon at mabilis na tumingin. Ito ay mas mahusay kaysa sa Bootstrap (pagdating sa prototyping) dahil ang Bootstrap ay mas malaking pag-download at ang nagresultang disenyo ay, mabuti, tacky.

HTML KickStart

Sa karamihan ng mga proyektong itinatayo mo, kritikal ang bilis. Ang pinakamalaking hadlang upang mapabilis ang pagbuo ng web ay ang bahagi sa harap, at ang pinakamalaking “delayer” sa pag-unlad ng harapan ay ang kinakailangang mag-code ng matikas, interactive na mga sangkap. Dahil maraming mga paraan kung saan maaaring kumilos ang isang sangkap, at maraming mga laki ng screen upang pamahalaan, coding, at pamamahala ng mga sangkap ay maaaring maging isang bangungot para sa nag-develop.

HTML KickStart nag-aalok ng isang kahalili.

Ilagay nang simple; ito ay isang koleksyon ng mga talagang malambot na sangkap na maaari mo lamang ihulog sa iyong mga proyekto at mabawasan ang oras ng pag-unlad. Narito ang ilang mga magagandang sangkap na natagpuan ko:

Dropdown

Mga pindutan

Mga tab (nakasentro at may mga icon)

Gumawa ng materyal

Kung gusto mo ang Bootstrap sa katotohanan na mayroon itong handa na solusyon para sa lahat ng mga karaniwang problema sa disenyo ng web, ngunit ikaw ay tagahanga ng estilo ng disenyo ng Materyal, dapat mong subukan Gumawa ng materyal.

Ang materialize ay halos katulad ng Bootstrap – 12-point grid system, offset, at pamilyar na mga sangkap tulad ng mga form, card, atbp. Gayunman, mayroon itong ilang mga goodies na maaaring mag-apela sa marami.

Tulak hila

Ang tampok na push / pull ng Materialize CSS ay nagbibigay-daan sa iyo upang muling ayusin ang mga haligi. Ito ay nakapagpapaalaala sa bagong pamantayan ng Grado ng CSS, kung saan ang layout ay naiiba sa pagkakasunud-sunod ng elemento.

Ang div na ito ay 7-haligi na lapad sa itulak sa kanan ng 5-haligi.
5-haligi ang malawak na hinila sa kaliwa ng 7-haligi.

Nagreresulta ito sa mga sumusunod:

Mapapansin mo na ang mga haligi ay lumipat ng mga lugar, na kung saan ay isang bagay na marahil hindi kapani-paniwala sa tradisyonal na CSS na nakabase sa Bootstrap.

Mga kabutihan ng JavaScript

Mayroong lubos ng ilang mga tampok ng JavaScript at mga epekto na ipinadala sa Materialize. Ang mga tooltip, Toasts (mga abiso ng ephemeral na tulad ng Android), Parallex, Pushpin, atbp, ay ilan sa mga ito. Ang isang talagang kamangha-manghang epekto na nagustuhan ko ay ang FeatureDiscovery, na talaga ay nagbibigay-daan sa iyo upang i-highlight ang isang elemento sa pahina sa ilang kaganapan (sabihin, pindutin ang pindutan) upang maibalik ang pansin ng gumagamit sa elementong ito. Mahirap na ilarawan ito nang lubusan, kaya’t magtungo sa https://materializecss.com/feature-discovery.html upang makita kung ano ang ibig kong sabihin.

Lahat sa lahat, ang Materialize ay isang mahusay na kahalili sa Bootstrap o para sa mga naghahanap na magpatibay ng isang buong tampok na CSS Material na CSS.

Konklusyon

Ang Bootstrap ay magkasingkahulugan na may tumutugon na disenyo. Ito ay Bootstrap na pinapantasyahan ang salitang “mobile-first design” at ipinakita kung paano ito magagawa. Ngunit habang natapos ng Bootstrap ang trabaho nang halos lahat ng oras, ang pagkuha ng trabaho ay hindi palaging sapat. Kung sa palagay mo ay pinipigilan ka ng Bootstrap at espesyal ang iyong mga pangangailangan, makakatulong ang isa sa mga pagpipilian na nakalista dito. ��

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