10 najlepších rámcov CSS pre front-end vývojárov

Raz som počul front-endový vtip pre vývojárov: „NASA pristál robotov na Marse a tu sa stále snažíme vyrovnať naše divy!“ A je mi zle, že tento vtip má v sebe veľa pravdy. Urobiť niečo, čo znie tak ľahko a zdravo, ako je sústredenie krabice v krabici, je v CSS neuveriteľne ťažké. Pokiaľ ste sa s tým už nestretli. Útržok kódu sa niekde uložil. A aj keď sa vám to podarí, stále sa skrýva číry strach, že sa to niekde v nejakom hlúpom prehliadači môže strašne zlomiť! CSS sa viaže na prvé miesto „potrebných webových zlých“ spolu s JavaScriptom. Je to štandard, ktorý sa vyvinul náhodne, bol interpretovaný rôznymi výrobcami prehľadávačov odlišne a je teraz taký rozpory, že sa nikto neodváži nazývať „expertom na CSS“.


Niet divu, že časom sa objavili rámce CSS a odstránili väčšinu bolesti. Dnes si nedokážeme predstaviť kódovanie bez nášho obľúbeného rámca CSS, pretože zacielenie na niekoľko veľkostí obrazovky sa stalo nevyhnutnosťou.

Ako však viete, že váš rámec je pre danú prácu najlepší? Taktiež, ak ste v oblasti frontendov nováčikom, ktorý rámec by vám mal pomôcť pri výbere?

Tento príspevok vrhá obrovský pohľad na front-end vývojové prostredie a porovnáva front-runners medzi rámcami CSS. Ak ste už unavení z pravidiel kódovania rúk CSS, pustite sa do rýchlej úľavy!

bootstrap

Iniciatíva Twitteru, bootstrap uznáva zavedenie responzívneho dizajnu vo veľkom meradle. Bol to prvý rámec, ktorý presadzoval filozofiu „mobilný prvý“. Už viac nenavrhoval samostatný projekt pre menšie veľkosti obrazovky; všetko, čo musíte urobiť, bolo zahrnúť príslušné triedy Bootstrap a dizajn by sa automaticky prispôsobil rôznym veľkostiam obrazovky (dobre, takmer).

Citlivý dizajn v Bootstrap (4.0 vs. 3.0)

Bootstrap dosiahol responzívny dizajn zavedením myšlienky mriežky. Mriežka je neviditeľná časť obrazovky do stĺpcov (spolu so šírkou). Napríklad, ak máte tri „políčka“, ktoré chcete umiestniť vedľa seba na veľkých obrazovkách, ale vertikálne na menších obrazovkách, postupujte takto:

Jeden z troch stĺpcov

Jeden z troch stĺpcov

Jeden z troch stĺpcov

Aktuálna populárna verzia Bootstrap je 4, ktorá bola hlavnou generálnou opravou oproti sérii 3.3. Vyššie uvedená syntax je, ako by ste kódovali v Bootstrap 4, ktorý vďačí za svoju eleganciu surovej sile flexboxu a ďalšie moderné funkcie rozloženia priamo podporované prehľadávačmi. V dolných verziách Bootstrapu bola mriežka definovaná ako celkom 12 stĺpcov, čoho výsledkom bol kód, ako napr

Ak chcete deliť, zaberajte jednu tretinu šírky obrazovky na veľkých zariadeniach a polovicu šírky na stredne veľkých zariadeniach. Syntax je teraz omnoho príjemnejšia, vyžaduje si však znalosť Flexboxu.

Výhody pre Bootstrap

O službe Bootstrap je veľa rád, najmä pre vývojárov s úplnými zásobníkmi:

  • Rapídne prototypovanie: Pri zavádzaní systému Bootstrap už nemusíte premýšľať o zložitej polohe CSS a nekompatibilite prehliadača. Všetko, čo musíte urobiť, napísať HTML a potom použitie príslušných tried CSS spôsobí, že odozva ožije.
  • Veľký ekosystém: Od dnešného dňa má Bootstrap najväčší ekosystém medzi front-end rámcami. Počet rozložení webových stránok, motívov, správcovských panelov, komponentov používateľského rozhrania atď. Vytvorených pomocou nástroja Bootstrap je ohromujúci a neustále sa zlepšuje. Pre konzultantov a produktové spoločnosti to znamená, že vopred pripravené položky a komunitná podpora budú vždy dosť.
  • Podporené Twitterom: Novým trendom v oblasti otvoreného zdroja je nárast projektov sponzorovaných komerčným subjektom. Tieto subjekty častejšie stavajú ziskové podniky okolo ich ponuky. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) atď., Sú niektoré príklady. Ak je projekt podporený etablovaným subjektom a nejde o ukážku jednej osoby, dáva komunite (najmä podnikovým zákazníkom) vieru, že projekt bude mať jasný plán a dlhodobú budúcnosť.
  • Veľká zbierka komponentov: Bootstrap ponúka už takmer všetky komponenty používateľského rozhrania, ktoré budete pravdepodobne potrebovať. Navigácia, formuláre, karty, modály, tlačidlá, znaky, ukazovatele priebehu, výstrahy. , , Pomenujete ho a Bootstrap ho má. Pre mnoho spoločností to prakticky znižuje potrebu mať vyhradený front-end tím.
  • Podpora LESS a SASS: Medzi masívne populárnymi rámcami CSS je Bootstrap jediný, ktorý podporuje LESS aj SASS. Áno, viem, nepoužívate LESS (ako by nemal žiadny nerešpektujúci vývojár, nie?), Ale sú tu obrovské projekty, ktoré sa spoliehajú na LESS. Samozrejme si nemôžete vybrať ani zapísať svoje jednoduché súbory CSS.

Nevýhody systému Bootstrap

Nič nie je bez ceny, hm? Bootstrap nie je výnimkou. Postupom času sa Bootstrap ocitol pod silným ohňom návrhárov a odborníkov na UI. Tu je dôvod:

  • Monotónnosť UX: Samotná skutočnosť, že Bootstrap má tak veľkú zbierku vstavaných výsledkov, je výsledkom webových stránok, ktoré vyzerajú príliš dobre známe a celkom úprimne nudné. Potrebujete len hlavu oficiálne príklady aby ste videli, koľko z očí je predvolené nastavenie. Stačí vyhľadať výraz „všetky webové stránky so zavádzacou technológiou vyzerajú rovnako“ a budete vedieť, čo tým myslím. ��
  • Styling strasti: Bootstrap je to, čo by sa mohlo považovať za rámec s názormi. Inými slovami, má predstavy o rozvrhnutích a umožňuje vám pracovať mimoriadne tvrdo, ak chcete, aby vyzerali / správali sa inak. Zvážte predvolené body prerušenia CSS pre šírky obrazovky: stredne veľká obrazovka pre Bootstrap je taká, ktorá začína na šírke zariadenia 768px. A čo ak chcete zacieliť, povedzme, limit 600px? Veľa šťastia s tým! Rovnaké je to s takmer všetkými ostatnými komponentmi v bootstrape: riadky a kontajnery majú predvolené čalúnenie, tlačidlá majú farby a orámovania, ktoré je veľmi zložité prepísať bez veľkého množstva práce, atď..

Chcieť majster Bootstrapu? Vyskúšajte to online kurz Brad Traversy.

nadácie

Keby technológie boli náboženstvá, nadácia a chlapci z Bootstrapu by boli pre druhú krv. Diskusia o moderných rámcoch CSS nie je úplná bez toho, aby sme spomenuli nadáciu, takže sme tu.

Zamierte na nadáciu webové stránky, a nemôžete si pomôcť, ale všimnite si vedľajšiu líniu: „Najpokročilejší responzívny front-end framework na svete.“ Na prvý pohľad to vyzerá ako vysoký nárok ísť s marketingovou kampaňou.

Stúpenci rámca nadácie však vedia, že v tom je aspoň určitá pravda. Nadácia bola vyvinutá tak, aby prirodzene fungovala s rámcom Rails. V práci je možné vidieť niekoľko základných princípov „zenového“ typu Rails.

Napríklad, ak chcete riadok, ktorý obsahuje dva prvky na malých obrazovkách, tri na stredných a štyri na veľkých, bude ekvivalentný kód v Nadácii vyzerať takto:

V porovnaní s predchádzajúcimi verziami systému Bootstrap sa mi zdá veľmi intuitívne a ľahko zapamätateľné. Už nie je viac ako dvanásť stĺpových mriežok a zisťuje, čo má byť 4/12!

Aj keď je Foundation oveľa menej populárna ako Bootstrap, je to obchodné tajomstvo pre mnohých skúsených vývojových pracovníkov.

Výhody nadačného rámca

Nadácia má niektoré neobvyklé vlastnosti zo všetkých rámcov CSS, ktoré sa chystáme zvážiť v tomto článku:

  • Kompletné vybavenie: Je technicky nesprávne povedať, že nadácia je rámcom CSS. Myslím, že je, ale bol postavený ako veľká a modulárna zbierka nástrojov, ktorej cieľom je vyriešiť takmer všetky druhy front-end problémov. Pre webové stránky a e-maily existujú samostatné rámcové ponuky, ktoré sú výrazne optimalizované pre príslušné domény. Nadácia tiež prichádza s rozhraním príkazového riadku (CLI), ktoré bude znieť ako hudba pre vývojárov zvyknutých pracovať s Webpackom alebo inými modulmi..
  • Extrémna flexibilita: Na rozdiel od systému Bootstrap bola nadácia postavená tak, aby vývojárovi front-end získala úplnú kontrolu nad svojimi používateľskými rozhraniami. Výsledkom bude, že sa nadácia bude pre nováčika cítiť nevýrazná a nesmierne zložitá. Dôvodom však je, že nadácia na vás nenúti žiadny jazyk štýlov, ale jeho cieľom je byť tým, čím je: vynikajúci rámec CSS.
  • Viac ako len súčasti používateľského rozhrania: Aj keď nadácia má obvyklý súbor prvkov používateľského rozhrania, ide nad rámec povinnosti. Vývojári zahŕňajú pokročilý responzívny obrazový systém, komponent tabuľky cien (áno, ten, ktorý sa používa na zobrazenie rôznych cenových plánov), validácia formulárov, podpora sprava doľava, responzívne vloženia a ďalšie. Chcel by som znova zdôrazniť, že ide o nadmernú mieru pre najjednoduchšie webové stránky, ale pre veľké webové stránky bude prínosom pre skúsených vývojárov..
  • Školenie a poradenstvo: Teraz, keď Bootstrap vytvára Twitter, je to vedľajší projekt a veľmi malá časť celkového obrazu. Spoločnosť za Nadáciou (ZURB) sa však zaväzuje ju využívať, rozvíjať a propagovať. Veľkým zákazníkom sú ponúkané školenia a odborné poradenstvo, čo je skvelé pre spoločnosti, ktoré sa zameriavajú na rozsiahle projekty a sú ochotné zaplatiť.

Nevýhody nadačného rámca

Silné stránky jedného rámca sa stávajú jeho slabými stránkami pri pohľade z opačného hľadiska. Z tohto dôvodu nemusí byť nadácia pre váš projekt tou najlepšou voľbou:

  • Malá (er) komunita: Komunita nadácie je omnoho menšia ako komunita Bootstrapu. Ak skúšate niečo exotické a uviaznete, šanca na nájdenie príslušnej pomoci je nižšia. Dodal by som však, že na všetky praktické účely; tam je dosť komunity. Je to len o to, že je o niekoľko rádov menších ako Bootstrap, takže nemusíte nájsť riešenia okamžite.
  • zložitosť: Ak ste zvyknutí na Bootstrap alebo niečo jednoduché alebo horšie na vanilkovú CSS, nadácia sa bude cítiť ako nekonečná explózia zložitosti. Vrstvy vo vrstvách, komponenty s komponentami, nekonečné možnosti prispôsobenia. , , Čoskoro začnete pochybovať o užitočnosti samotného života! Nadácia však má opäť veľmi odlišný cieľ a za to nemôže byť obviňovaná.
  • Príliš veľa možností: Niekedy si len chcete urobiť sračky a starať sa o dokonalosť neskôr. Počas týchto časov je frustrujúce predstavovať priveľa možností s malými odchýlkami. Napríklad, keď budete takí hladní, budete si musieť objednať sendvič v metre, takže by ste mohli jesť blato. Nadácia samozrejme tak často nie je.
  • Dostupnosť talentov: Pretože nadácia je (oveľa) menej populárna ako Bootstrap, dostupný talent je oveľa menší. Spravidla je pravdepodobné, že každá nová zmluva Bootstrap pozná Bootstrap, ale nebude mať potuchy o nadácii. Učenie si vyžaduje čas a je to luxus, ktorý nemôžu mať všetky tímy.

Bulma

Bulma je relatívne novým účastníkom bojiska rámcov CSS a v krátkom čase si vytvorila meno. Jeho atraktivita spočíva v prísnom prístupe založenom iba na CSS (neexistujú komponenty jazyka JavaScript) a elegantných predvolených nastaveniach, s ktorými majú mnohí vývojári s dobrým okom pre dizajn problém pri práci s programom Bootstrap..

Veľká časť dynamiky Bulmy pochádza z vysokej miery adopcie s komunitou Laravel (webový rámec PHP, ak ste to nevedeli), čo je isté, čo pomohlo Vue.js zvýšiť popularitu. medzi rámcami JavaScript.

Prečo si vybrať Bulma CSS Framework

Existuje veľa dôvodov, prečo sa vám Bulma páči a používa ju pre váš ďalší projekt:

  • Docela populárne: Dobre, nie je to viac populárne ako Bootstrap, ale je to populárnejšie ako Foundation. V čase písania má Bulma na Githube 30 000+ hviezd, okolo 3 000+ viac ako nadácie. Niekoľko hviezd Githubov samozrejme nie je metrikou zásluh, ale hovorí, že spoločenstvo Bulma schvaľuje..
  • Mimoriadne čitateľné triedy: Bulma má pre mňa najčítateľnejšie triedy CSS zo všetkých rámcov, ktoré som vyskúšal. K dispozícii je tiež smiešne výkonný a jednoduchý systém na vytváranie mriežok v štýle metra, ktorý sa nazýva dlaždice (pozrite sa na kód v druhej polovici snímky obrazovky a povedzte, že na vás nie je ohromený!).

  • Plochá krivka učenia: Bulma je vysoko modulárny a bol vytvorený na riešenie praktických každodenných problémov, s ktorými sa stretávajú menšie tímy a jednotliví vývojári. Zistíte, že Bulmu sa dá veľmi ľahko naučiť, aj keď si myslím, že slušné pozadie v CSS je vždy dobré mať predstavu o tom, čo by sa mohlo diať pod kapotou. Pomôže vám to, keď chcete potlačiť predvolené správanie.
  • elegantný: Pozrite sa na predvolenú sekciu Hrdina pre Bulmu nižšie. Dosť bolo povedané!

Bulma má malú, ale extrémne vášnivú komunitu, takže ak sa chcete zbaviť všetkého chmýří a napriek tomu chcete prísť s elegantne vyzerajúcimi používateľskými rozhraniami v rekordnom čase, Bulma je správna cesta. Pre vývojárov systému Bootstrap má Bulma samostatnú sekciu, ktorá ich presvedčí a pomôže im migrovať.

UIKit

To, čo ma napadne pri premýšľaní UIKit je minimalizmus. Minimalizmus nie vo vlastnostiach (v skutočnosti ponúka snáď najviac funkcií všetkých rámcov), ale v dizajne. Ak je vaša vec mimoriadne čistým, elegantným, ne bielym dizajnom, UIkit vás prekryl.

Napríklad, pozrite sa na komponent ukazovateľa priebehu:

Alebo komponent obrazovej značky (interaktívna značka pre obrázky riadená JS):

Alebo dokonca skromný formulár HTML:

Ak to nebude kričať elegancia v hornej časti pľúc, neviem, čo robí. Stačí prejsť na webovú stránku UIkit a pozrieť si všetky neuveriteľné komponenty, ktoré má v ponuke. Pokiaľ váš projektový manažér alebo zákazník na vás núti konkrétny štýl, myslím si, že Uikit berie korunu za dizajn používateľského rozhrania a je niekoľko kilometrov pred materiálnym dizajnom spoločnosti Google..

Ale je tu háčik, premýšľate. Áno, existuje. Rovnako ako Bootstrap, UIkit pracuje s jeho JavaScriptom a hoci môžete použiť jQuery na manipuláciu s DOM, použitie virtuálneho rámca DOM, ako je React, je nemožné.

Uikit je tiež samostatný systém a nebudete ho môcť zmeniť ani rozšíriť bez vynaloženia veľkého úsilia..

Sémantické používateľské rozhranie

Ďalším účastníkom pretekov je Sémantické používateľské rozhranie, ktorá sa snaží rozlíšiť s množstvom tém a prispôsobením. Existuje viac ako 3000 tematických premenných, čo má za následok obrovskú šírku. Alebo tak hovoria dokumenty.

Bootstrap 4 toto všetko pokrýva a je tiež plne prispôsobiteľný, ale jedna výhoda s rozhraním Semantic UI je v predvolenom nastavení pekne vyzerajúcich rozložení. Stále to nie je najlepšie vyzerajúce po vybalení z krabice, a preto som ho neskôr zaradil na zoznam.

Má tiež jednu z najstrmších učebných kriviek a konvencie kódovania sú omnoho prísnejšie. Skús to; Povedal by som, a uvidíme, či to vyzerá ako niečo, čo by si mohol dať.

Susy

Susy je v tomto bode málo známy rámec, je to však fascinujúci a osviežujúci nápad. Susy, ďalší čistý rámec rozloženia, odstraňuje všetky preddefinované nápady vznášania sa, mriežky, Flexboxu, tabuliek alebo čohokoľvek iného a umožňuje vám zostaviť požadované rozloženie. Kľúčové slovo „Compose“ je, pretože Susy je určený na vytváranie vysoko modulárnych rozložiteľných rozložení s mimoriadne komplexnými, nezvyčajnými a presnými potrebami..

V rukách skúseného vývojára je Susy ako plameňomet, ktorý ničí všetko ostatné. Menším smrteľníkom sa samozrejme podarí spáliť ruky.

Ak chcete získať predstavu o moci Susy, vyskúšajte toto predvolené nastavenie (SASS):

4 symetrické fluidné kolóny
// žľaby majú 1/4 veľkosti stĺpca
// prvky prekračujú o 1 menej žľab ako stĺpce
// kontajnery zaberajú aj menej žľabov
$ susy: (
„stĺpce“: podozrivé opakovanie (4),
„odkvapy“: 0,25,
„spread“: „úzky“,
„roztieraný kontajner“: „úzky“,
);

Myslím si, že tento kód je celkom samozrejmý, aj keď to nie je pre tých v zhone. „Zaneprázdnený dáva dokonalý zmysel, ak ste unavení zo všetkého nadúvania, ktoré vám ukladajú moderné rámce, a ak potrebujete rozloženie, viete, že žiadny bežný rámec nemôže slúžiť..

Materialise

Ak máte radi dizajn materiálov spoločnosti Google, Materialize je rámec bude sa vám páčiť. Najlepšie je, že sa má na učenie len niekoľko komponentov a tried a zameriava sa na to, aby ste boli čo najrýchlejšie produktívni. Existuje niekoľko možností prispôsobenia a Materialize sa riadi populárnym 12-stĺpcovým mriežkovým formátom zavedeným programom Bootstrap.

Ak sa ma však spýtate, a Dizajn materiálu sa stáva tak bežným a je to tak. , , Byt je predvolene nastavený tak, že sa ho čoskoro budeme sťažovať, rovnako ako problém týkajúci sa všetkých webových stránok spoločnosti Bootstrap. Stále je to pekný rámec.

rýdze

Je Yahoo mŕtvy?

Nie, táto otázka nie je zneužitím, ale zdôrazňuje dôležité zistenie: spoločnosť Yahoo postavila internet Čistý rámec a vydané na základe licencie BSD.

Rýchly pohľad ma zaujme a zaujímalo by ma, prečo táto ponuka nie je známa viacerým ľuďom. Každopádne, čo robí Pure dobre, je to, že je to čistý rámec CSS. �� V skutočnosti vývojári prešli ďalšiu míľu a rozdelili ju na rôzne moduly CSS, ktoré môžete podľa potreby importovať. Ak teda potrebujete iba mriežkový systém, nemusíte importovať celý CSS a zvyšovať rýchlosť načítania stránok.

Mriežka Pure sa dodáva v niekoľkých variantoch: 5-bodový, 2-bodový, 24-bodový atď., Takže pokiaľ ide o vytváranie stĺpcov, máte oveľa väčšiu flexibilitu. Pure v predvolenom nastavení nie je najlepšie vyzerajúci rámec CSS, ale vidím, ako to prináša pridanú hodnotu tým, ktorí chcú vyriešiť malý problém s CSS vo svojom používateľskom rozhraní a krčiť sa pri „užitočnom“ predvolenom nastavení, ktoré ostatné rámce dodávajú..

kostra

Ako môžete vidieť na snímke obrazovky, kostra je taká minimálna, že sa ani nepovažuje za rámec CSS, knižnicu alebo dokonca modul. Je to doska a obsahuje iba 400 riadkov zdrojového kódu! Neuveriteľné? Myslím si to, ale Skeleton bol navrhnutý pre malé alebo malé projekty, ktoré potrebujú niečo viac ako rozloženie a umiestnenie..

Vyplatí sa pozrieť; koniec koncov, kto vie, môže byť Skeleton to, čo ste hľadali po celú dobu!

miligram

Posledné v zozname je miligram, rámec CSS navrhnutý pre rýchlosť a produktivitu. Vývojári ho udržiavali pod veľkosťou 2 KB, čo podľa dnešných štandardov veľa znamená.

Miligram je zábavná malá záležitosť v rámci CSS, s ktorými určite oceníte spoluprácu. Rozšírenie je jednoduché a pomocou niekoľkých riadkov prispôsobeného CSS môžete zmeniť jeho vzhľad tak, ako chcete.

Ktorý rámec CSS je teda najlepší?

Priznajte, predtým ste si položili podobné otázky a dostali ste túto sklamanú odpoveď: žiadna. �� Výber rámca (alebo nástroja, alebo dokonca osoby vo vašom živote, na to príde) závisí od mnohých faktorov. Ak chcete moju radu, tu je: Vystrihnite hluk. To, že sa ľudia zbláznili do niečoho nového a lesklého, neznamená, že sa to musíte naučiť alebo že vám zostanú pozadu. Vyskúšať nové veci je skvelé, ale behanie v kruhoch pri hľadaní dokonalého nástroja je, samozrejme, mrhanie.

Ktorý z týchto rámcov ste vyskúšali? Alebo možno niečo ohromuje tam, čo mi práve uniklo? Prosím, dajte mi vedieť v komentároch. Láska, nenávisť, náhodné ahoj, všetci sú vítaní!

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