10 cele mai bune cadre CSS pentru dezvoltatorii front-end

Am auzit cândva o glumă a dezvoltatorilor din partea de față: „NASA a debarcat roboți pe Marte, iar aici încă ne străduim să ne aliniem centrele! Și mă face să mă simt rău că această glumă are mult adevăr în ea. Efectuarea unui lucru care sună la fel de ușor și de bun simț, precum centrarea unei cutii într-o cutie este incredibil de dificil de rezolvat în CSS. Cu excepția cazului în care l-ați întâlnit înainte. Și a salvat fragmentul de cod undeva. Și chiar dacă reușiți să-l scoateți la iveală, există întotdeauna teama pânditoare că s-ar putea sparge oribil pe un browser stupid undeva! Legături CSS pentru primul loc de „rele web necesare” împreună cu JavaScript. Este un standard care a evoluat întâmplător, a fost interpretat diferit de diferiți producători de browser și este acum atât de plin de contradicții încât nimeni nu îndrăznește să se numească „expert CSS”..


Nu este de mirare, atunci, că cadrele CSS au apărut de-a lungul timpului și au îndepărtat cea mai mare parte a durerii. Astăzi nu ne putem imagina codarea fără cadrul nostru CSS preferat, deoarece vizarea mai multor dimensiuni de ecran a devenit o necesitate.

Dar cum știți că cadrul dvs. este cel mai bun pentru jobul la îndemână? De asemenea, dacă sunteți nou la dezvoltarea front-end, ce cadru ar trebui să vă ajute să alegeți?

Acest post aruncă o privire cuprinzătoare asupra peisajului de dezvoltare front-end și compară alergătorii din cadrul CSS. Așadar, dacă te-ai săturat de regulile CSS de codare manuală, scufundă-te pentru o ușurare rapidă!

bootstrap

O inițiativă a Twitter-ului, bootstrap preia creditul pentru introducerea unui design receptiv la scară largă. A fost primul cadru care a promovat filozofia „mobil-primului”. Nu mai proiectam pentru dimensiuni de ecran mai mici un proiect separat în sine; tot ce trebuia să faci era includerea claselor Bootstrap relevante, iar designul se va ajusta automat pentru diferite dimensiuni ale ecranului (bine, aproape).

Design sensibil în Bootstrap (4.0 vs. 3.0)

Bootstrap a realizat un design receptiv prin introducerea ideii de grilă. O grilă este o partiție invizibilă a ecranului în coloane (împreună cu lățimea). De exemplu, dacă aveți trei „cutii” pe care doriți să le poziționați unul lângă altul pe ecrane mari, dar vertical pe ecrane mai mici, aceasta este ceea ce ați face:

Una din trei coloane

Una din trei coloane

Una din trei coloane

Versiunea actuală populară a Bootstrap este 4, care a fost o revizuire majoră a seriei 3.3. Sintaxa de mai sus este modul în care ați codat în Bootstrap 4, care își datorează multă eleganță puterii brute a flexbox și alte caracteristici moderne de aspect acceptate direct de browsere. În versiunile inferioare ale Bootstrap, grila a fost definită ca un total de 12 coloane, ceea ce a dus la un cod cum ar fi

pentru a face ca o div să preia o treime din lățimea ecranului pe dispozitivele de dimensiuni mari și jumătate din lățimea dispozitivelor de dimensiuni medii. Sintaxa este acum mult mai plăcută, deși necesită familiaritate cu Flexbox.

Pro bootstrap

Există foarte multe lucruri de dorit despre Bootstrap, în special pentru dezvoltatorii full stack:

  • Prototipuri rapide: Cu Bootstrap, aproape că nu este nevoie să ne gândim la poziționarea CSS complicată și la incompatibilitățile browserului. Tot ce trebuie să faceți să scrieți HTML-ul, și apoi să aplicați clasele CSS corespunzătoare determină reactivitatea.
  • Mare ecosistem: Începând de astăzi, Bootstrap are cel mai mare ecosistem dintre cadrele front-end. Numărul de machete de site-uri, teme, panouri de administrare, componente UI etc., construite folosind Bootstrap este neplăcut și crește tot mai bine. Pentru consultanți și companii de produse deopotrivă, aceasta înseamnă că obiectele pre-construite și sprijinul comunității vor fi întotdeauna suficiente.
  • Susținut de Twitter: O tendință emergentă în open source este creșterea proiectelor sponsorizate de o entitate comercială. Mai des, aceste entități construiesc afaceri profitabile în jurul ofertei lor. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) etc. sunt câteva exemple. Când un proiect este susținut de o entitate consacrată și nu este un spectacol format dintr-o singură persoană, acesta dă credință comunității (în special clienților întreprinderii) că proiectul va avea o foaie de parcurs clară și un viitor pe termen lung.
  • Colecție mare de componente: Bootstrap oferă, fără rezerve, aproape toate componentele UI de care este posibil să ai nevoie vreodată. Navigare, formulare, carduri, modale, butoane, ecusoane, bare de progres, alerte. . . Îl numești și Bootstrap îl are. Pentru multe companii, acest lucru reduce practic nevoia de a avea o echipă dedicată.
  • Suport SENȚI și SASS: Printre cadrele CSS masive, Bootstrap este singurul care acceptă atât LESS, cât și SASS. Da, știu, nu folosiți LESS (ca niciun dezvoltator care nu se respectă de sine, nu?), Dar hei, există proiecte masive acolo care se bazează pe LESS. Desigur, nu puteți alege nici unul și nu scrie fișierele CSS simple.

Bootstrap Cons

Nimic nu este fără preț, nu? Ei bine, Bootstrap nu face excepție. De-a lungul timpului, Bootstrap a luat foc puternic de designeri și experți în UI. Iata de ce:

  • Monotonia UX: Faptul că Bootstrap are o colecție atât de mare de rezultate încorporate în site-uri web care par prea familiare și destul de sincer, plictisitoare. Trebuie doar să vă îndreptați către exemple oficiale pentru a vedea cât de mult sunt ochii cu defectele. Căutați doar „toate site-urile web cu bootstrap arată la fel” și veți ști ce vreau să spun. ��
  • Stiling woe: Bootstrap este ceea ce ar putea fi considerat un cadru opinat. Cu alte cuvinte, are idei despre machete și te face să lucrezi mai mult dacă vrei să arate / să se comporte diferit. Luați în considerare punctele de întrerupere CSS implicite pentru lățimile ecranului: un ecran de dimensiuni medii pentru Bootstrap este unul care pornește de la o lățime a dispozitivului de 768px. Și ce se întâmplă dacă doriți să vizați, să spunem, limita de 600px? Ei bine, noroc cu asta! Este la fel cu aproape toate celelalte componente din bootstrap: rândurile și containerele au căptușeala implicită, butoanele au culori și borduri care sunt foarte dificile de înlocuit fără multă muncă, etc..

Vreau să stăpânește Bootstrap-ul? Verifica asta curs online de Brad Traversy.

fundație

Dacă tehnologiile ar fi religii, băieții Fundației și Bootstrap ar rămâne pentru sângele celuilalt. Nici o discuție despre cadrele CSS moderne nu este completă fără a menționa Fundația, așa că aici mergem.

Conduceți peste fundație website, și nu vă puteți abține să observați conturul: „Cel mai avansat cadru de comunicare avansat din lume”. La prima vedere, pare o cerere înaltă de a merge cu o campanie de marketing.

Cu toate acestea, adepții cadrului Fundației știu că există cel puțin un adevăr în acest sens. Fundația a fost dezvoltată pentru a merge în mod natural cu cadrul Rails, iar mai multe dintre principiile de ghidare „asemănătoare” cu șinele pot fi văzute la lucru.

De exemplu, dacă doriți un rând care să conțină două elemente pe ecrane mici, trei pe mediu și patru pe cele mari, codul echivalent din Fundație va arăta astfel:

În comparație cu versiunile anterioare Bootstrap, mi se pare foarte intuitiv și ușor de memorat. Nu mai există doisprezece grile de coloană și descoperiți ce ar trebui să fie 4/12!

Deși Fundația este mult mai puțin populară decât Bootstrap, este un secret comercial pentru mulți dezvoltatori experți din partea front-end.

Beneficiile cadrului fundației

Fundația are câteva caracteristici neobișnuite din toate cadrele CSS pe care le vom lua în considerare în acest articol:

  • Instrumente complete: Este greșit din punct de vedere tehnic să spunem că Fundația este un cadru CSS. Adică, este, dar a fost construit ca o colecție mare și modulară de instrumente care are ca scop rezolvarea aproape tot felul de probleme front-end. Există oferte cadru separate pentru site-uri web și e-mailuri, puternic optimizate pentru domeniile respective. Fundația vine și cu o interfață pentru linia de comandă (CLI), care va suna ca muzică pentru urechile dezvoltatorilor obișnuiți să lucreze cu Webpack sau cu alte pachete de module..
  • Flexibilitate extremă: Spre deosebire de Bootstrap, Fundația a fost construită pentru a oferi dezvoltatorului frontal un control deplin asupra utilizatorilor lor de utilizare. Drept urmare, Fundația se va simți blandă și extrem de complexă pentru noul venit. Cu toate acestea, motivul este că Fundația nu forță nicio limbă de stil asupra ta, ci își propune să fie doar ceea ce este: un cadru CSS excelent.
  • Mai mult decât doar componente UI: În timp ce Fundația dispune de colecția obișnuită de elemente de utilizator, aceasta depășește mult calea de îndatorire. Dezvoltatorii au inclus un sistem avansat de imagini responsive, o componentă a tabelului de prețuri (da, cea utilizată pentru a afișa diverse planuri de prețuri), validarea formularelor, asistența de la dreapta la stânga, încorporarea receptivă și multe altele. Aș dori să subliniez din nou faptul că aceasta este o suprascriere pentru majoritatea site-urilor web simple, dar pentru cele mari, este un aspect important pe care dezvoltatorii experimentați îl vor recunoaște.
  • Instruire și consultanță: Acum, în timp ce Bootstrap este creat de Twitter, este un proiect lateral și o parte foarte mică din imaginea de ansamblu. Cu toate acestea, compania din spatele fundației (ZURB) se angajează să o folosească, să o dezvolte și să o promoveze. Cursuri de instruire și consultanță profesională sunt oferite clienților mari, ceea ce este excelent pentru companiile care vizează proiecte masive și sunt dispuși să plătească.

Contra cadrului fundației

Punctele forte ale unui cadru devin punctele sale slabe atunci când sunt privite din punct de vedere opus. Iată de ce este posibil ca Fundația să nu fie cea mai bună alegere pentru proiectul tău:

  • Comunitate mică (er): Comunitatea Fundației este mult mai mică decât cea a Bootstrap, iar dacă încercați ceva exotic și vă blocați, șansele de a găsi ajutor relevant sunt mai mici. Cu toate acestea, aș adăuga asta în toate scopurile practice; există o comunitate suficientă. Doar că este vorba de mai multe ordine de mărime mai mici decât cele de la Bootstrap, deci nu veți găsi soluții instantaneu.
  • Complexitate: Dacă sunteți obișnuit cu Bootstrap sau cu ceva simplu, sau mai rău, cu Vanilla CSS, Fundația se va simți ca o explozie infinită de complexitate. Straturi în straturi, componente cu componente, opțiuni de personalizare interminabile. . . Destul de curând veți începe să puneți la îndoială utilitatea vieții în sine! Dar, din nou, Fundația are un scop foarte diferit și nu poate fi învinovățită pentru asta.
  • Prea multe opțiuni: Uneori, vrei doar să faci rahat și să te preocupe mai târziu de perfecțiune. În aceste momente, este frustrant să fie prezentate prea multe opțiuni cu mici variații. De exemplu, gândește-te că trebuie să comanzi un sandviș Subway atunci când îți este atât de foame că ai putea mânca noroi. Desigur, Fundația nu este așa pentru niște momente.
  • Disponibilitate talent: Deoarece Fundația este (mult) mai puțin populară decât Bootstrap, talentul disponibil este mult mai puțin. De regulă generală, orice nouă închiriere este aproape probabil să cunoască Bootstrap, dar nu va avea un indiciu despre Fundație. Învățarea necesită timp și este un lux pe care nu îl pot avea toate echipele.

Bulma

Bulma este un participant relativ nou la câmpul de luptă al cadrelor CSS și și-a făcut un nume pentru sine în scurt timp. Atractivitatea sa constă într-o abordare strictă, exclusiv CSS (nu există componente JavaScript), iar implicitele elegante, care este o problemă cu care mulți dezvoltatori cu un ochi bun pentru design au o problemă cu lucrul cu Bootstrap.

O mare parte din impulsul Bulma provine din rate mari de adopție cu comunitatea Laravel (un cadru web PHP, în cazul în care nu știai) comunitate, ceea ce sunt sigur este ceea ce a ajutat Vue.js să se ridice la culmile popularității. printre cadrele JavaScript.

De ce să alegeți Bulma CSS Framework

Există mai multe motive pentru a-ți plăcea Bulma și pentru a o folosi pentru următorul tău proiect:

  • Destul de popular: Bine, nu este mai popular decât Bootstrap, dar este mai popular decât Foundation. În ceea ce scrie, Bulma are 30k + stele pe Github, în ​​jur de 3k + mai mult decât Fundații. Desigur, o serie de stele Github nu reprezintă o valoare a meritului, dar se spune că comunitatea aprobă Bulma.
  • Clase extrem de citibile: Bulma, pentru mine, are cele mai citibile clase CSS din toate cadrele pe care le-am încercat. Există, de asemenea, un sistem ridicol de puternic și simplu pentru crearea de grile în stil Metro, numite plăci (uitați-vă doar la codul din a doua jumătate a capturii de ecran și spuneți-mi că nu sunteți impresionat!).

  • Curba de învățare plană: Bulma este extrem de modulară și a fost creată pentru a rezolva problemele practice, cotidiene, pe care le întâlnesc echipele mai mici și dezvoltatorii individuali. Veți găsi că Bulma este foarte ușor de învățat, deși cred că un cadru decent în CSS este întotdeauna bun să vă faceți o idee despre ce s-ar putea întâmpla sub capotă. Acest lucru vă va ajuta când doriți să treceți peste comportamentul implicit.
  • Elegant: Ei bine, aruncați o privire la secțiunea Eroi implicită pentru Bulma de mai jos. Destul spus!

Bulma are o comunitate mică, dar extrem de pasionată, așa că, dacă doriți să vă îndepărtați de tot puful și totuși doriți să veniți cu interfețe de protecție elegantă în timp record, Bulma este calea de urmat. Pentru dezvoltatorii Bootstrap, Bulma are o secțiune separată care să-i convingă și să îi ajute să migreze.

UIKit

Lucru care-mi vine în minte atunci când te gândești UIKit este minimalism. Minimalismul nu în funcții (de fapt, oferă poate cele mai multe caracteristici ale tuturor cadrelor), ci în design. Dacă design-urile super-curate, elegante, fără spațiu alb, sunt lucrurile tale, UIkit te-a acoperit.

De exemplu, aruncați o privire la componenta barei de progres:

Sau componenta markerului de imagine (un marker interactiv bazat pe JS pentru imagini):

Sau chiar și forma umilă HTML:

Dacă acest lucru nu strigă eleganța în vârful plămânilor, nu știu ce face. Vă rugăm să accesați site-ul UIkit și să consultați toate componentele incredibile pe care le are în ofertă. Cu excepția cazului în care managerul de proiect sau clientul vă obligă un anumit limbaj de stil, cred că Uikit preia coroana pentru designul UI și se află cu câțiva kilometri înaintea designului material Google..

Dar există o captură, vă întrebați. Da este. Ca și Bootstrap, UIkit funcționează cu JavaScript și, în timp ce puteți utiliza jQuery pentru manipularea DOM, utilizarea unui cadru virtual DOM precum React este imposibilă.

De asemenea, Uikit este un sistem de sine stătător și nu veți putea modifica sau extinde fără să depuneți eforturi considerabile.

UI semantică

Un alt concurent în cursă este UI semantică, care încearcă să se distingă cu o mulțime de teme și personalizare. Există mai mult de 3000 de variabile tematice, ceea ce duce la o lărgire masivă. Sau așa spun docsii.

Bootstrap 4 acoperă toate acestea și este complet personalizabil, dar un avantaj cu Semantic UI este că, în mod implicit, se obțin aspecte frumoase. Totuși, nu este cel mai bine arătat din cutie, motiv pentru care l-am plasat mai târziu pe lista mea.

De asemenea, are una dintre cele mai abrupte curbe de învățare, iar convențiile de codare sunt mult mai stricte. Incearca-l; Aș spune și să văd dacă pare un lucru pe care l-ați prefera.

Susy

Susy este un cadru puțin cunoscut în acest moment, dar este o idee fascinantă și revigorantă. Un alt cadru de aspect pur, Susy elimină toate ideile predefinite de float, grilă, Flexbox, tabele sau orice altceva și vă permite să compuneți tipul de aspect dorit. „Compune” este cuvântul cheie aici, deoarece Susy este menită să creeze machete extrem de modulare și eșalonante, cu nevoi extrem de complexe, neobișnuite și precise.

În mâinile dezvoltatorului expert, Susy este ca un flamethrower decât arunca orice altceva. Desigur, muritorii mai mici vor reuși să-și ardă mâinile.

Pentru a vă face o idee despre puterea lui Susy, probați această setare implicită (SASS):

// 4 coloane simetrice, fluide
// jgheaburile au 1/4 dimensiunea unei coloane
// elementele acoperă cu 1 rigol mai puțin decât coloanele
// containerele acoperă și 1 jgheaburi mai puțin
$ susy: ((
‘coloane’: susy-repere (4),
„jgheaburi”: 0,25,
‘răspândit’: ‘îngust’,
„răspândit container”: „îngust”,
);

Cred că codul este destul de explicativ, deși nu este pentru cei grăbiți. �� Susy are un sens perfect dacă sunteți obosită de tot pasul pe care vi-l impun cadrele moderne și aveți nevoi de dispunere pe care nu știți că niciun cadru obișnuit le poate servi.

Materializa

Dacă sunteți îndrăgostit de designul materialului Google, materializarea este o cadru o sa iti placa. Cel mai bun lucru este că are doar o mână de componente și clase de învățat și este axat pe obținerea cât mai rapidă a productivității. Există câteva opțiuni de personalizare, iar Materialize urmează formatul popular al grilei cu 12 coloane stabilit de Bootstrap.

Dacă mă întrebi, totuși, a Proiectarea materialului devine atât de comună și este așa. . . În mod implicit, destul de curând, ne vom plânge de la fel ca și în cazul tuturor site-urilor site-ului Bootstrap care arată aceeași problemă. Cu toate acestea, este un cadru frumos pentru a începe.

Pur

Yahoo este mort?

Nu, această întrebare nu este o diversiune, dar evidențiază o observație importantă: Yahoo a construit Cadru pur și eliberat sub licența BSD.

O privire rapidă mă impresionează și mă întreb de ce această ofertă nu este cunoscută mai multor persoane. În orice caz, ceea ce face Pura, bine, pur, este că este un cadru CSS pur. �� De fapt, dezvoltatorii au depășit kilometrul suplimentar și l-au împărțit în diferite module CSS pe care le puteți importa, după caz. Deci, dacă aveți nevoie doar de sistemul de grilă, nu este necesar să importați întregul CSS și să adăugați timp de încărcare a site-ului..

Grila Pure are mai multe arome: 5 puncte, 2 puncte, 24 de puncte etc., așa că atunci când vine vorba de crearea de coloane, aveți mult mai multă flexibilitate. În mod implicit, Pure nu este cel mai bine arătat cadru CSS, dar văd cum se adaugă valoare celor care doresc să rezolve o problemă CSS minusculă în interfața lor de utilizator și se apleacă la valorile implicite „utile” ale altor cadre..

Schelet

După cum puteți vedea în ecranul filmat, Schelet este atât de minim încât nici măcar nu se numește cadru CSS, bibliotecă sau chiar modul. Este placă de cazan și conține doar 400 de linii de cod sursă! Incredibil? Cred că da, dar pentru a pune lucrurile în perspectivă, Skeleton a fost proiectat pentru proiecte mici sau mici care au nevoie de mult mai mult decât machete și poziționare.

Merită să arunci o privire; la urma urmei, cine știe, Skeleton ar putea fi ceea ce căutai de-a lungul timpului!

Miligram

Ultimul din listă este Miligram, un cadru CSS conceput pentru viteză și productivitate. Dezvoltatorii au păstrat-o sub o dimensiune de 2 KB, ceea ce în conformitate cu standardele de astăzi, înseamnă multe.

O miligramă este o distracție mică pe cadrele CSS cu care apreciați că lucrați. Extinderea acestuia este ușoară și, cu câteva rânduri de CSS personalizate, puteți schimba aspectul în modul dorit.

Deci, care cadru CSS este cel mai bun?

Admiteți-o, ați mai pus întrebări similare înainte și ați primit următorul răspuns dezamăgitor: niciuna. �� Selecția unui cadru (sau a unui instrument, sau chiar a unei persoane din viața ta), pentru această problemă, depinde de o mulțime de factori. Dacă doriți sfatul meu, aici este: Reduceți zgomotul. Doar pentru că oamenii înnebunesc pentru ceva nou și strălucitor, nu înseamnă că trebuie să înveți sau să rămâi în urmă. Încercați lucruri noi este grozav, dar alergarea în cercuri în căutarea instrumentului perfect este, bine, o pierdere.

Deci, care dintre aceste cadre ai încercat? Sau, poate, ceva este uimitor pe care tocmai mi-a fost dor? Anunță-mă în comentarii, te rog. Dragoste, ură, salut aleatoriu, toate sunt binevenite!

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