10 beste CSS-frameworks voor front-end ontwikkelaars

Ik hoorde ooit een grap van een front-end ontwikkelaar: “De NASA heeft robots op Mars geland, en hier worstelen we nog steeds om onze divs in het midden uit te lijnen!” En ik voel me slecht dat deze grap veel waarheid bevat. Iets doen dat net zo eenvoudig en logisch klinkt als het centreren van een doos in een doos is ongelooflijk moeilijk uit te werken in CSS. Tenzij je het eerder bent tegengekomen. En ergens het codefragment opgeslagen. En zelfs als het je lukt, is er altijd de sluimerende angst dat het ergens vreselijk kan breken in een of andere domme browser! CSS koppelt de eerste plek van “noodzakelijke web-kwaden” samen met JavaScript. Het is een standaard die lukraak evolueerde, door verschillende browserfabrikanten anders werd geïnterpreteerd en nu zo vol tegenstrijdigheden is dat niemand zichzelf een ‘CSS-expert’ durft te noemen.


Geen wonder dus dat CSS-frameworks in de loop van de tijd zijn ontstaan ​​en de meeste pijn hebben weggenomen. Tegenwoordig kunnen we ons geen codering voorstellen zonder ons favoriete CSS-framework, omdat het targeten van meerdere schermformaten een noodzaak is geworden.

Maar hoe weet u dat uw raamwerk het beste is voor de klus? En als u nieuw bent bij front-end ontwikkeling, welk raamwerk zou u moeten helpen kiezen?

Deze post werpt een brede blik op het front-end ontwikkelingslandschap en vergelijkt de koplopers tussen CSS-frameworks. Dus als je de met de hand gecodeerde CSS-regels beu bent, duik dan in voor een snelle verlichting!

Bootstrap

Een initiatief van Twitter, Bootstrap verdient de eer om op grote schaal responsive design te introduceren. Het was het eerste raamwerk dat de filosofie van ‘mobile-first’ promootte. Ontwerpen voor kleinere schermformaten was niet langer een apart project op zich; alles wat je moest doen was de relevante Bootstrap-klassen opnemen, en het ontwerp zou zich automatisch aanpassen aan verschillende schermformaten (nou ja, bijna).

Responsief ontwerp in Bootstrap (4.0 versus 3.0)

Bootstrap bereikte een responsief ontwerp door het idee van een raster te introduceren. Een raster is een onzichtbare verdeling van het scherm in kolommen (samen met de breedte). Als u bijvoorbeeld drie ‘dozen’ heeft die u naast elkaar op grote schermen wilt plaatsen, maar verticaal op kleinere schermen, dan is dit wat u zou doen:

Een van de drie kolommen

Een van de drie kolommen

Een van de drie kolommen

De huidige populaire versie van Bootstrap is 4, wat een grote herziening was van de 3.3-serie. De bovenstaande syntaxis is hoe je codeert in Bootstrap 4, die veel van zijn elegantie te danken heeft aan de brute kracht van Flexbox en andere moderne lay-outfuncties die rechtstreeks door browsers worden ondersteund. In de lagere versies van Bootstrap was het raster gedefinieerd als een totaal van 12 kolommen, wat resulteerde in code zoals

om een ​​div te maken die een derde van de schermbreedte in beslag neemt op grote apparaten en de helft van de breedte op middelgrote apparaten. De syntaxis is nu een stuk aangenamer, hoewel het bekendheid met Flexbox vereist.

Bootstrap Pros

Er is veel leuks aan Bootstrap, vooral voor ontwikkelaars met volledige stack:

  • Snelle prototyping: Met Bootstrap is het bijna niet nodig om na te denken over lastige CSS-positionering en browser-incompatibiliteit. Het enige wat u hoeft te doen is de HTML op te schrijven en vervolgens de juiste CSS-klassen toe te passen, komt de respons tot leven.
  • Groot ecosysteem: Vanaf vandaag heeft Bootstrap het grootste ecosysteem onder front-end frameworks. Het aantal website-indelingen, thema’s, admin-panelen, UI-componenten, enz., Gebouwd met Bootstrap is verbijsterend en wordt steeds beter. Voor consultants en productbedrijven betekent dit dat vooraf gebouwde items en community-ondersteuning altijd voldoende zullen zijn.
  • Gesteund door Twitter: Een opkomende trend in open source is de opkomst van projecten gesponsord door een commerciële entiteit. Vaker wel dan niet bouwen deze entiteiten winstgevende bedrijven op rond hun aanbod. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), etc. zijn enkele voorbeelden. Wanneer een project wordt ondersteund door een gevestigde entiteit en geen show voor één persoon is, geeft het de gemeenschap (vooral de zakelijke klanten) het vertrouwen dat het project een duidelijke routekaart en een toekomst op lange termijn zal hebben.
  • Grote verzameling componenten: Bootstrap biedt direct uit de doos bijna alle UI-componenten die u waarschijnlijk ooit nodig zult hebben. Navigatie, formulieren, kaarten, modals, knoppen, badges, voortgangsbalken, waarschuwingen. . . U noemt het en Bootstrap heeft het. Voor veel bedrijven betekent dit praktisch geen noodzaak meer om een ​​toegewijd front-end team te hebben.
  • MINDER en SASS-ondersteuning: Van de enorm populaire CSS-frameworks is Bootstrap de enige die zowel MINDER als SASS ondersteunt. Ja, ik weet het, je gebruikt geen MINDER (zoals geen enkele zichzelf respecterende ontwikkelaar zou moeten doen, toch?), Maar goed, er zijn enorme projecten die op MINDER vertrouwen. Natuurlijk kunt u geen van beide kiezen en uw gewone CSS-bestanden wegschrijven.

Bootstrap Cons

Niets is zonder prijs, hè? Nou, Bootstrap is geen uitzondering. In de loop van de tijd is Bootstrap zwaar beschoten door ontwerpers en UI-experts. Dit is waarom:

  • UX eentonigheid: Het feit dat Bootstrap zo’n grote verzameling ingebouwde ins heeft, resulteert in websites die er maar al te bekend uitzien, en eerlijk gezegd saai. Je hoeft alleen maar naar de officiële voorbeelden om te zien hoeveel een doorn in het oog de standaardwaarden zijn. Zoek gewoon naar ‘alle bootstrap-websites zien er hetzelfde uit’, en u begrijpt wat ik bedoel. ��
  • Styling ellende: Bootstrap is wat kan worden beschouwd als een eigenzinnig raamwerk. Met andere woorden, het heeft ideeën over lay-outs en het zorgt ervoor dat je extra hard werkt als je wilt dat het er anders uitziet / zich gedraagt. Overweeg de standaard CSS-breekpunten voor schermbreedten: een middelgroot scherm voor Bootstrap is een scherm dat begint bij een apparaatbreedte van 768px. En wat als u bijvoorbeeld de limiet van 600 px wilt targeten? Nou, veel succes ermee! Hetzelfde geldt voor bijna elk ander onderdeel in bootstrap: rijen en containers hebben hun standaard opvulling, knoppen hebben kleuren en randen die heel moeilijk te negeren zijn zonder veel werk, enzovoort.

Willen de Bootstrap beheersen? Kijk hier eens naar online cursus door Brad Traversy.

fundament

Als technologieën religies waren, zouden de jongens van de Foundation en Bootstrap op zoek zijn naar elkaars bloed. Geen discussie over moderne CSS-frameworks is compleet zonder Foundation te noemen, dus hier gaan we.

Ga over de Stichting website, en je kan niet anders dan de byline opmerken: “Het meest geavanceerde responsieve front-end framework ter wereld.” Op het eerste gezicht lijkt het een grote claim om bij een marketingcampagne te passen.

Aanhangers van het Foundation-framework weten echter dat daar op zijn minst enige waarheid in zit. Foundation is ontwikkeld om op natuurlijke wijze samen te gaan met het Rails-framework, en verschillende van de ‘zen-achtige’ leidende principes van de Rails zijn te zien op het werk.

Als u bijvoorbeeld een rij wilt hebben die twee elementen op kleine schermen bevat, drie op medium en vier op grote, ziet de equivalente code in Foundation er als volgt uit:

In vergelijking met eerdere Bootstrap-versies vind ik dit zeer intuïtief en gemakkelijk te onthouden. Geen twaalf kolomrasters meer en uitzoeken wat 4/12 zou moeten zijn!

Hoewel Foundation veel minder populair is dan Bootstrap, is het een handelsgeheim voor veel deskundige front-end ontwikkelaars.

Voordelen van het Foundation Framework

Foundation heeft enkele ongebruikelijke kenmerken van alle CSS-frameworks die we in dit artikel gaan beschouwen:

  • Volledige tooling: Het is technisch onjuist om te zeggen dat Foundation een CSS-framework is. Ik bedoel, dat is het wel, maar het is gebouwd als een grote en modulaire verzameling tools die bedoeld is om bijna alle soorten front-end problemen op te lossen. Er zijn afzonderlijke raamwerkaanbiedingen voor websites en e-mails, sterk geoptimaliseerd voor hun respectieve domeinen. Foundation wordt ook geleverd met een opdrachtregelinterface (CLI), die klinkt als muziek in de oren van ontwikkelaars die gewend zijn om met Webpack of andere modulebundelaars te werken.
  • Extreme flexibiliteit: In tegenstelling tot Bootstrap is Foundation gebouwd om de front-end ontwikkelaar volledige controle te geven over hun gebruikersinterfaces. Als gevolg hiervan zal Foundation zich voor de nieuwkomer flauw en enorm complex voelen. De reden is echter dat Foundation u geen stijltaal oplegt, maar precies wil zijn wat het is: een uitstekend CSS-framework.
  • Meer dan alleen UI-componenten: Hoewel Foundation de gebruikelijke verzameling UI-elementen heeft, gaat het veel verder dan de plicht. De ontwikkelaars hebben een geavanceerd responsief afbeeldingssysteem, een prijstabelcomponent (ja, degene die werd gebruikt om verschillende prijsplannen te tonen), formuliervalidatie, ondersteuning van rechts naar links, responsieve insluitingen en meer opgenomen. Ik wil nogmaals benadrukken dat dit een overkill is voor de meeste eenvoudige websites, maar voor grote websites is het een zegen dat de ervaren ontwikkelaars zullen herkennen.
  • Training en advies: Hoewel Bootstrap is gemaakt door Twitter, is het een bijproject en een heel klein deel van het algemene plaatje. Het bedrijf achter Foundation (ZURB) zet zich echter in om het te gebruiken, ontwikkelen en promoten. Trainingen en professioneel advies worden aangeboden voor grote klanten, wat geweldig is voor bedrijven die grote projecten mikken en bereid zijn te betalen.

Nadelen van het Foundation Framework

De sterke punten van één raamwerk worden de zwakke punten van het tegenovergestelde standpunt. Dit is waarom Foundation misschien niet de beste keuze is voor uw project:

  • Kleine (re) gemeenschap: De Foundation-community is veel kleiner dan die van Bootstrap, en als je iets exotisch probeert en vastloopt, is de kans dat je relevante hulp vindt kleiner. Ik zou dat echter voor alle praktische doeleinden willen toevoegen; er is genoeg gemeenschap. Het is gewoon dat het een aantal ordes van grootte kleiner is dan die van Bootstrap, dus u zult mogelijk niet meteen oplossingen vinden.
  • Complexiteit: Als je gewend bent aan Bootstrap of iets eenvoudigs, of erger nog, aan vanille CSS, voelt Foundation als een oneindige explosie van complexiteit. Lagen binnen lagen, componenten met componenten, eindeloze aanpassingsmogelijkheden. . . Al snel begin je het nut van het leven zelf in twijfel te trekken! Maar nogmaals, Foundation heeft een heel ander doel en kan daar niet de schuld van krijgen.
  • Te veel opties: Soms wil je gewoon shit gedaan krijgen en je later zorgen maken over perfectie. In dergelijke tijden is het frustrerend om te veel opties te krijgen met kleine variaties. Denk er bijvoorbeeld aan om een ​​Subway-sandwich te bestellen als je zo nauwgezet honger hebt dat je modder kunt eten. Natuurlijk is Foundation niet voor zulke tijden.
  • Beschikbaarheid van talent: Omdat Foundation (veel) minder populair is dan Bootstrap, is het beschikbare talent veel minder. Over het algemeen kent een nieuwe aanwinst Bootstrap waarschijnlijk, maar heeft hij geen idee over Foundation. Leren kost tijd en het is een luxe die niet alle teams kunnen hebben.

Bulma

Bulma is een relatief nieuwkomer op het slagveld van CSS-frameworks en heeft in korte tijd naam gemaakt. De aantrekkelijkheid ligt in een strikte, alleen CSS-benadering (er zijn geen JavaScript-componenten) en elegante standaardinstellingen, iets waar veel ontwikkelaars met een goed oog voor ontwerp een probleem mee hebben wanneer ze met Bootstrap werken.

Een groot deel van het momentum van Bulma komt van hoge acceptatiegraad met de Laravel-gemeenschap (een PHP-webframework, voor het geval je het niet wist), waarvan ik zeker weet dat het vrijwel heeft geholpen Vue.js naar de hoogten van populariteit te laten stijgen onder JavaScript-frameworks.

Waarom kiezen voor het Bulma CSS Framework

Er zijn veel redenen om Bulma leuk te vinden en het voor je volgende project te gebruiken:

  • Behoorlijk populair: Oké, het is niet populairder dan Bootstrap, maar het is populairder dan Foundation. Op het moment van schrijven heeft Bulma 30k + sterren op Github, ongeveer 3k + meer dan Foundations. Natuurlijk is een aantal Github-sterren geen maatstaf voor verdienste, maar er staat wel dat de gemeenschap Bulma goedkeurt.
  • Uiterst leesbare lessen: Bulma heeft voor mij de meest leesbare CSS-klassen van alle frameworks die ik heb geprobeerd. Er is ook een belachelijk krachtig en eenvoudig systeem voor het maken van rasters in Metro-stijl, tegels genaamd (kijk maar naar de code in de tweede helft van de schermafbeelding en zeg me dat je niet onder de indruk bent!).

  • Vlakke leercurve: Bulma is zeer modulair en is gemaakt om de praktische, alledaagse problemen op te lossen die kleinere teams en individuele ontwikkelaars tegenkomen. Je zult merken dat Bulma heel gemakkelijk te leren is, hoewel ik denk dat een goede achtergrond in CSS altijd goed is om een ​​idee te hebben van wat er onder de motorkap gebeurt. Dit helpt u wanneer u het standaardgedrag wilt overschrijven.
  • Elegant: Kijk eens naar de standaard Hero-sectie voor Bulma hieronder. Genoeg gezegd!

Bulma heeft een kleine, maar zeer gepassioneerde gemeenschap, dus als je alle pluis wilt opheffen en toch in recordtijd elegant ogende gebruikersinterfaces wilt bedenken, dan is Bulma de juiste keuze. Voor Bootstrap-ontwikkelaars heeft Bulma een apart gedeelte om hen te overtuigen en te helpen bij de migratie.

UIkit

Het ding dat in je opkomt als je eraan denkt UIkit is minimalisme. Minimalisme niet in features (in feite biedt het misschien wel de meeste features van alle frameworks), maar in design. Als superschone, elegante, niet-witruimte-verlegen ontwerpen jouw ding zijn, dan heeft UIkit je gedekt.

Bekijk bijvoorbeeld de voortgangsbalkcomponent:

Of de afbeeldingsmarkeringscomponent (een JS-gestuurde interactieve markering voor afbeeldingen):

Of zelfs het bescheiden HTML-formulier:

Als dit geen elegantie uitschreeuwt, weet ik niet wat het doet. Ga gewoon naar de UIkit-website en bekijk alle ongelooflijke componenten die het te bieden heeft. Tenzij uw projectmanager of klant u een bepaalde stijltaal opdringt, denk ik dat Uikit de kroon op het gebied van UI-ontwerp is en enkele mijlen voorloopt op Google’s Material Design.

Maar is er een addertje onder het gras, vraag je je af. Ja dat is er. Net als Bootstrap werkt UIkit met zijn JavaScript en hoewel je jQuery kunt gebruiken voor DOM-manipulatie, is het gebruik van een virtueel DOM-framework zoals React onmogelijk.

Uikit is ook een op zichzelf staand systeem en u kunt het niet wijzigen of uitbreiden zonder veel moeite te doen.

Semantische gebruikersinterface

Een andere kanshebber in de race is Semantische gebruikersinterface, die zich probeert te onderscheiden met veel thema’s en maatwerk. Er zijn meer dan 3000 themavariabelen, wat resulteert in een enorme breedte. Of dat zeggen de doktoren.

Bootstrap 4 dekt dit alles en is ook volledig aanpasbaar, maar een voordeel van Semantic UI is dat het standaard resulteert in mooie lay-outs. Toch is het niet de best uitziende out-of-the-box, daarom heb ik het later op mijn lijst gezet.

Het heeft ook een van de steilste leercurven en coderingsconventies zijn veel strikter. Probeer het; Ik zou zeggen, en kijk of het lijkt op iets dat je misschien liever hebt.

Susy

Susy is op dit moment een weinig bekend raamwerk, maar het is een fascinerend en verfrissend idee. Nog een puur lay-outraamwerk, Susy schrapt alle vooraf gedefinieerde ideeën van float, grid, Flexbox, tafels of wat dan ook en laat je het soort lay-out samenstellen dat je wilt. ‘Opstellen’ is hier het sleutelwoord, aangezien Susy bedoeld is voor het creëren van zeer modulaire, verbluffende lay-outs met ultracomplexe, ongebruikelijke en nauwkeurige behoeften.

In de handen van de deskundige ontwikkelaar is Susy als een vlammenwerper dan al het andere wegblaast. Kleinere stervelingen zullen er natuurlijk in slagen hun handen te verbranden.

Om een ​​idee te krijgen van de kracht van Susy, proef je deze standaardinstelling (SASS):

// 4 symmetrische, vloeiende kolommen
// dakgoten zijn 1/4 zo groot als een kolom
// elementen beslaan 1 minder rugmarge dan kolommen
// containers beslaan ook 1 goot minder
$ susy :(
‘kolommen’: susy-repeat (4),
‘dakgoten’: 0,25,
‘spread’: ‘smal’,
‘container-spread’: ‘smal’,
);

Ik denk dat de code behoorlijk voor zichzelf spreekt, hoewel het niet voor degenen is die haast hebben. �� Susy is volkomen logisch als je moe bent van alle opgeblazenheid die moderne kaders je opleggen, en je hebt lay-outbehoeften waarvan je weet dat geen gewoon raamwerk kan dienen.

Materialiseren

Als je verliefd bent op het materiaalontwerp van Google, is Materialise een kader je zult genieten. Het beste is dat het maar een handvol componenten en lessen heeft om te leren, en dat het erop gericht is je zo snel mogelijk productief te maken. Er zijn weinig aanpassingsopties en Materialise volgt het populaire 12-koloms rasterformaat dat is opgesteld door Bootstrap.

Als je het mij vraagt, een Materiaal ontwerp wordt zo gewoon, en is zo. . . Standaard plat, dat we er vrij snel over zullen klagen, zoals we doen over Bootstrap’s alles-websites-zien-hetzelfde-probleem. Toch is het een mooi kader om mee te beginnen.

Zuiver

Is Yahoo dood?

Nee, deze vraag is geen afleiding, maar benadrukt een belangrijke opmerking: Yahoo heeft de Puur kader en vrijgegeven onder de BSD-licentie.

Een snelle blik maakt indruk op mij en ik vraag me af waarom dit aanbod niet bij meer mensen bekend is. Hoe dan ook, wat Pure, nou ja, puur maakt, is dat het een puur CSS-framework is. �� In feite hebben de ontwikkelaars een extra stap gedaan en opgesplitst in verschillende CSS-modules die u naar behoefte kunt importeren. Dus als u alleen het rastersysteem nodig heeft, hoeft u niet de volledige CSS te importeren en toe te voegen aan de laadtijd van de site.

Het Pure-raster is er in verschillende smaken: 5-punts, 2-punts, 24-punts, enz., Dus als het gaat om het maken van kolommen, heb je veel meer flexibiliteit. Pure is standaard niet het best uitziende CSS-framework, maar ik kan zien hoe het waarde toevoegt aan diegenen die een klein CSS-probleem in hun gebruikersinterface willen oplossen en ineenkrimpen bij de “handige” standaardinstellingen waarmee andere frameworks worden geleverd.

Skelet

Zoals je kunt zien in de schermafbeelding, Skelet is zo minimaal dat het zichzelf niet eens een CSS-framework, bibliotheek of zelfs module noemt. Het is standaard en bevat slechts 400 regels broncode! Ongelofelijk? Ik denk het wel, maar om de zaken in perspectief te plaatsen, is Skeleton ontworpen voor kleine of kleine projecten die weinig meer nodig hebben dan lay-outs en positionering.

Een kijkje waard; tenslotte, wie weet, is Skeleton misschien wat je al die tijd zocht!

Milligram

De laatste op de lijst is Milligram, een CSS-framework ontworpen voor snelheid en productiviteit. De ontwikkelaars hebben het onder de 2 KB gehouden, wat volgens de huidige normen veel betekent.

Een milligram is een leuke kleine versie van CSS-frameworks waarmee u het prettig zult vinden om mee te werken. Het uitbreiden is eenvoudig en met een paar regels aangepaste CSS kunt u het uiterlijk wijzigen zoals u dat wilt.

Dus welk CSS-framework is het beste?

Geef toe, je hebt eerder vergelijkbare vragen gesteld en het volgende teleurstellende antwoord ontvangen: geen. �� De keuze van een raamwerk (of een hulpmiddel, of zelfs een persoon in je leven) hangt van veel factoren af. Als je mijn advies wilt, hier is het: stop het geluid. Alleen omdat mensen gek worden op iets nieuws en glimmends, wil nog niet zeggen dat je het moet leren, anders blijf je achter. Nieuwe dingen uitproberen is geweldig, maar rondjes rennen op zoek naar de perfecte tool is, nou ja, zonde.

Dus, welke van deze frameworks heb je geprobeerd? Of misschien is er iets verbazingwekkends dat ik zojuist heb gemist? Laat het me weten in de reacties. Liefs, haat, willekeurige hoi, iedereen is welkom!

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