Een beknopte handleiding voor het kiezen van het beste kader voor u

Een steeds groter wordende verscheidenheid aan frameworks is beschikbaar voor ontwerpers en front-end ontwikkelaars, klaar voor snelle prototyping en implementatie. Er is een breed scala aan uitgebreide en lichte frameworks en vrijwel alles daartussenin. Met zoveel opties, kunt u gewoon de meest populaire kiezen, maar dat is misschien niet het beste voor uw specifieke project.

Elk framework heeft zijn voordelen, en het is aan jou om erachter te komen welke het beste bij je past. Gelukkig heb ik een deel van het onderzoek en de experimenten voor je gedaan door vier verschillende kaders nauwkeurig te bekijken. Ik heb ze geëvalueerd op: 

  • Eenvoud om te leren
  • Volume van externe bronnen
  • Veelzijdigheid
  • Browserondersteuning 
  • Toegankelijkheid

De kaders die ik heb onderzocht zijn Bootstrap, Concise, Foundation en Gumby. Houd er rekening mee dat ik u niet zal adviseren over wat ik moet kiezen of wat mijn favoriet is, ik leg alleen de sterke punten van elk framework uit, zodat u kunt beslissen welke het beste bij u past. Laten we erin duiken!

Notitie: Ik gebruik de term Kader, maar sommigen kunnen voelen Bibliotheek of boilerplate zijn meer geschikt.

Eenvoud om te leren

Winnaar: beknopt

Elk van de raamwerken waar ik naar keek, heeft een relatief vriendelijke, ondiepe leercurve, maar ik vond Beknopte het beste voor een beginner. Een slanker kader, Beknopt licht op functies, zodat de documentatie snel en eenvoudig kan worden gelezen. 

Als u meer wilt dan alleen de basisfuncties, zijn er een aantal add-ons die u in uw project kunt opnemen.

Midden op de weg: Bootstrap en Foundation

Bootstrap en Foundation hebben beide uitzonderlijke documentatie om u door setup, modules en uitbreidingen te leiden. Het brede scala van functies maakt het onvermijdelijk dat de documentatie een beetje meer betrokken en ontmoedigend is voor de beginner, vergeleken met Beknopte. Foundation komt met een demobestand met de naam index.html voor nieuwkomers om mee te experimenteren en als startpunt te dienen.

Geavanceerder: Gumby

De Gumby-download wordt ook geleverd met een demo.html-bestand om het raster in actie weer te geven, evenals ui.html met voorbeelden van elk ui-element. Het is echter des te ontmoedigender om met sterke aanmoediging in te stellen om SASS- en CSS-compilering in de terminal te gebruiken. Hoewel deze niet essentieel zijn voor het gebruik van Gumby, vormen ze toch wel het grootste deel van de documentatie die van start gaat. 

Gumby heeft maar één downloadoptie, in tegenstelling tot Bootstrap en Foundation, die je de mogelijkheid bieden om verschillende pakketten te downloaden om aan je behoeften en mogelijkheden te voldoen. 

Volume van externe bronnen

Winnaar: Foundation

Afgezien van de documentatie, biedt een snelle Google-zoekopdracht u onderweg extra hulp. Foundation heeft echter een eigen trainingscentrum en video's voor een naadloze leerervaring. Als je hier en daar wat kleine weetjes hebt, zijn er een enorm aantal blogs en tutorials geschreven met tips voor het gebruik van Foundation, inclusief hier over Tuts+.

Sluit tweede: Bootstrap

Net als Foundation is Bootstrap sinds de conceptie door de design- en front-endcommunity overrompeld. Tuts + heeft een aantal cursussen en veel tutorials beschikbaar over het onderwerp. Een immens populair kader, er zijn tal van blogs, artikelen en fora tot uw beschikking.

Midden op de weg: Gumby

Gumby is ook goed behandeld op blogs en in tutorials, hoewel niet zo uitgebreid als Foundation en Bootstrap. De Gumby-documentatie zal u ook wijzen in de richting van bronnen om Sass en nuttige hulpmiddelen voor het compileren van CSS te leren.

Nieuwe jongen in de buurt: beknopt

Net aangekomen op het toneel van kaders, moet Concise nog net zo nauwkeurig worden onderzocht als de andere drie. Extra resources zijn misschien niet zo nodig, gezien de kleine omvang en veelzijdigheid van dit framework.

Veelzijdigheid

Tie: Bootstrap, Foundation en Gumby

Bootstrap en Foundation zijn allemaal zeer uitgebreide frameworks, met een groot aantal functies en bronnen voor u beschikbaar. Elk van hen kan worden aangepast voordat u de bestanden zelfs downloadt, wat betekent dat er minder CSS-overschrijvingen voor u zijn. 

Ze zijn ook veelzijdig in de manier waarop ze kunnen worden gebruikt, zoals in combinatie met een CMS of voor prototyping van apps. Alle drie hebben vergelijkbare UI-functies, hoewel Bootstrap en Foundation een paar meer dan Gumby hebben, zoals typografie, lichtbakken en accordeons..

Basic: beknopt

Beknopt is gebouwd om een ​​klein kader te zijn en alleen de essentie te leveren. In tegenstelling tot de andere drie, geeft Beknopte je alleen wat absoluut noodzakelijk is bij het downloaden, maar kun je daarop verder bouwen zoals je wilt. Dit is geweldig als u UI-elementen zelf wilt ontwerpen, omdat er minder CSS-overschrijvingen nodig zijn.

Browserondersteuning en toegankelijkheid

Alle kaders in onze test komen behoorlijk overeen op dit gebied, volgens de meeste normen. Foundation is de enige die IE8 niet ondersteunt.

Foundation compatibiliteit

Bootstrap waarschuwt voor bepaalde CSS3-eigenschappen die niet worden ondersteund in IE8. 

"Internet Explorer 8 en 9 worden ook ondersteund, maar houd er rekening mee dat sommige CSS3-eigenschappen en HTML5-elementen niet volledig worden ondersteund door deze browsers. - Bootstrap-documenten

Bootstrap's documentatie behandelt in detail de browser- en apparaatondersteuning, evenals verschillen in de manier waarop bepaalde eigenschappen worden weergegeven. Het volgende gedeelte van Bootstrap's documentatie behandelt de toegankelijkheid. Foundation geeft ook praktische tips voor toegankelijkheid, maar Beknopt en Gumby niet.

Eervolle vermelding

Skelet is een ander lichtgewicht raamwerk, vergelijkbaar met Beknopte, en onlangs onderging een revisie. Het is het meest efficiënt voor kleinere sites, voornamelijk gericht op navigatie en typografie. Met nog minder stijlen dan Concise is het slank, slank, lichtgewicht en heel gemakkelijk om mee te beginnen. Het bevat geen Sass of geminimaliseerde CSS, in tegenstelling tot de andere vier onderzochte raamwerken. 

Conclusie

Er is geen verkeerde keuze voor welk raamwerk u zou moeten gebruiken, alleen een betere keuze. Mijn doel was om u te helpen erachter te komen welke de betere keuze voor u is, op basis van criteria die van invloed kunnen zijn op een project en uw workflow. Of u nieuw bent in frameworks of meer vertrouwd bent met hoe ze werken, het is belangrijk om te bepalen welke in uw projectbehoeften past. 

Hier is een korte samenvatting in tabelvorm. ★ suggereert een regelrechte winnaar, terwijl ☆ laat zien dat de bovenste plek werd gedeeld.


bootstrap Beknopt fundament Gumby
Eenvoud om te leren



Volume van externe bronnen



Veelzijdigheid




Browserondersteuning



Toegankelijkheid




Van de onderzochte criteria - eenvoud om te leren, externe bronnen, veelzijdigheid en browserondersteuning en toegankelijkheid - een of twee zullen belangrijker voor u zijn en u moet uw kader dienovereenkomstig kiezen. Voor degenen onder u die ervaring hebben met Bootstrap, Concise, Foundation of Gumby, op welke gebieden vindt u dat uw voorkeursraam het best functioneert? Voor welk soort projecten gebruik je het??

Voor degenen onder u die op andere frameworks leunen, hoe vindt u dat uw keuze hiermee overeenkomt??