Geen wonder dan dat CSS-kaders mettertyd na vore gekom het en die meeste pyn weggeneem het nie. Ons kan ons vandag nie voorstel om kodering sonder ons gunsteling CSS-raamwerk te wees nie, aangesien die fokus van verskeie skermgroottes 'n noodsaaklikheid geword het.
Maar hoe weet jy dat jou raamwerk die beste is vir die werk wat byderhand is? As u nog nie nuut is in die ontwikkeling nie, watter raamwerk moet u help?
Hierdie pos gee 'n blik op die voorpuntontwikkelingslandskap en vergelyk die voorlopers onder CSS-raamwerke. Dus, as jy moeg is vir die handkodering van CSS-reëls, duik in vir 'n vinnige verligting!
1.1 Responsiewe ontwerp in Bootstrap (4.0 vs. 3.0)
2.1 Voordele van die Stigtingraamwerk
2.2 Nadele van die Stigtingraamwerk
3.1 Waarom die Bulma CSS Framework kies?
5 Semantiese UI
10.1 Dus, watter CSS-raamwerk is die beste?
'N Inisiatief deur Twitter, bootstrap neem krediet vir die instelling van responsiewe ontwerp op groot skaal. Dit was die eerste raamwerk om die filosofie van 'mobile-first' te bevorder. Die ontwerp van kleiner skermgroottes was nie meer 'n afsonderlike projek op sigself nie; al wat u hoef te doen was om die betrokke Bootstrap-klasse in te sluit, en die ontwerp sal outomaties aanpas vir verskillende skermgroottes (wel, amper).
Responsiewe ontwerp in Bootstrap (4.0 vs. 3.0)
Bootstrap het 'n responsiewe ontwerp bereik deur die idee van 'n rooster bekend te stel. 'N Rooster is 'n onsigbare partisie van die skerm in kolomme (saam met die breedte). Byvoorbeeld, as u drie 'vakke' het wat u langs mekaar op groot skerms wil plaas, maar vertikaal op kleiner skerms, is dit wat u sal doen:
Een van drie kolomme
Die huidige gewilde weergawe van Bootstrap is 4, wat 'n groot opknapping in die 3.3-reeks was. Bogenoemde sintaksis is hoe u in Bootstrap 4 kodeer, wat die elegante krag van die Flexbox en ander moderne uitlegfunksies wat direk deur blaaiers ondersteun word. In die onderste weergawes van Bootstrap is die rooster gedefinieer as 'n totaal van 12 kolomme, wat gelei het tot kode soos
om 'n verdeling van 'n derde van die skermbreedte op groot toestelle op te neem, en die helfte van die breedte in mediumgrootte toestelle. Die sintaksis is nou baie aangenamer, hoewel dit vertroudheid met Flexbox vereis.
Daar is baie om van Bootstrap te hou, veral vir ontwikkelaars met volledige stapels:
Vinnige prototipering: Met Bootstrap hoef u byna nie te dink aan moeilike CSS-posisionering en blaaierversoenbaarheid nie. Al wat u nodig het om die HTML uit te skryf, en dan die toepaslike CSS-klasse toe te pas, laat die responsiwiteit lewendig word.
Groot ekosisteem: Bootstrap het vanaf vandag die grootste ekosisteem onder voorraamwerke. Die aantal webwerf-uitlegte, temas, adminpanele, UI-komponente, ens. Wat met Bootstrap gebou is, is verstommend en dit word steeds beter. Vir konsultante en produksiemaatskappye beteken dit dat voorafgeboude items en gemeenskapsondersteuning altyd volop sal wees.
Gerugsteun deur Twitter: 'N Opkomende neiging in open source is die opkoms van projekte geborg deur 'n kommersiële entiteit. Hierdie ondernemings bou meer gereeld as winsgewende ondernemings rondom hul aanbod. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), ens. Is enkele voorbeelde. As 'n projek ondersteun word deur 'n gevestigde onderneming en nie 'n eenpersoonskou is nie, gee dit die gemeenskap (veral die ondernemingskliënte) vertroue dat die projek 'n duidelike padkaart en 'n langtermyn-toekoms sal hê.
Groot versameling komponente: Bootstrap bied bykans al die UI-komponente aan wat u waarskynlik benodig. Navigasie, vorms, kaarte, modale, knoppies, kentekens, vorderingstawe, waarskuwings. . . Jy noem dit, en Bootstrap het dit. Vir baie ondernemings verminder dit die behoefte aan 'n toegewyde voorste span.
MINDER en SASS ondersteuning: Onder die massief gewilde CSS-kaders is Bootstrap die enigste wat beide MINDER en SASS ondersteun. Ja, ek weet, jy gebruik nie minder nie (soos wat geen ontwikkelaar wat self respekteer nie, reg?), Maar hey, daar is enorme projekte wat op LESS staatmaak. Natuurlik kan u nie een van u kies en u gewone CSS-lêers skryf nie.
Niks is sonder 'n prys nie? Wel, Bootstrap is geen uitsondering nie. Bootstrap het mettertyd onder skoot gekom deur ontwerpers en UI-kundiges. Dit is die rede waarom:
UX eentonigheid: Die feit dat Bootstrap so 'n groot versameling ingeboude programme het, lei tot webwerwe wat heeltemal te vertroud en eerlik, dof lyk. U hoef net oor te gaan na die amptelike voorbeelde om te sien hoeveel van die standaard verstek is. Soek net na "alle bootstrap-webwerwe lyk dieselfde," en jy sal weet wat ek bedoel. ��
Stilte ellende: Bootstrap is wat beskou kan word as 'n oordeelkundige raamwerk. Met ander woorde, dit het idees oor uitlegte, en dit laat jou ekstra hard werk as jy wil hê dat dit anders moet lyk / optree. Oorweeg die standaard CSS-breekpunte vir skermbreedtes: 'n mediumgrootte skerm vir Bootstrap is een wat begin met 'n toestelbreedte van 768px. En wat as u die limiet van 600 px wil sê? Wel, baie geluk daarmee! Dit is dieselfde met byna elke ander komponent in die selflaaigraaf: rye en houers het hul standaardvulling, knoppies het kleure en rande wat baie moeilik is om te ignoreer sonder veel werk, ensovoorts.
Wil bemeester die Bootstrap? Kyk hierna aanlynkursus deur Brad Traversy.
As tegnologie godsdienste was, sou die ouens van die Stigting en Bootstrap vir mekaar se bloed wees. Geen bespreking van moderne CSS-raamwerke is volledig sonder om Foundation te noem nie, so hier gaan ons.
Gaan oor die stigting webwerf, en u kan nie anders as om die bylyn te sien nie: 'Die mees gevorderde reaksie op die voorpunt in die wêreld.' Met die eerste oogopslag lyk dit na 'n groot eis om 'n bemarkingsveldtog aan te gaan.
Aanhangers van die raamwerk van die stigting weet egter daar is ten minste 'n mate van waarheid daaraan. Stigting is ontwikkel om natuurlik te gaan met die Rails-raamwerk, en verskeie van die Rails se "zen-agtige" riglyne kan by die werk gesien word.
As u byvoorbeeld 'n ry wil hê wat twee elemente op klein skerms bevat, drie op medium en vier op groot, lyk die gelykstaande kode in Foundation soos volg:
In vergelyking met vroeëre weergawes van Bootstrap, vind ek dit baie intuïtief en maklik om te memoriseer. Nie meer twaalf kolonnetwerke en uitvind wat 4/12 veronderstel is om te wees nie!
Hoewel Foundation baie minder gewild is as Bootstrap, is dit 'n handelsgeheim vir baie kundige front-end-ontwikkelaars.
Voordele van die Stigtingraamwerk
Stigting het 'n paar ongewone kenmerke uit al die CSS-raamwerke wat ons in hierdie artikel gaan oorweeg:
Volle gereedskap: Dit is tegnies verkeerd om te sê dat stigting 'n CSS-raamwerk is. Ek bedoel, dit is so, maar dit is gebou as 'n groot en modulêre versameling instrumente wat ten doel het om byna alle vorme van front-end probleme op te los. Daar is afsonderlike raamwerkaanbiedings vir webwerwe en e-posse, wat baie optimaal is vir hul onderskeie domeine. Foundation kom ook met 'n opdraglyn-koppelvlak (CLI), wat sal klink soos musiek vir die ore van ontwikkelaars wat gewoond is om met Webpack of ander modulbundelaars te werk.
Uiterste buigsaamheid: Anders as Bootstrap, is Foundation gebou om die voorste ontwikkelaar volle beheer oor hul UI's te gee. As gevolg hiervan, sal die Stigting vir die nuweling sag en enorm kompleks voel. Die rede is egter dat die stigting nie enige styltaal op u afdwing nie, maar dit wil wees net soos dit is: 'n uitstekende CSS-raamwerk.
Meer as net UI-komponente: Terwyl Foundation die gewone versameling UI-elemente het, strek dit veel verder as die plig. Die ontwikkelaars het 'n gevorderde beeldstelsel wat reageer, 'n prystabelonderdeel (ja, die een wat gebruik word om verskillende prysplanne te wys), vorm-validering, ondersteuning van regs na links, responsiewe inbeddings en meer ingesluit. Ek wil dit weer beklemtoon dat dit 'n oorskot is vir die meeste eenvoudige webwerwe, maar vir grotes is dit 'n seën wat die ervare ontwikkelaars sal herken.
Opleiding en konsultasie: Terwyl Bootstrap deur Twitter geskep is, is dit 'n syprojek en 'n baie klein deel van die geheelbeeld. Die onderneming agter die stigting (ZURB) is egter daartoe verbind om dit te gebruik, te ontwikkel en te bevorder. Opleidingskursusse en professionele konsultasie word aangebied vir groot kliënte, wat ideaal is vir ondernemings wat massiewe projekte teiken en bereid is om te betaal.
Nadele van die Stigtingraamwerk
Die sterk punte van een raamwerk word die swakhede van die teenoorgestelde oogpunt. Daarom is die stigting moontlik nie die beste keuse vir u projek nie:
Klein (er) gemeenskap: Die Foundation-gemeenskap is baie kleiner as dié van Bootstrap, en as u iets eksoties probeer en vasstaan, is die kanse om relevante hulp te kry, kleiner. Ek wil dit egter byvoeg vir alle praktiese doeleindes; daar is genoeg van 'n gemeenskap daar buite. Dit is net dat dit verskillende ordeningsgrootte kleiner is as Bootstrap s'n, so jy sal miskien nie onmiddellik oplossings vind nie.
kompleksiteit: As u gewoond is aan Bootstrap of iets eenvoudig, of erger, aan vanielje CSS, sal Foundation voel soos 'n oneindige ontploffing van kompleksiteit. Lae in lae, komponente met komponente, eindelose aanpassingsopsies. . . Binnekort begin u die nut van die lewe self bevraagteken! Maar dan weer, het die stigting 'n heel ander doel en kan dit nie die skuld kry nie.
Te veel opsies: Soms wil jy net kak maak en later bekommerd wees oor perfeksie. In sulke tye is dit frustrerend om te veel opsies met geringe variasies aangebied te word. Dink byvoorbeeld daaraan om 'n Subway-toebroodjie te bestel as jy so honger is dat jy modder kan eet. Natuurlik is die stigting nie vir sulke tye nie.
Talentbeskikbaarheid: Aangesien Foundation (veel) minder gewild is as Bootstrap, is die beskikbare talent baie minder. Oor die algemeen is dit waarskynlik dat enige nuwe huur Bootstrap ken, maar hulle kan nie 'n idee hê oor Foundation nie. Leer neem tyd, en dit is 'n luukse wat nie alle spanne kan hê nie.
Waarom die Bulma CSS Framework kies?
Daar is baie redes om Bulma te hou en dit vir u volgende projek te gebruik:
Nogal gewild: Dit is nie gewildder as Bootstrap nie, maar dit is gewilder as Foundation. Vanaf skrywe het Bulma 30k + sterre op Github, ongeveer 3k + meer as Foundations. Uiteraard is 'n aantal Github-sterre nie 'n mate van verdienste nie, maar dit sê wel dat die gemeenskap Bulma goedkeur..
Uiters leesbare klasse: Bulma, vir my, het die mees leesbare CSS-klasse van al die raamwerke wat ek probeer het. Daar is ook 'n belaglik kragtige en eenvoudige stelsel vir die skep van metro-styl roosters, genaamd teëls (kyk net na die kode in die tweede helfte van die skermkiekie, en sê vir my jy is nie beïndruk nie!).
Plat leerkurwe: Bulma is baie modulêr en is geskep om die praktiese, alledaagse probleme op te los wat kleiner spanne en individuele ontwikkelaars teëkom. U sal vind dat Bulma baie maklik is om te leer, alhoewel ek dink dat 'n ordentlike agtergrond in CSS altyd goed is om 'n idee te hê van wat onder die enjinkap aangaan. Dit sal u help wanneer u die standaardgedrag wil ignoreer.
elegante: Kyk na die standaard Hero-afdeling vir Bulma hieronder. Genoeg gesê!
Bulma het 'n klein, maar 'n uiters passievolle gemeenskap, so as u op rekordtyd met al die pluim wil wegkom en tog met elegante UI's wil uitkom, is Bulma die manier om te gaan. Vir Bootstrap-ontwikkelaars het Bulma 'n aparte afdeling om hulle te oortuig en te help om oor te trek.
Die ding wat by u opkom as u aan dink UIkit is minimalisme. Minimalisme nie in funksies nie (dit bied miskien die meeste kenmerke van alle raamwerke), maar in ontwerp. As super-skoon, elegante, nie-wit-skuim ontwerpe u ding is, het UIkit u gedek.
Kyk byvoorbeeld na die vorderingbalk-komponent:
Of die beeldmerker-komponent ('n JS-aangedrewe interaktiewe merker vir beelde):
Of selfs die nederige HTML-vorm:
As dit nie elegansie aan die bopunt van sy longe skree nie, weet ek nie wat nie. Gaan net na die UIkit-webwerf en kyk na al die ongelooflike komponente wat dit bied. Tensy u projekbestuurder of kliënt 'n spesifieke styltaal op u dwing, dink ek Uikit trek die kroon vir UI-ontwerp en is dit 'n paar kilometer voor Google se materiaalontwerp..
Uikit is ook 'n selfstandige stelsel, en u kan dit nie verander of uitbrei sonder om baie moeite te doen nie.
'N Ander deelnemer in die wedloop is Semantiese UI, wat probeer om homself te onderskei met baie temas en aanpassing. Daar is meer as 3000 tema-veranderlikes, wat 'n groot breedte tot gevolg het. Of so sê die dokumente.
Bootstrap 4 dek alles hieroor en is ook volledig aanpasbaar, maar die voordeel van die Semantiese UI is dat dit standaard uitlegte vir uiters goeie resultate het. Tog is dit nie die beste uit die boks nie, daarom plaas ek dit later op my lys.
Dit het ook een van die steilste leerkurwe, en koderingskonvensies is baie strenger. Probeer dit; Ek sou sê en kyk of dit iets lyk wat u verkies.
Susy is op hierdie punt 'n bietjie bekende raamwerk, maar dit is 'n fassinerende en verfrissende idee. Susy, wat nog 'n suiwer uitleg is, verwyder alle vooraf gedefinieerde idees van float, grid, Flexbox, tafels of enigiets anders, en laat u die soort uitleg wat u wil opstel. "Komponeer" is die sleutelwoord hier, aangesien Susy bedoel is om hoogs modulêre, verbysterende uitlegte te skep met ultra-komplekse, ongewone en presiese behoeftes.
In die hande van die kundige ontwikkelaar is Susy soos 'n vlammenwerper as om alles weg te blaas. Minder sterflinge sal natuurlik daarin slaag om hul hande te verbrand.
Probeer hierdie standaardinstelling (SASS) om 'n idee te kry van die krag van Susy:
// 4 simmetriese vloeistofkolomme
// geute is 1/4 so groot soos 'n kolom
// elemente span 1 minder geut as kolomme
// houers strek ook 1 minder geut
'kolomme': susy-herhaling (4),
Ek dink dat die kode redelik vanselfsprekend is, hoewel dit nie vir diegene wat haastig is nie. �� Susy maak sinvol as jy moeg is vir al die opblaas wat moderne raamwerke op jou lê, en jy het uitlegbehoeftes wat jy weet dat geen gewone raamwerk kan dien nie..
As jy verlief is op Google se materiaalontwerp, is Materialize 'n raamwerk jy sal dit geniet. Die beste ding is dat dit slegs 'n handjievol komponente en klasse het om te leer, en daarop gefokus is om u so vinnig as moontlik produktief te maak. Daar is min aanpassingsopsies, en materialiseer volg die gewilde roosterformaat van 12 kolomme wat deur Bootstrap gestig is.
As u my egter vra, a Materiële ontwerp word so gereeld, en is so. . . Ons sal klaarblyklik baie vinnig daaroor kla, soos oor Bootstrap se alles-webwerwe wat dieselfde lyk. Tog is dit 'n lekker raamwerk om mee te begin.
Is Yahoo dood?
Nee, hierdie vraag is nie 'n afleiding nie, maar beklemtoon 'n belangrike waarneming: Yahoo het die Suiwer raamwerk en vrygestel kragtens die BSD-lisensie.
'N Vinnige blik maak my beïndruk, en ek wonder waarom hierdie aanbod nie meer aan mense bekend is nie. In elk geval, wat suiwer, wel, suiwer maak, is dat dit 'n suiwer CSS-raamwerk is. �� Die ontwikkelaars het trouens die ekstra kilometer afgeloop en dit opgebreek in verskillende CSS-modules wat u kan invoer indien nodig. Dus, as u slegs die roosterstelsel benodig, hoef u nie die hele CSS in te voer en by te voeg tot die laai van die werf nie.
Die suiwer rooster kom in verskillende smake voor: 5-punt, 2-punt, 24-punt, ens. Dus, as dit kom by die skep van kolomme, het u baie meer buigsaamheid. Suiwer is standaard nie die beste CSS-raamwerk nie, maar ek kan sien hoe dit waarde toevoeg tot diegene wat 'n klein CSS-probleem in hul UI wil oplos en krimp by die "nuttige" standaard wat ander raamwerke met.
Soos u kan sien op die skermfoto, Skeleton is so minimaal dat dit homself nie eens 'n CSS-raamwerk, biblioteek of selfs 'n module noem nie. Dit is die ketelplaat en bevat slegs 400 reëls bronkode! Ongelooflike? Ek dink so, maar om dinge in perspektief te plaas, is Skeleton ontwerp vir klein of klein projekte wat net meer as uitlegte en posisionering nodig het.
Kyk die moeite werd; Immers, wie weet, skelet kan miskien wees waarna jy deurgaans gesoek het!
Die laaste op die lys is milligram, 'n CSS-raamwerk wat ontwerp is vir spoed en produktiwiteit. Die ontwikkelaars het dit onder 2 KB groot gehou, wat volgens vandag se standaarde baie beteken.
'N Milligram is 'n prettige CSS-raamwerk wat u waardeer om mee saam te werk. Dit is maklik om uit te brei en met 'n paar reëls pasgemaakte CSS kan u die voorkoms daarvan verander soos u wil.
Dus, watter CSS-raamwerk is die beste?
Erken dit, jy het al voorheen soortgelyke vrae gevra en die volgende teleurstellende antwoord gekry: geen. �� Die keuse van 'n raamwerk (of 'n instrument, of selfs 'n persoon in jou lewe) hang van baie faktore af. As u my advies wil hê, is dit hier: Knip die geraas uit. Net omdat mense mal is oor iets nuuts en blink, beteken dit nie dat u dit moet leer nie, of dat u agterbly. Om nuwe dinge uit te probeer, is wonderlik, maar om in sirkels te hardloop op soek na die perfekte hulpmiddel is wel 'n vermorsing.
Watter van hierdie raamwerke het u al probeer? Of is daar iets verbasend wat ek so pas gemis het? Laat weet my asseblief in die kommentaar. Liefde, haat, ewekansige hallo, almal is welkom!