10 legjobb CSS-keretrendszer a front-end fejlesztők számára

Egyszer hallottam egy front-end fejlesztői viccet: “A NASA robotokat szállított le a Marsra, és itt még mindig küzdünk a div-ek középpontba állítása érdekében!” És rosszul érzem magam, hogy ebben a viccben sok igazság található benne. Hihetetlenül nehéz kidolgozni egy olyan dolgot, amely ugyanolyan egyszerű és józan ész-vezéreltnek tűnik, mint egy doboz egy dobozban történő központosítása. Hacsak nem találkoztál vele korábban. És elmentette valahol a kódrészletet. És még akkor is, ha sikerül leszerezni, mindig fennáll a rejtett félelem, hogy borzasztóan eltörhet valamely hülye böngészőben valahol! A CSS kapcsolatot teremt a „szükséges webes bajok” első helyén, a JavaScript mellett. Ez egy olyan szabvány, amelyet véletlenül fejlesztettek ki, a különböző böngészőgyártók eltérően értelmezték, és most annyira tele van ellentmondásokkal, hogy senki sem merte magát „CSS-szakértőnek” hívni..


Nem csoda, hogy a CSS-keretek idővel kialakultak, és a fájdalom nagy részét elvették. Ma nem tudjuk elképzelni a kódolást a kedvenc CSS keretünk nélkül, mivel a képernyők méretének megcélzása szükségessé vált.

De honnan tudja, hogy az Ön kerete a legmegfelelőbb a kézhez vett munkához? Ha még nem ismeri a front-end fejlesztést, melyik keret segíthet Önnek kiválasztásában?

Ez az üzenet elsöprő pillantást vet a front-end fejlesztési tájra, és összehasonlítja az első helyezettket a CSS keretek között. Tehát, ha fáradt a CSS-szabályok kódolásáról, merüljön el néhány gyors megkönnyebbülés mellett!

bootstrap

A Twitter kezdeményezése, bootstrap nagyra értékeli az érzékeny formatervezés bevezetését. Ez volt az első keret, amely elősegítette a „mobil először” filozófiáját. A kisebb képernyőméretekre már nem önálló projektet tervezett; mindössze annyit kellett tennie, hogy magába foglalta a megfelelő Bootstrap osztályokat, és a kialakítás automatikusan igazodik a különböző képernyőméretekhez (nos, majdnem).

Érzékeny kialakítás a Bootstrap alkalmazásban (4.0 vs. 3.0)

A Bootstrap reagáló kialakítást ért el azáltal, hogy bevezette a rács ötletét. A rács a képernyő láthatatlan oszlopokra osztása (a szélességgel együtt). Például, ha három „doboz” van, amelyeket nagy képernyőkön egymás mellett akar elhelyezni, de kisebb képernyőkön függőlegesen, akkor ezt tenné:

A három oszlop egyike

A három oszlop egyike

A három oszlop egyike

A Bootstrap jelenlegi népszerű verziója a 4, amely a 3.3-as sorozat jelentős átalakítása volt. A fenti szintaxis hogyan kódolja a Bootstrap 4 programot, amelynek nagy része eleganciájának köszönhető a flexbox és más modern elrendezési funkciókat, amelyeket a böngészők közvetlenül támogatnak. A Bootstrap alsó verzióiban a rácsot összesen 12 oszlopként definiálták, ami olyan kódot eredményezett, mint például

a felosztáshoz a képernyő szélességének egyharmadát a nagyméretű eszközöknél, a szélesség felét pedig a közepes méretű eszközöknél kell elvégezni. A szintaxis sokkal kellemesebb, bár megköveteli a Flexbox ismereteit.

Bootstrap profik

Nagyon tetszik a Bootstrap, különösen a full stack fejlesztők számára:

  • Gyors prototípus: A Bootstrap használatával szinte nincs szükség arra, hogy gondolkodjon a trükkös CSS helymeghatározáson és a böngésző kompatibilitásain. Mindössze annyit kell tennie, hogy kiírja a HTML-t, majd a megfelelő CSS-osztályok alkalmazásával élénkül a válaszkészség.
  • Nagy ökoszisztéma: Mára a Bootstrap rendelkezik a legnagyobb ökoszisztémával a front-end keretek között. A Bootstrap használatával készített webhely-elrendezések, témák, adminisztrációs panelek, felhasználói felület-összetevők stb. Száma figyelmeztető, és folyamatosan javul. A tanácsadók és a termékcégek számára egyaránt ez azt jelenti, hogy előre elkészített termékek vannak, és a közösségi támogatás mindig bőséges lesz.
  • Twitter támogatja: A nyílt forráskódban megjelenő tendencia a kereskedelmi szervezetek által szponzorált projektek megjelenése. Gyakran előfordul, hogy ezek a szervezetek nyereséges vállalkozásokat építenek kínálatuk körül. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) stb. Ha a projektet egy létrehozott szervezet támogatja, és nem egyszemélyes show, a közösségnek (különösen a vállalati ügyfeleknek) hite ad, hogy a projektnek világos útiterve és hosszú távú jövője lesz.
  • Komponensek nagy gyűjteménye: A Bootstrap a dobozból szinte minden olyan felhasználói felületet kínál, amelyre valószínűleg szüksége van. Navigáció, űrlapok, kártyák, módok, gombok, kitűzők, folyamatjelző sávok, riasztások. . . Nevezted, és a Bootstrap megkapja. Sok vállalat számára ez gyakorlatilag csökkenti a dedikált front-end csapat szükségességét.
  • KISM és SASS támogatás: A rendkívül népszerű CSS keretek között a Bootstrap az egyetlen, amely mind a LESS, mind a SASS támogatást támogatja. Igen, tudom, nem használsz kevesebbet (ahogy önmagát tiszteletben tartó fejlesztőnek nem kellene, igaz?), De hé, vannak olyan hatalmas projektek, amelyek kevésbé támaszkodnak. Természetesen egyiket sem választhatja, és kiírhatja a sima CSS-fájljait.

Bootstrap Cons

Semmi sem ár nélkül, mi? Nos, a Bootstrap sem kivétel. Az idő múlásával a Bootstrap súlyos tűz alá került a tervezők és az UI szakértői által. Ez az oka annak:

  • UX monotonitás: Az a tény, hogy a Bootstrapnek ilyen nagy beépített gyűjteménye van, olyan webhelyeket eredményez, amelyek teljesen ismerősnek és őszintén szólva unalmasnak tűnnek. Csak oda kell mennie a hivatalos példák hogy megnézze, hogy mekkora része van az alapértelmezettnek. Csak keressen rá: „az összes bootstrap-webhely ugyanolyannak tűnik”, és tudni fogja, mire gondolok. ��
  • Stílusos bánat: A Bootstrap az, amit tekinthetõ keretnek tekinthetünk. Más szavakkal, elképzelései vannak az elrendezésekről, és extra kemény munkát készít, ha azt akarja, hogy másképp nézzen ki / viselkedjen. Vegye figyelembe az alapértelmezett CSS-töréspontokat a képernyőszélességnél: A Bootstrap közepes méretű képernyője 768px-es eszközszélességgel kezdődik. És mi van, ha azt akarja célozni, mondjuk, a 600 képpont korlátját? Nos, sok szerencsét ehhez! Ugyanaz, mint a bootstrap szinte minden más alkatrészén: a sorok és a tárolók alapértelmezett betétjei vannak, a gombok színei és szegélyei nagyon bonyolultak, hogy sok munka nélkül felülbírálhatók legyenek stb..

Akarni elsajátítani a Bootstrap-ot? Nézd meg ezt online tanfolyam Brad Traversy által.

Alapítvány

Ha a technológiák vallások lennének, az Alapítvány és a Bootstrap srácok ki vannak téve egymás vérének. A modern CSS-keretekről szóló vita nem fejeződik be anélkül, hogy megemlítenénk az Alapítványt, tehát itt megyünk.

Vezesse az Alapítványt weboldal, és nem tudod észrevenni a következő szövegrészt: „A világ legfejlettebb érzékeny kezelőfelület-kerete”. Első pillantásra úgy néz ki, mint egy magas igény, hogy marketing kampánnyal járjon.

Az Alapítvány keretrendszerének hívei azonban tudják, hogy ennek legalább van valami igaza. Az Alapítványt úgy fejlesztették ki, hogy a Rails kerettel természetes módon működjön, és a Rails számos „zen-szerű” alapelve látható a munka során.

Például, ha olyan sort szeretne, amelyben két elem szerepel a kis képernyőn, három közepes és négy nagy képernyőn, akkor az ekvivalens kód az Alapítványban így néz ki:

A Bootstrap korábbi verzióival összehasonlítva ezt nagyon intuitívnak és könnyen megjegyezhetőnek tartom. Nincs több tizenkét oszloprács, és kitalálom, hogy mi legyen a 4/12-nek!

Noha az Alapítvány sokkal kevésbé népszerű, mint a Bootstrap, sok szakértő front-end fejlesztő számára üzleti titok.

Az alapítvány kerete

Az Alapítvány néhány szokatlan tulajdonsággal rendelkezik azon CSS-keretek közül, amelyeket ebben a cikkben megvizsgálunk:

  • Teljes szerszám: Technikailag helytelen azt mondani, hogy az Alapítvány CSS-keret. Úgy értem, hogy van, de azt egy nagyméretű és moduláris eszközgyűjteményként építették, amelynek célja szinte mindenféle front-end probléma megoldása. Külön weblap-ajánlatok vannak webhelyekhez és e-mailekhez, erősen optimalizálva a saját domainjükhöz. Az Alapítványhoz egy parancssori felület (CLI) is tartozik, amely zenének hangzik a Webpack vagy más modulcsomagolókkal szokott fejlesztők fülében..
  • Rendkívüli rugalmasság: A Bootstrap-szal ellentétben az Alapítványt úgy építették fel, hogy az elsődleges fejlesztők számára teljes ellenőrzést biztosítson felhasználói felületeik felett. Ennek eredményeként az Alapítvány unalmasan és rendkívül bonyolultan fogja érezni magát az újonnan érkezőkkel szemben. Ennek oka azonban az, hogy az Alapítvány nem erőlteti semmiféle stílusnyelvet, hanem arra törekszik, hogy éppen az legyen: kiváló CSS ​​keretrendszer.
  • Nem csak a felhasználói felület komponensei: Míg az Alapítvány rendelkezik a felhasználói felület elemeinek szokásos gyűjteményével, ez jóval meghaladja a kötelesség igényét. A fejlesztők tartalmaztak egy fejlett adaptív képalkotó rendszert, egy árazási táblázati komponenst (igen, az a, amely különféle árazási terveket mutatott be), űrlap-érvényesítést, jobbról balra támogatást, reagáló beágyazást és még sok más. Szeretném még egyszer hangsúlyozni, hogy ez túl sok a legtöbb egyszerű webhelynél, de a nagy webhelyek esetében ez egy áldás, amelyet a tapasztalt fejlesztők felismernek.
  • Képzés és tanácsadás: Most, míg a Bootstrap-ot a Twitter hozta létre, ez egy mellékprojekt és a kép egészének nagyon kis része. Az Alapítvány mögött álló cég (ZURB) azonban elkötelezett amellett, hogy felhasználja, fejlessze és támogassa azt. Képzéseket és szakmai tanácsadást kínálunk nagy ügyfelek számára, ami nagyszerű azoknak a cégeknek, amelyek nagy projekteket céloznak meg és hajlandók fizetni.

Az alapítvány kerete hátrányai

Az egyik keret erősségei ellentétes szempontból tekintve gyengeségeikké válnak. Így lehet, hogy az Alapítvány nem a legjobb választás a projektjéhez:

  • Kis közösség: Az Alapítvány közössége sokkal kisebb, mint a Bootstrapé, és ha valami egzotikusat próbál, és elakad, akkor a releváns segítség megtalálásának esélye alacsonyabb. Hozzátenném azonban, hogy minden gyakorlati célból; elég egy közösség odakint. Csak az, hogy több nagyságrenddel kisebb, mint a Bootstrapé, ezért előfordulhat, hogy nem talál azonnal megoldást.
  • Bonyolultság: Ha hozzászokott a Bootstraphez vagy valami egyszerűhez, vagy ami még rosszabb, a vanília CSS-hez, az Alapítvány úgy fogja érezni magát, mint a komplexitás végtelen robbanása. Rétegek, rétegek, komponensek, végtelen testreszabási lehetőségek. . . Nagyon hamarosan megkérdőjelezi az élet hasznosságát! De az Alapítványnak másképp van más célja, ezért nem hibáztatható érte.
  • Túl sok lehetőség: Időnként csak azt akarja, hogy elkészüljön a szar, és később aggódjon a tökéletesség miatt. Ilyen időkben bosszantó, ha túl sok lehetőséget mutat be kisebb eltérésekkel. Gondoljon például arra, hogy meg kell rendelnie egy Subway-szendvicset, ha olyan fájdalmasan éhes vagy, hogy iszapot fogyaszthat. Az Alapítvány természetesen nem ilyen időkben.
  • Tehetség elérhetősége: Mivel az Alapítvány (sokkal) kevésbé népszerű, mint a Bootstrap, sokkal kevesebb a rendelkezésre álló tehetség. Általános szabály, hogy minden új bérlet szinte valószínűleg ismeri a Bootstrap-ot, de nem lesz tudomása az Alapítványról. A tanulás időt vesz igénybe, és ez olyan luxus, amely nem minden csapat rendelkezésére áll.

Bulma

Bulma egy viszonylag új belépő a CSS keretrendszerének csatatéréhez, és rövid idő alatt megnevezte magát. Vonzereje a szigorú, csak a CSS-re épülő megközelítésben (nincsenek JavaScript-összetevők) és az elegáns alapértelmezésekben, ami sok fejlesztőnek, akinek jó a szem a tervezésre, problémát jelent a Bootstrap használatakor.

A Bulma lendületének nagy része a Laravel (egy PHP webes keret, ha nem tudtad) ​​közösséggel történő elfogadásból adódik, ami biztos vagyok benne, hogy nagyjából segítette a Vue.js-t a népszerűség magasságában. a JavaScript-keretek között.

Miért válassza a Bulma CSS keretet?

Sok oka van annak, hogy kedveli a Bulmát, és használja azt a következő projektbe:

  • Elég népszerű: Oké, nem sokkal népszerűbb, mint a Bootstrap, de népszerűbb, mint az Alapítvány. Írás óta Bulmának 30 ezer csillaga van a Githubon, körülbelül 3 ezerrel több, mint az Alapítványoknál. Természetesen számos Github csillag nem jelent érdemi mutatót, de azt mondja, hogy a közösség jóváhagyja Bulmát.
  • Rendkívül jól olvasható osztályok: Számomra a Bulma a legolvashatóbb CSS-osztályokkal rendelkezik az összes megpróbált keretem közül. Van egy nevetségesen nagy teljesítményű és egyszerű rendszer a csempéknek nevezett metró stílusú rácsok létrehozásához (csak nézd meg a képernyőképernyő második felében található kódot, és mondd meg, hogy nem vagy lenyűgözve!).

  • Lapos tanulási görbe: A Bulma rendkívül modulárisan épült és olyan gyakorlati, mindennapi problémák megoldására készült, amelyekkel a kisebb csapatok és az egyes fejlesztők találkoznak. Megállapíthatja, hogy a Bulma nagyon könnyű megtanulni, bár úgy gondolom, hogy a CSS megfelelő háttere mindig jó, ha elképzelésünk van arról, hogy mi történhet a motorháztető alatt. Ez segít abban az esetben, ha felül kívánja utasítani az alapértelmezett viselkedést.
  • Elegáns: Nos, vessünk egy pillantást a Bulma alapértelmezett Hero szakaszára. Eleget mondott!

Bulma egy kicsi, de rendkívül szenvedélyes közösséggel rendelkezik, tehát ha el akarja szüntetni az összes pelyheket, és mégis rekord idő alatt szeretne elegáns megjelenésű felhasználói felületeket előállítani, a Bulma az út. A Bootstrap fejlesztõi számára a Bulma külön fejezettel rendelkezik, hogy meggyõzze és segítse a migrációt.

UIkit

A dolog, ami eszébe jut, amikor gondolkodik UIkit a minimalizmus. A minimalizmus nem jellemzőiben (valójában az összes keret talán a legtöbb jellemzőjét kínálja), hanem a formatervezésben. Ha szuper-tiszta, elegáns, nem szóközzel félénk minták az ön dolga, akkor az UIkit fedezi.

Vessen egy pillantást az előrehaladási sáv komponensére:

Vagy a képjelző komponens (JS-vezérelt interaktív marker képekhez):

Vagy akár a szerény HTML formátumot is:

Ha ez nem sikít az eleganciát a tüdő tetején, nem tudom, mit csinál. Csak látogasson el az UIkit webhelyre, és nézze meg az összes hihetetlen összetevőt, amelyeket kínál. Hacsak a projektmenedzser vagy az ügyfél nem kéri rád egy bizonyos stílusnyelvet, úgy gondolom, hogy Uikit viseli a koronát a felhasználói felület kialakításáért, és több mérföldnyire meghaladja a Google Anyagtervezését.

De vajon van-e fogás, kíváncsi vagy? Igen van. Mint a Bootstrap, az UIkit működik a JavaScriptével, és bár a jQuery felhasználható a DOM manipulációjára, a virtuális DOM keretrendszer használata, mint például a React, lehetetlen..

Az Uikit szintén önálló rendszer, és nem fogja tudni módosítani vagy kiterjeszteni anélkül, hogy jelentős erőfeszítést tenné..

Szemantikus felhasználói felület

Egy másik versenyző a versenyen Szemantikus felhasználói felület, amely megpróbálja megkülönböztetni magát sok témával és testreszabással. Több mint 3000 hering változó van, ami hatalmas szélességet eredményez. Vagy így mondják a dokumentumok.

A Bootstrap 4 fajta lefedi mindezt és szintén teljesen testreszabható, de a Semantic felhasználói felület egyik előnye, hogy alapértelmezés szerint szép megjelenésű elrendezéseket eredményez. Ennek ellenére nem a legjobban néz ki a dobozból, ezért később letette a listámba.

Ezenkívül rendelkezik az egyik legszorosabb tanulási görbével, és a kódolási konvenciók sokkal szigorúbbak. Próbáld ki; Azt mondanám, és megnézem, hogy néz ki-e valami olyat, amit jobban szeretne.

Susy

Susy egy kevéssé ismert keret ezen a ponton, de ez egy lenyűgöző és frissítő ötlet. Egy másik tiszta elrendezésű keret, a Susy eltávolítja az összes előre definiált ötletet az úszóról, rácsról, Flexboxról, táblázatokról vagy bármi másról, és lehetővé teszi, hogy összeállítsa a kívánt elrendezést. A „Compose” a kulcsszó itt, mivel Susy kifejezetten moduláris, megdöbbentő elrendezések létrehozására szolgál, rendkívül összetett, szokatlan és pontos igényekkel.

A szakértő fejlesztő kezében Susy olyan, mint egy lángszóró, mint mindent elpusztít. A kisebb halandóknak természetesen sikerül megégni a kezüket.

Hogy képet kapjon a Susy erejéről, mintázza ezt az alapértelmezett beállítást (SASS):

// 4 szimmetrikus, folyadékoszlop
// az ereszcsatorna oszlop méretének 1/4-a
// az elemek 1 kevesebb ereszcsatorna átmérőjűek, mint az oszlopok
// a konténereknek 1 kevesebb ereszcsatorna is van
$ susy: (
„oszlopok”: susy-atkārto (4),
„ereszcsatorna”: 0,25,
‘terjed’: ‘keskeny’,
‘konténer-szórás’: ‘keskeny’,
);

Úgy gondolom, hogy a kód meglehetõsen magától értetõdõ, bár nem a sietõk számára készült. �� Susy-nak tökéletes értelme van, ha fáradt vagy az összes dagadtól, amelyet a modern keretek ránk kényszerítenek, és olyan elrendezési igényei vannak, amelyekről tudod, hogy egy szokásos keret sem szolgálhat.

bekövetkezése

Ha szerelmes vagy a Google Anyagdizájnjában, a Materialize a keretrendszer élvezni fogod. A legjobb az, hogy csak maroknyi összetevővel és osztálytal rendelkezik, és arra koncentrál, hogy a lehető leggyorsabban termeljen. Kevés testreszabási lehetőség van, és a Materialize a Bootstrap által létrehozott népszerű 12 oszlopos rácsformátumot követi.

Ha azonban kérdezel tőlem, a Anyag tervezés annyira általános és így is. . . Alapértelmezés szerint lapos, hogy hamarosan panaszkodni fogunk ezzel, ahogyan a Bootstrap mindenféle webhely-megjelenés-azonos problémájával kapcsolatban. Ennek ellenére ez egy szép keret, amellyel kezdem.

Tiszta

A Yahoo meghalt?

Nem, ez a kérdés nem eltérítés, hanem kiemeli egy fontos megfigyelést: a Yahoo felépítette a Tiszta keret és kiadták a BSD licenc alapján.

A gyors pillantás lenyűgöz, és kíváncsi vagyok, hogy miért nem ismeri ezt az ajánlatot több ember. Mindenesetre, ami tiszta, tiszta, az az, hogy ez egy tiszta CSS keret. �� Valójában a fejlesztők megtették a különbséget, és különféle CSS-modulokra osztották azokat, amelyeket szükség szerint importálhat. Tehát, ha csak a rácsrendszerre van szüksége, akkor nem kell importálnia a teljes CSS-t, és hozzá kell adnia a webhely betöltési idejét..

A Pure rács többféle ízben kapható: 5-pontos, 2-pontos, 24-pontos, stb., Tehát az oszlopok létrehozásakor sokkal nagyobb rugalmassággal rendelkezik. Alapértelmezés szerint a tiszta nem a legszebb CSS-keretrendszer, de látom, hogy hozzáadott értéket képvisel azok számára, akik a felhasználói felületükben egy apró CSS-problémát akarnak megoldani, és az egyéb keretekhez tartozó „hasznos” alapértelmezések esetén összecsapnak.

Csontváz

Mint látható a képernyőképen, Csontváz annyira minimális, hogy nem is nevezi magát CSS-keretrendszernek, könyvtárnak, vagy akár modulnak. Egy kazánlap, és csak 400 sor forráskódot tartalmaz! Hihetetlen? Úgy gondolom, de a dolgok perspektíva szempontjából a Skeleton-t olyan kicsi vagy kis projektekhez fejlesztették ki, amelyeknek alig szükségük van elrendezésre és elhelyezésre..

Érdemes megnézni; elvégre, ki tudja, lehet, hogy a Csontváz az, amit egész idő alatt keresettél!

Milligramm

A lista utolsó Milligramm, a sebesség és a termelékenység érdekében kialakított CSS keret. A fejlesztők 2 KB alatt tartották, ami a mai szabványok szerint sokat jelent.

A milligramm egy szórakoztató kis felvétel a CSS-keretrendszerekbe, amelyekkel értékelni fogod. Bővítése egyszerű, és néhány sor egyedi CSS-sel megváltoztathatja megjelenését a kívánt módon.

Szóval, melyik CSS-keret a legjobb?

Engedd be, hogy hasonló kérdéseket tettek fel már korábban, és a következő kiábrándító választ kapta: nincs. Of A keretrendszer (vagy egy eszköz, vagy akár az életében egy személy kiválasztása) sok tényezőtől függ. Ha kíváncsi vagyok, itt van ez: Vágja ki a zajt. Csak azért, mert az emberek megőrülnek valami új és fényes felett, még nem jelenti azt, hogy meg kell tanulnod, vagy el kell hagynod. Az új dolgok kipróbálása nagyszerű, de a tökéletes eszköz keresésekor körbe-körbe futás felesleges.

Szóval, melyik keretet próbálta? Vagy talán valami megdöbbentő, amit éppen hiányoztam? Kérem, tudassa velem a megjegyzésekben. Szeretet, gyűlölet, véletlenszerű emberek, mind üdvözöljük!

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