Wat is geschikt voor mij? 22 Responsive CSS Frameworks en Boilerplates Explained
CSS-frameworks bestaan al jaren, maar de komst van responsieve ontwerppraktijken heeft veel van onze oude favorieten nutteloos gemaakt. Gelukkig zijn veel echt getalenteerde ontwikkelaars erin gesprongen om het gat te vullen met de volgende generatie CSS-frameworks en boilerplates.
Er zweeft al een heleboel van deze dingen rond. Iedereen heeft een lijst, maar niemand leidt je echt door hoe elk raamwerk en standaardplaat verschilt van het volgende, zodat je een weloverwogen beslissing kunt nemen. Dat is ons doel vandaag. Volg mee terwijl we kijken naar wat elk van deze 22 responsieve CSS-frameworks en boilerplates uniek maakt.
Gumby
Het Gumby-raamwerk neemt het 960-raster waar we jaren geleden allemaal onze tanden in hebben gesneden en brengt het met een responsieve aanraking naar het moderne tijdperk van webdesign. Het heeft ook vooraf gemaakte stijlen voor zaken als formulieren, knoppen, schakelaars, vervolgkeuzelijsten, tabbladen en meer.
Het semantische rastersysteem
Als je rastersystemen en hun opgeblazen, niet-semantische markup haat, dan is deze iets voor jou. Het Semantic Grid-systeem maakt gebruik van de kracht van CSS-preprocessors (LESS, Sass en Stylus) om aanpasbare variabelen te creëren voor zaken als rugmarge en kolombreedte. Het enige dat u hoeft te doen, is een paar vooraf gebouwde mixins in uw CSS gebruiken, geen extra opmaak vereist!
Rasterloos
Gridless is een krachtige boilerplate die gebruik maakt van mobile first responsive webdesign om zichzelf aan te passen aan de breedte van het apparaat. Het zit ook boordevol geweldige functies zoals CSS-normalisatie, IE-bugfixes en typografische stijlen.
Frameloos
Frameless is moeilijk te classificeren omdat het technisch gezien meer een aanbevolen manier is om responsief ontwerp te benaderen dan een daadwerkelijke set bestanden die u kunt downloaden. Er zijn drie stappen: Maak eerst een regelmatig raster met vaste breedte, laat het dan oneindig herhalen en eindig door het in de viewport te centreren.
De site stelt specifiek dat Frameless geen framework is en dat er geen bestanden zijn om te downloaden, maar ondanks deze claim zijn er in feite enkele basissjablonen om u op weg te helpen.
Proportionele roosters
Proportionele rasters pakken een aantal grote problemen aan die zich voordoen bij het proberen van een responsieve CSS-lay-out, namelijk nestnetten en worstelen met op percentages gebaseerde waarden in sterk verschillende viewports.
Proportional Grids gebruikt CSS-box-sizing om een oplossing te creëren die vaste goten (ems / rems) mogelijk maakt, gemengd met vloeiende kolommen. De afstand tussen kolommen blijft op elk breekpunt gelijk in verhouding tot de basislettergrootte. Kolommen worden gedefinieerd in verhouding, bijv. Een helft, een derde, tweederde en kunnen gemakkelijk zo vaak als u wilt opnieuw worden gebruikt, zelfs wanneer ze zijn genest.
De Goudlokje-aanpak
De Goldilocks-aanpak is gericht op het verminderen van de neiging van responsieve ontwerpen om te neigen naar ondersteuning van specifieke apparaten. In plaats daarvan schiet het voor een universeel ontwerp dat niet afhankelijk is van welk apparaat dan ook.
De Goldilocks-benadering gebruikt een combinatie van EMS, max-width, mediaquery's en patroonvertalingen om drie statussen te overwegen waarmee uw ontwerpen resolutie-onafhankelijk kunnen zijn.
Twitter Bootstrap
Twitter Bootstrap behoeft geen introductie. Het is een van de grootste en slechtste CSS-ketelplaten op internet en het startpunt voor talloze professionele en persoonlijke sites van ontwikkelaars over de hele wereld.
Twitter Bootstrap bevat een responsief rastersysteem naast tal van stellaire vooraf opgemaakte elementen zoals formulieren, knoppen, navigatiemenu's en meer. Bekijk hier onze volledige introductie.
Stichting van ZURB
Foundation is de belangrijkste concurrent van Twitter Bootstrap omdat de twee projecten erg op elkaar lijken. Net als Bootstrap biedt Foundation u een responsief raster en verschillende gestileerde UI-elementen.
Foundation 3 is net onlangs gelanceerd, dus als je het project al een tijdje niet hebt bekeken, is het tijd om langs te komen en het te bekijken. Het is zonder twijfel een van de meest behulpzame en grondige kaders die u overal zult vinden.
Skelet
Skelet was een van de vroegst reagerende ketelplaten die verscheen en het is nog steeds een van de beste. In concept lijkt het een beetje op Foundation, alleen voelt het lichter aan (type, knoppen en formulieren zijn de enige UI-elementen).
Bekijk onze Skeleton-zelfstudie om te zien hoe ongelooflijk eenvoudig deze tool het maakt om binnen enkele minuten een responsief ontwerp te krijgen.
Amazium
Amazium lijkt veel op Gumby hierboven, omdat het een responsief raster is dat is gebouwd bovenop de 960 rastertechnieken van weleer. Hoewel het framework onlangs is bijgewerkt om helemaal uit te breiden tot 1.200px, zodat u kunt profiteren van grote schermen. Het bevat zelfs ondersteuning voor retina-displays!
Golden Grid-systeem
Het Golden Grid-systeem noemt zichzelf een 'vouwraster', wat eigenlijk gewoon een mooie manier is om te zeggen dat mediaquery's worden gebruikt om de oorspronkelijke lay-out van zestien kolommen in acht en vervolgens vier kolommen in te klappen als de viewport smaller wordt.
Net als sommige van de andere roosters die we tot nu toe hebben gezien, gebruikt Golden Grid System dakgoten op basis van EMS, zodat de dakgoten altijd in verhouding blijven tot de inhoud.
Het CSS-rastersysteem van 1140px
Dit is een vrij standaard rastersysteem zonder iets speciaals. Het begint met een vloeistofraster met 12 kolommen dat gebruik maakt van op percentage gebaseerde dakgoten en werkt uitstekend op beeldschermen van 1.280 en 1.140 px. Naarmate de viewport kleiner wordt, worden een paar eenvoudige mediaquery's gebruikt om de inhoud opnieuw te plaatsen.
StackLayout
StackLayout is voor de rebellen, het zal heel anders zijn dan andere frameworks die je hebt geprobeerd. In feite kwam het voort uit een afkeer van typische CSS-layout-frameworks.
Het basisprincipe dat hier aan het werk is, is dat StackLayout inline-block gebruikt als de hoeksteen van een uniek lay-outsysteem. Het systeem is een beetje eigenzinnig, maar het is toch behoorlijk indrukwekkend. Bekijk hier een walkthrough.
SimpleGrid
SimpleGrid is een ander uniek lay-outsysteem dat je leuk vindt als je net zo graag met deze dingen speelt als ik. Het raster is hier gebaseerd op vier verschillende schermbereiken: schermen kleiner dan 720 px breed, schermen groter dan 720 px breed, schermen groter dan 985 px breed en schermen groter dan 1235 px breed.
Om het systeem te implementeren, gebruikt u "slot" -klassen uit zowel een indeling met vier als met zes kolommen. Het klinkt ingewikkeld, maar het doet zijn naam eer aan en is vrij eenvoudig te implementeren.
Fluid Baseline Grid
Fluid Baseline Grid is gebouwd met een sterke nadruk op sterke typografie die zich aan een baseline-raster houdt. Het bevat ook een vouwraster met drie kolommen dat bedoeld is als een nuttig startpunt, niet als een standaard die moet worden gevolgd.
Columnal
Columnal is een soort hybride rastersysteem dat de beste elementen uit verschillende andere frameworks leent. Het heeft het elastische DNA van het 1140px CSS Grid-systeem met ook ongeveer 960.gs erin gegooid. Het zijn vrij standaard dingen, maar als de anderen niet goed bij elkaar passen, kun je het proberen.
Inuit.css
Inuit.css is een geweldig framework dat eigenlijk is gebouwd met het oog op uitbreidbaarheid. Gebruik de aangepaste rasterbouwer om uw eigen responsieve raster te maken en download vervolgens enkele iglo's (plug-ins) om het raamwerk op nuttige manieren uit te breiden.
320 en hoger
320 en hoger is als een verzameling webdesign-buzzwoorden (op een goede manier). Het bevat een responsief lay-outsysteem dat de 'mobile first'-mentaliteit gebruikt, samen met visuele Bootstrap-stijlen, Font Awesome-pictogrammen, Modernizr, Selectivizr, LESS en Sass. Het is een indrukwekkende kleine toolbox met goodies waarvan ik denk dat je ze leuk zult vinden.
Susy: responsieve rasters voor kompas
Deze is voor de super nerds zoals ik die zowel van lay-outsystemen houden als van Sass en Compass. Bouw binnen enkele minuten uw lay-outs op met de magie van mixins en variabelen.
Aangezien Compass onlangs de native ondersteuning voor rasters helemaal heeft laten vallen, zou Susy van pas moeten komen voor degenen die ze missen.
Initializr - Responsieve HTML5-sjabloon
Initializr is een tool waarmee u uw HTML5-projecten snel en gemakkelijk kunt starten met HTML5 Boilerplate, Bootstrap of een nieuwe responsieve boilerplate.
Het selecteren van de responsieve sjabloon is nog maar het begin, van daaruit bouwt u uw download op maat door te kiezen uit alle bronnen die u normaal gesproken zou willen, zoals Modernizr en MINDER.
Nog een andere mobiele ketelplaat
YAMB is een geweldig startpunt voor uw responsieve webprojecten, gebouwd op een paar belangrijke functies: een responsief vloeiend raster, vervolgkeuzemenu's die automatisch veranderen in selectiekaders op kleine schermen en responsieve afbeeldingen / diavoorstellingen.
Ik vind de website behoorlijk lelijk, maar de toolset zelf is best handig!
Wirefy
Wirefy is speciaal gebouwd met het oog op snel reagerende experimenten met wireframing. Het maakt gebruik van een aangepaste versie van het zestien kolommen 960-raster samen met enkele Bootstrap-achtige UI-elementen (menu's, formulieren, diavoorstellingen, knoppen, afbeeldingen, enz.).
Welke is jouw favoriet?
Het is onvermijdelijk dat dit soort berichten commentatoren zullen aantrekken die de behoefte voelen om te proberen het hele idee van het gebruik van een sjabloon of rastersysteem voor webdesign in diskrediet te brengen. Ze zijn gewoon niet voor iedereen en ik respecteer je mening als je ze niet kunt uitstaan.
Als je echter van rastersystemen houdt, zou ik graag je feedback horen over de bovenstaande opties. Welke heb je geprobeerd en wat vond je ervan? Welke is jouw favoriet?
