3 Fantastische CSS-frameworks die je niet wilt missen
Persoonlijk begin ik met het coderen van elk project met slechts een raster en bouw ik vanaf daar. Ik ben kieskeurig en ik hou van controle over zoveel mogelijk variabelen.
Er zijn echter momenten dat dit gewoon niet praktisch is. Misschien bouw je een app of een uitzonderlijk grote en gecompliceerde site. Misschien heb je gewoon geen tijd om elk afzonderlijk element helemaal opnieuw vorm te geven, en dat hoeft ook niet. Dat is wanneer je een compleet raamwerk wilt, met extra's.
Er is veel geschreven over de "grote namen" -kaders, Bootstrap, Stichting, Gumby, dus we gaan hier niet over praten. Ik heb gespeeld met ... Ik bedoel rigoureus het testen van drie van de minder bekende opties. Neem een kijkje, een ervan is misschien precies wat je nodig hebt.
Kube
Kube is zeker een hulpmiddel voor de moderne front-end ontwikkelaar. Alleen moderne browsers - en IE9 + - worden ondersteund. De standaardstijlen zijn mooi, maar flauw genoeg om te worden aangepast voor bijna elke branding.
Het is kortom een mooi maar eenvoudig en eenvoudig kader, ontworpen met een bijna universele visuele aantrekkingskracht en bedoeld voor zware aanpassing.
De eigenschappen
Om alle functies in de diepte te beschrijven, of zelfs om ze gewoon allemaal op te noemen, zou dit artikel waarschijnlijk te veel ruimte in beslag nemen, dus ik zal u de hoogtepunten geven: het framework zelf is MINDER-gebaseerd en modulair. Als je alles behalve de knopstijlen wilt, is het een heel eenvoudige zaak om je eigen stijlen te "compileren". Verwijder de betreffende @import- regel uit kube.less en ga. Het is veilig om te zeggen dat er stijlen zijn voor zowat elk HTML-element dat je maar kunt bedenken, en de gebruikelijke extra's zoals knoppen, standaard navigatiebalken, helperklassen en een behoorlijk solide rasterlay-outsysteem.
In zekere zin wordt Kube gedeeltelijk gedefinieerd door wat het niet heeft. Het heeft bijvoorbeeld geen overvloed aan gebruikersinterface-elementen en extra stijlen. Er zijn geen jQuery-plug-ins voor UI-functionaliteit. En het komt zeker niet met de indruk dat je "vastzit" aan iets ervan.
Conclusie
Kube is een solide aanbod. De makers hebben de basisprincipes niet beknibbeld, maar er is een duidelijk gevoel van 'alleen wat je nodig hebt' dat bij dit framework hoort. Het is een goede plek om te beginnen en het belichaamt dus het ware doel van elk raamwerk. Kleur me onder de indruk.
IVORY Framework
IVOOR, zoals Kube, is ontworpen om gemakkelijk te begrijpen en snel geïmplementeerd te worden. De typografie ziet er goed uit, maar is flauw genoeg om te gebruiken met bijna elk project, en de algemene standaardstijlen zijn dat ook.
Het is een raamwerk dat is ontworpen om u net genoeg te geven om te beginnen en een paar extra's.
De eigenschappen
De functies zijn wat u normaal zou verwachten: solide en flexibel rastersysteem, stijlen voor typografie en alle vormen, enzovoort. IVORY verschilt echter van Kube doordat u een paar extra UI-elementen krijgt: knoppen, waarschuwingsvakken, paginering, tuimelschakelaars, tooltips, broodkruimelnavigatie, tabbladen en accordeons.
Wat deze UI-componenten onderscheidt van vele andere is dat ze allemaal zijn geïmplementeerd met CSS3 en geen JavaScript. De enige reden dat jQuery UI is gekoppeld, is om de datumkiezer te laten werken.
Slechts twee dingen die ik niet leuk vind: sommige UI-componentstijlen doen sterk denken aan Bootstrap 2.0-stijlen. Dus ja, je wilt waarschijnlijk die veranderen. Bovendien vereist het rastersysteem het gebruik van een extra klasse in de laatste kolom van een rij; Ik haat dat gewoon.
Conclusie
Die twee kleine kanttekeningen terzijde, IVORY Framework is een goede optie voor een willekeurig aantal projecten. Het zijn niet de gemakkelijkst aanpasbare opties, maar als je gewoon aan de slag moet gaan met een goede set standaardwaarden en wat extra UI-componenten, geef het een werveling.
Baseren
Baseren, door Matthew Hartman , neemt een iets meer trendy (op dit moment in ieder geval) benadering van het CSS-raamwerk. Gebaseerd op Normalize.css , het begint met dunne koptekstlettertypen en platte kaders voor knoppen. Het valt niet te ontkennen dat de standaardstijlen ronduit mooi zijn.
Dit is misschien niet voor iedereen geschikt, afhankelijk van merkproblemen, maar het is eenvoudig genoeg om te veranderen. Uiteindelijk draait het bij Base allemaal om maatwerk.
De eigenschappen
Het basisstation wordt geleverd in zowel LESS- als SASS-versies, zodat u snel de variabelen kunt wijzigen en het opnieuw kunt compileren om aan uw behoeften te voldoen. Ingebouwde variabelen zijn lettergrootten, breekpunten, hoofdcontainerbreedten voor elk breekpunt en meer.
Er zijn veel extra klassen beschikbaar om je te helpen bij het instellen van je mobielspecifieke lay-outs en er zijn 'mixins' in een apart bestand om je op weg te helpen.
Net als bij Kube zijn er geen extra gebruikersinterfacecomponenten dan degene die standaard met HTML worden geleverd, dus als u interfaces met tabbladen, accordeons en dergelijke wilt, moet u ze zelf maken. Base lijkt te zijn gericht op het bouwen van prachtige websites in tegenstelling tot web- apps.
Conclusie
Als u een site bouwt die niet te veel app-specifieke UI-componenten nodig heeft, dan is Base een fantastische bron. Pagina's die ermee zijn gebouwd, zien er al behoorlijk uit; maar als je de standaardstijlen niet leuk vindt, is het niet moeilijk om ze te veranderen.
