Webcultuur: op grid gebaseerde lay-outontwerpen

Het semantische web heeft een nieuwe generatie internettechnologie opgeleverd. Omdat ontwerpers en ontwikkelaars samenwerken om de regels van het web opnieuw te definiëren, blijft het aantal open-sourceprojecten en API's van derden toenemen.

De meningen van webgeleerden verschillen over het gebruik van netwerksystemen . Velen beweren dat het instellen van rasterpunten de creativiteit van ontwerpers beperkt. Anderen beweren dat een raster een wetenschappelijke basis biedt voor een ontwerp dat moet worden geperfectioneerd.

Beide partijen bieden interessante argumenten. Deze ideeën zijn onderdeel geworden van een unieke webcultuur die wordt gekenmerkt door invloedrijke ontwerpregels en open-sourceprojecten.

Het raster is geen hoofdsleutel voor perfect ontwerp. Wiskunde heeft echter bewezen dat bepaalde ontwerpspecificaties de beste verhoudingen bieden voor pagina-elementen en lay-outs. Als je dat hebt gedaan eerder hierover gehoord , bent u misschien bekend met de vele opties die grid-gebaseerde lay-outs bieden aan ontwerpers.

Een vergelijking met het klassieke web

Oudere generaties gebruikten ontwerp als een controlemechanisme. Hun ontwerpen presenteerden informatie precies en op een manier die gemakkelijk te beheren was. Dit geldt nog steeds vandaag, maar deze vervallen ontwerpprincipes worden ontworteld.

In hun kielzog beweegt een nieuwe webcultuur zich. Een cultuur van open standaarden en protocollen, vrij gedeelde broncode en krachtige platforms die worden beheerd door programmeurs over de hele wereld.

Een van de redenen voor deze ontwikkeling is de aanzienlijke toename van het aantal mensen dat aan het semantische web werkt. De onderliggende oorzaak komt voort uit de menselijke drang om bij te dragen aan iets meer dan aan onszelf.

Werken voor een betaaldag is bevredigend, maar niet iets om gepassioneerd over te zijn. Ontwikkelaars die echt om nieuwe normen geven, willen hun sporen achterlaten.

Waar Grids geëvolueerd zijn

Er is geen grote studie geweest waarin pre-standaards en webstandaardtechnieken voor poststandaarden werden vergeleken. We zijn echter in staat om te volgen hoe roosters in de loop van de tijd populairder zijn geworden.

Het netwerksysteem is gebaseerd op huidige technologische trends en ontwikkelingen. Dit omvat statistieken over het aantal personen dat op een bepaald moment toegang tot internet heeft, de apparaten die zij gebruiken voor toegang tot internet en de schermresoluties en besturingssystemen van hun apparaten. Rastersystemen zorgen voor een structureel evenwicht tussen de website-indelingen. Ze bieden consistente metingen en zorgen voor flexibiliteit tussen raamwerken.

Aan het eind van de jaren negentig hadden niet veel huishoudelijke apparaten een resolutie hoger dan 800 × 600, en zelfs minder dan 1024 × 768. In de afgelopen 20 jaar zijn ingewikkelde en complexe besturingssystemen ontwikkeld om veel hogere resoluties weer te geven. 1024 × 768 is tegenwoordig een veel voorkomende instelling.

Monitorresoluties groeien exponentieel en deze trend lijkt niet te vertragen. Bekijk de gegevenstabel van Webstatistieken en trends ; het beschrijft schermresolutiemetingen via W3Schools.

Visual Grid-ontwerpen

Alle webpagina's zijn gebaseerd op rasters, ongeacht of de ontwerper hiervan op de hoogte is of niet. Digitaal werk bestaat uit pixels en zal als zodanig in overeenstemming zijn met een ingestelde breedte en hoogte, waarbij ook artistieke effecten visueel worden gegenereerd met afstand en afstand tussen punten.

In plaats van in het donker te schilderen, om zo te zeggen, kun je rasters gebruiken om een ​​licht op het project te schijnen. Grids werd voor het eerst populair met de opkomst van Adobe Photoshop als de de facto tool voor webontwerpers. Zelfstudies op het web bieden manieren om rasterlijnen weer te geven en te implementeren bij het maken van mockups, logo's, afbeeldingen, pictogrammen en andere digitale kunst.

In de loop der tijd hebben ontwikkelaars dit opgepikt en begonnen ze systemen in hun eigen werk te implementeren. Het ontwerpen van een rasterlay-out in Photoshop verschilt aanzienlijk van het maken van dezelfde lay-out in HTML en CSS.

Het werk dat nodig is voor elk pad is enorm verschillend, maar het rastersysteem zelf is universeel. Terwijl open standaarden op hun plaats vallen, evolueert de huidige ontwerpcultuur naar structuren op basis van rasters.

Eenvoudige HTML- en CSS-regels

Grids gebruiken enkele van de meest voorkomende eigenschappen van HTML-webpagina's. HTML-rasterlay-outs genereren elke keer dezelfde algemene sjabloon.

De structuur begint met een wrapper die net breed genoeg is om alle kolommen te bevatten. Binnen de wrapper-divisie moet er een verzameling onderverdelingen zijn. Het aantal onderverdelingen moet hetzelfde zijn als het aantal kolommen dat u nodig hebt.

Voor een indeling met twee kolommen hebt u mogelijk twee indelingen, geklasseerd als .left en .right . Voor al uw interne kolommen moet de CSS float-eigenschap naar links of rechts worden ingesteld, terwijl de wrapper a moet bevatten clearfix-klasse .

Om een ​​gevoel voor HTML-code te krijgen, kunt u een dynamische generator voor de grid-layout bekijken. De populaire oplossing van Paginakolom biedt een geweldige structuur en ondersteunt indelingen met meerdere kolommen. Alle HTML en CSS worden direct gegenereerd en slagen in het testen van normen en compliance.

Uitbreken met opvulling

Vulling en goten zijn integrale onderdelen van elk rastersysteem. Stukken met inhoud die naast elkaar zijn opgemaakt, hebben ruimte tussen beide nodig, waardoor de lay-out onnatuurlijk kan uitzetten, met als gevolg gebroken pagina's.

Maak een definitie in opgevulde gebieden door een lay-out te maken die is gevuld met dummy-inhoud. Plaats uw kolommen op een pagina en geef ze 1-pixel contouren in verschillende kleuren. Dit geeft een nauwkeurige weergave van hoe uw ontwerp eruit zal zien, en geeft een overzicht van de inhoud van elk gebied.

Deze techniek werkt met zowel vaste als vloeiende lay-outs, waardoor de integratie met het huidige rasterkader veel eenvoudiger wordt.

Goten hoeven ook geen vast kader te volgen. Mogelijk bent u bereid inhoudsgebied op te offeren om de ruimte tussen een split met twee kolommen te vergroten. Open-source frameworks zijn kneedbaar en stellen u in staat stijlen direct te bewerken of zelfs uw eigen te implementeren om regels te overschrijven en eigenschappen te definiëren.

Layout Grid CSS-eigenschap

De layout-grid property is een oudere CSS-specificatie die is overgenomen door Microsoft. Het is geschreven in steno om een ​​groot aantal rastereigenschappen in te stellen. In het bijzonder verwijzen ze naar layout-grid-mode , layout-grid-type , layout-grid-line , layout-grid-char en layout-grid-char-spacing .

Elk van deze kan worden gedefinieerd als zijn eigen eigendom en kan worden geschreven zonder de overkoepelende layout-grid . Hier is een korte lijst met uitleg over elk:

• layout-grid-mode
  Bepaalt welk type of modus van lay-outraster wordt gebruikt. Mogelijke waarden omvatten none voor geen rooster, line voor inline roosterelementen, char voor tekens en blokkeringselementen, en both voor algemene ondersteuning.
• layout-grid-type
  Bepaalt welk raster wordt gebruikt om paginatypografie en interne tekstelementen weer te geven. Waardeparen zijn loose , die wordt gebruikt voor Chinese en Koreaanse tekst, strict , die wordt gebruikt voor Japanse karakters, en fixed , die monospacing gebruikt om gelijke afstand tussen tekens toe te passen, ongeacht de taal.
• layout-grid-line
  Bepaalt de korreligheid van rastergroottes wanneer layout-grid-mode ingesteld op line of both . Deze eigenschap gedraagt ​​zich vergelijkbaar met line-height en kan numerieke waarden ontvangen die zijn ingesteld in cm, px, pt, em of percentages.
• layout-grid-char
  Bepaalt de grootte van het tekenraster voor de tekstinhoud van een element wanneer layout-grid-mode ingesteld op line of both . De waarden die deze eigenschap accepteert, zijn dezelfde als hierboven en hebben rechtstreeks invloed op de regelhoogte van de pagina. Het verschil is dat layout-grid-line beïnvloedt het paginaraster, terwijl layout-grid-char is van invloed op het tekst- en tekenafstandraster.
• layout-grid-char-spacing
  Regelt de spatiëring van tekens wanneer layout-grid-mode ingesteld op char of both en de layout-grid-type eigenschap is ingesteld op loose . Deze eigenschap gedraagt ​​zich als line-height en moet worden gebruikt voor tekstgebieden op blokniveau.

Het doel van het maken van deze eigenschappen is om rasterlay-outs voor Aziatische gecodeerde pagina's aan te passen. De personages in Aziatische talen hebben vaak aangepaste paginalay-outs nodig.

Als ze in andere landen worden bekeken, kunnen deze tekens zich vreemd gedragen en uw rasterberekeningen verbreken. Deze unieke eigenschappen maken een betere visuele opmaak mogelijk door gebruik te maken van een een- of tweedimensionaal rastersysteem.

Verticale paginaritme

Veel grafische kunstenaars zullen het belang van verticale spatiëring in het ontwerp van het raster verdoezelen. Rasterlijnen ondersteunen horizontaal lay-outontwerp en aligneren verticale pagina-elementen en typografie. Vier belangrijke eigenschappen manipuleren verticale spatiëring: lettergrootte, lijnhoogte, boven- en ondermarge en opvulling.

Lijnhoogte is de grootste factor in verticale afstand. Paginatekst wordt geschaald door hoe groot afzonderlijke letters worden weergegeven en door hoeveel ruimte de tussenliggende regels vereisen. Gewoonlijk wordt de regelhoogte gedefinieerd in pixels of ems, afhankelijk van hoe flexibel de lay-out is. Ems handhaven typografische consistentie in alle resoluties en browsers. De beste aanpak is om letterstijlstijlen toe te passen op alle belangrijke HTML-elementen, inclusief koppen, blokcitaten en alinea's.

Verticaal ritme kan worden geretoucheerd zodra een raster op zijn plaats is geplaatst, waardoor schaalvergroting voor verschillende omgevingen eenvoudig is. Desktopgebruikers zullen een heel andere ervaring hebben dan laptop- en mobiele gebruikers, die te maken hebben met veel kleinere resoluties.

U kunt de verticale uitlijning niet precies nauwkeurig plannen, maar in de meeste gevallen zal een goed opgeleide schatting kwaliteitsresultaten opleveren.

De regel van derden

Verdeel een ontwerp in drie horizontale en verticale ruimtes. Hiermee maakt u een raster van negen rechthoeken genesteld in nieuw gevormde vakken. Het is veel gemakkelijker om te werken met ontwerpen die worden opgesplitst in blokgebieden met eindige punten.

De wetenschap achter deze trend komt van de 'goddelijke proportie', ook wel bekend als de 'goddelijke ratio'. De verhouding van 1.618, wat de goddelijke proportie is, is een wiskundige constante. Wanneer we een lay-out met een vaste grootte in deze waarde verdelen, kunnen we de meest precieze verdeling berekenen voor een structuur met twee kolommen.

Neem als voorbeeld een indeling van 960 pixels. Als we 960 bij 1.618 delen, krijgen we ongeveer 593. Volgens de gouden proportie moeten we onze primaire kolomlengte instellen op 593 pixels. Deze methode gaat eeuwen geleden terug naar kunstenaars. Gelukkig, met de verspreiding van open-source frameworks, is het grootste deel van de wiskunde al berekend.

Een gouden rechthoek bouwen

Deze theorie voor het maken van prachtige op rasters gebaseerde rechthoekige lay-outs is gebaseerd op de Rule of Thirds. Gesplitste rechthoeken zijn geometrisch geluid vergeleken met de gulden snede. Numerieke waarden voor de breedte en hoogte van de rechthoek staan ​​in verhouding tot de gouden regel.

Dit soort rechthoeken staan ​​bekend als 'gouden rechthoeken'. De kortere en langere zijde moeten de waarden van respectievelijk de variabelen a en b bevatten.

Deze rechthoeken zijn handig om paginalay-outs te maken: ze meten hoe groot blokelementen moeten zijn. Ze zijn extreem eenvoudig te berekenen en de tools voor veel populaire rasterframeworks zijn ingebouwd.

Deze elementen zijn zeer gunstig voor webontwerpers die wiskundige rasters gebruiken. Stel je de meerdere scenario's voor waarin een zorgvuldig gestructureerde gouden rechthoek de esthetiek van een pagina zou verbeteren. Dit kunnen pagina-widgets, afbeeldingen van e-commerceproducten en zelfs inhoudrijke tabellen zijn.

Begin met 960gs

Met al deze informatie beschikbaar voor het publiek, zijn webontwerpers begonnen met het definiëren van hun eigen normen.

Van alle kaders, de 960 rastersysteem (960gs) is waarschijnlijk de bekendste. Dit wil niet zeggen dat dit het beste is - geen netwerksysteem dat perfect aan alle criteria voldoet - maar het is gemakkelijk om mee te werken. 960gs is aanpasbaar en werkt goed met bijna elke website. En het wordt goed weergegeven op de meeste browsers en apparaten

De wiskunde omvat 12 kolommen met elk 60 pixels, samen met een marge van 10 pixels aan elke zijde, waardoor een goot met 20 pixels ontstaat. De meeste roosterrasters zijn gebaseerd op kolommen van 12 tot 24 pixels. Van u wordt natuurlijk niet verwacht dat u 12 kolommen in uw lay-out opneemt.

Uiteindelijk zult u de kolommen en goten combineren in een enkele rastereenheid. Het publiceren van inhoud is veel eenvoudiger wanneer u specifieke details voor afbeeldingen, widgets, video's en andere pagina-elementen kunt opstellen.

960gs heeft zoveel publiciteit verzameld omdat het zich goed aanpast aan het web. De meeste schermresoluties kunnen een 960-pixel website weergeven zonder horizontale schuifbalk. In toenemende mate passen lay-outs in deze verhouding, wat aangeeft dat dit de toekomst van het web is. De extra breedte neemt niet weg van het ontwerp en het uitbreiden of inkrimpen van een sjabloon is heel goed mogelijk.

Een volledige 960-indeling begrijpen

Slechts zo veel kolommen kunnen rationeel in een ontwerp passen. Een raster is niet bedoeld om je in een beperkende mindset te vergrendelen. Grids zijn handleidingen om te volgen: ze verbeteren de interactiviteit van gebruikers en de plaatsing van het pagina-element.

Het grootste raster dat u kunt maken, is een inhoudsgebied van 940 pixels met goten van 20 pixels. Het is een goofy gebruik van het raster, maar het is goed om de mogelijkheden te begrijpen. Lay-outs met twee kolommen zijn vrij eenvoudig en bieden veel ruimte voor inhoud. Veelvoorkomende voorbeelden zijn:

• 780 x 140
• 700 x 220,
• 620 x 300.

Merk op dat deze allemaal oplopen tot 920. Het 40-pixelverlies kan worden verantwoord door dakgoten op elk "blok" van de lay-out. Deze spaties houden gebruikers gefocust en zorgen ervoor dat de inhoud soepel uiteenvalt. Met elementen met gesplitste inhoud hebben we goten aan de overkant en tussen de blokken, die elk 10 van de 40 pixels vertegenwoordigen.

Deze spaties worden groter naarmate u nieuwe blokken aan de lay-out toevoegt. Een ontwerp met drie kolommen heeft iets minder inhoudsruimte dan een ontwerp met twee kolommen.

Als dit concept nog steeds verwarrend is, raadpleeg dan de afbeelding hierboven. De eenvoudigste manier om met rasters te werken, is door een referentievel te ontwerpen dat lijkt op de bovenstaande afbeelding, met alle mogelijke onderbrekingen voor inhoudsblokken. Met deze informatie mix- en matchstijlen bepalen welk type ontwerp het beste bij uw project past.

Stel bijvoorbeeld dat we een mock-up willen ontwerpen met behulp van drie kolommen en het grootst mogelijke inhoudsgebied. Met de bovenstaande grafiek kunnen we ons inhoudsgebied opsplitsen in twee delen: één vol inhoud, maar in tweeën gedeeld om twee kolommen te bevatten. Dit zou een inhoudblok van 450 pixels en twee kolommen met 210 pixels vereisen.

Nogmaals, deze rasters zijn niet bedoeld om creativiteit te onderdrukken. Ze zorgen voor flexibiliteit, maar houden uw back-endstructuur veilig. De meeste ontwerpers zullen niet over de wetenschap van dit alles beraadslagen. De tijd dat deze open-source systemen een project opslaan, is buitengewoon, eenvoudig de moeite waard om door de documentatie te bladeren en uw eigen lay-out te implementeren.

Vloeiende rasterlay-outs

Het is niet gebruikelijk om rasters vast te zetten op vloeiende lay-outs. Pixels zijn de meest nauwkeurige maateenheid voor een website. Om in een meting zoals percentages of ems te gaan, zou een zorgvuldige afweging nodig zijn. Dergelijke lay-outs zijn mogelijk met een paar wijzigingen en extra CSS-selectors.

Fluid 960-rastersysteem is bekend, hoewel het grootste deel van de code niet toegankelijk is voor oudere versies van Internet Explorer. Door middel van interactieve prototyping en het werken aan talloze schermresoluties, kunt u een ontwerp van 960 pixels schalen over veel schermresoluties. Dit open framework is geen exacte kopie van 960gs en wordt geleverd met nieuwe documentatie. Als je geïnteresseerd bent, bekijk dan de GitHub-repository voor actieve forumdiscussies en gearchiveerde vraag- en antwoordsessies.

Net als de rest van de webontwerpgemeenschap, jeuk waarschijnlijk naar iets stabielers. Een paar vloeiende frameworks die geweldige lay-outs genereren.

YAML-rasterlay-outs

Nog een andere lay-out met meerdere kolommen (YAML) is een van de meest populaire CSS-frameworks. Het bevat een groot codebasis voor het manipuleren van flexibele XHTML- en CSS-lay-outs. Het wordt voortdurend bijgewerkt door actieve community-ontwikkelaars.

Het raamwerk is enorm veelzijdig en biedt tal van mogelijkheden praktische voorbeelden met code. De kleinste lay-out met vaste breedte komt overeen met 740 pixels, passend bij 800 × 600 schermresoluties. Maximale breedteresoluties zijn ingesteld op 80 em, en bieden schaalbaarheid tussen surfen op een mobiel en op een desktop.

Ingesteld met standaard weblettertypen, zal ongeveer 75% van de lay-outs voldoen aan een maximum van 960 pixels, hoewel dit kan worden overschreven.

Veel van de bugs in oudere browsers zijn gepatcht. YAML ondersteunt Google Chrome, Mozilla Firefox, Safari en alle versies van Internet Explorer 5+. Zie de raamwerk overzicht en functies voor meer diepgaande informatie.

Yahoo! Gebruikersinterfacebibliotheek

YUI is een verzameling JavaScript- en CSS-bibliotheken die door Yahoo zijn uitgegeven. De meeste projectcode en bugfixes zijn geschreven door professionele ontwikkelaars uit de YUI-community. De meest recente versie is echter YUI2 YUI3 API-documenten zijn vrijgegeven voor v3.1.1.

De YUI2 startpagina heeft koppelingen naar de meest populaire projecten. Naar de bodem, vermeld onder "YUI2 CSS Tools", zijn vier invloedrijke frameworks: CSS Reset, Base, Fonts and Grids. Dit artikel gaat over CSS Grids, hoewel er naar veel van deze andere frameworks is verwezen.

Het downloadbestand is slechts 4 KB en biedt meer dan 1000 unieke webpagina-indelingen. Ingebouwde instellingen maken zowel de breedte- als vaste lay-outbreedten mogelijk. Kolommen worden automatisch gewist, dus of u nu twee- of vierwegsplitsingen uitvoert, de voettekst blijft altijd onder de primaire inhoud. Typografische eigenschappen zijn samengebonden voor flexibele, gebruikersspecifieke aanpassingen. Veel kernfuncties zijn geregeld, waardoor het werken in YUI2 zo leuk is.

Het CSS Grids-framework biedt een klein aantal lay-outs gebaseerd op mobiele apparaten. Deze worden alleen correct weergegeven in browsers met een relatief nieuwe versie van de Webkit-engine. Dit omvat smartphones zoals Android-apparaten, de iPhone, BlackBerry en vele Windows Mobile-apparaten.

De integratie is leuk, maar deze nieuwe media zijn niet grondig getest en kunnen nog steeds onjuist worden weergegeven op sommige mobiele apparaten. Maar uiteindelijk is het de moeite waard, omdat de meerderheid van de mobiele bezoekers die bereid zijn de inhoud van uw website te lezen, waarschijnlijk een smartphone heeft.

De evolutie van webcultuur

Webontwerpers zijn nogal nadrukkelijk geworden over open systemen en regels. Het vroege internet was helemaal geen community. Er waren HTML- en CSS-normen, maar de mentaliteit achter de meeste lay-outs was "alles werkt." Na belangrijke ontwikkelingen in de webtechnologie is internet het beste medium voor publicatie wereldwijd.

Webontwerpers en ontwikkelaars streven ernaar het proces van het maken van websites te vereenvoudigen zonder afbreuk te doen aan de kwaliteit of ervaring van een website. Roosters zijn een harmonieus instrument omdat ze ontwerpen een ordening en structuur geven. Chaos en willekeurige creatie leveren meestal geen resultaten op.

Dit is de reden waarom rasterontwerpen zo toegankelijk zijn. Het web is omgevormd tot een agile ontwikkelsysteem. Op grid gebaseerde lay-outs produceren stabiele websites: het is geen verrassing dat de gemeenschap frameworks heeft aangenomen als gangbare praktijken.

In plaats van te vertrouwen op oudere, onbetrouwbare methoden, kan de gemiddelde webontwerper zich tegenwoordig richten op het creëren van websites die aangenaam zijn voor gebruikers, in plaats van het coördineren van pixel-perfecte creaties.

Tegenwoordig zijn ontwerpers veel jonger en hebben ze meer dan ooit passie voor design. Dit, in combinatie met de open webbeweging, betekent dat een stroom nieuwe webcode voortdurend wordt vrijgegeven voor het publiek. GitHub-opslagplaatsen biedt netwerkmogelijkheden met andere CSS-ontwikkelaars.

Custom Grid Framework Development

Ontwerpers hebben kritiek geuit op veel open raamwerken als te opgeblazen. Velen worden bestempeld als verwarrend, met te veel klassen en regels om mee te werken. Dit geldt misschien voor sommigen en ik breng deze opmerkingen zeker niet in diskrediet.

Uiteindelijk, hoe flexibeler een ontwerp, hoe beter. Kunstenaars zoeken naar hulpmiddelen die hun werk gemakkelijker maken. Kaders zijn niet geschikt voor alle ontwerpen. Kaders ontwikkelen via kleinere webprojecten zal op de lange termijn tijd besparen. Beschouw de CSS-systemen echter als meer een leermiddel dan een productieomgeving.

Roosters kunnen in het begin verwarrend zijn, geen twijfel mogelijk. Het hebben van een referentiekader en documentatie die tijdens het hele proces kan worden gecontroleerd, helpt nieuwkomers snel en met minder stress te integreren.

Bij voldoende oefening zal het ontwikkelen van een aangepast CSS-raamwerk eenvoudig zijn. De voordelen hiervan wegen veel zwaarder dan de voordelen van het werken met de bron van iemand anders. U kunt alle lay-outformaten op één locatie structureren en eigenschappen zoals tekengrootte, regelhoogte en blokelementen definiëren. Niemand heeft ooit een perfecte CSS-code geschreven, dus blijf bij wat voor jou het beste werkt.

Common CSS Grid Frameworks

Hieronder staan ​​enkele van de meer populaire CSS-frameworks. Hoewel niet al deze kaders zich uitsluitend richten op het ontwerp van het raster, bieden ze wel nuttige bibliotheken om te bestuderen en te implementeren in webontwerpen. De broncode van het project is in beide gevallen gratis en wordt meestal geleverd met documentatie.

1 KB Grid

1 KB Grid is een geweldig CSS-framework dat vooral de nadruk legt op snelheid. De downloadbestanden zijn in totaal minder dan 1 kB en bevatten de meeste CSS-selectors die u nodig hebt om een ​​prachtige website-indeling te maken. De CSS-code kan vóór het downloaden worden aangepast, wat een groot voordeel is voor alle webontwerpers. U kunt kiezen tussen hoeveel kolommen u wilt opnemen en hoe breed de kolommen en dakgoten moeten zijn. Dit raster is uitermate vriendelijk voor nieuwkomers en een geweldige manier om jezelf te breken.

Basislijn-CSS

Baseline is een andere standaard CSS-sjabloon die gratis te downloaden is. Dit pakket bevat niet alleen code voor rasters, maar het structureert ook paginatypografie en blokelementen. Alle code is compatibel met CSS3- en HTML5-elementen, waardoor ontwikkelaars kunnen bepalen hoe de paginastroom moet worden gestructureerd. Baseline CSS biedt oplossingen voor verticale ruimtemanipulatie door paginatypografie te integreren in een flexibel raster.

1140px CSS Grid System

CSSGrid.net is de thuisbasis van een nieuwer vloeiend raamwerk voor op rasters gebaseerde websites. Met 1140 pixels en een splitsing van 12 kolommen schaalt de structuur op alle apparaten, van de grootste monitorresoluties tot handhelds. Het kader gebruikt mediaquery's om te controleren wanneer een bepaalde lay-out moet worden weergegeven en hoe de pagina-inhoud moet worden verspreid. Auteur Andy Taylor werkt het project vaak bij en u kunt het downloaden nieuwste versie 1.6 hier .

YAML

YAML biedt het meest flexibele kader om lay-outs te ontwikkelen. De documentatie biedt een complete oplossing voor alle vaste, elastische en vloeiende lay-outs. Core-bestanden zijn uitgebreid getest op kleine en grote websites. Als u op zoek bent naar een stabiel CSS-framework, is YAML een geweldige oplossing.

Blueprint CSS

plan bevat veel van de voordelen van Baseline. Het voordeel van dit framework is de bekende merknaam. Veel actieve ontwikkelaars hebben het project bijgewerkt met nieuwe klassen. Grids omvatten een groot deel van het raamwerk, maar veel modellen worden gebruikt om typografie, mobiele en printscreens en meer te vormen!

CSS Boilerplate

De CSS Boilerplate project is gestart door een van de ontwikkelaars van Blueprint. De code is een meer verfijnde, uitgeklede versie van het Blueprint-framework, geoptimaliseerd voor snelheid en eenvoudige leesbaarheid. Hoewel het project niet recentelijk is bijgewerkt, biedt het beginners de mogelijkheid om hun eigen CSS-projectdefinities uit te sluiten.

YUI 2: Grids CSS

YUI2-rasters is een zeer populair raamwerk dat wordt uitgegeven door Yahoo onder zijn YUI2-regel. De code is perfect voor zowel vaste als vloeiende lay-outs, volgens regels die zijn ingesteld in CSS2 en CSS3. Het framework is goed gedocumenteerd onder de Yahoo User Interface Library en wordt beschouwd als een van de betere frameworks voor beginners.

Dit bericht is exclusief geschreven voor Webdesigner Depot door Jake Rocheleau , een gepassioneerde webontwerper en liefhebber van sociale media. Jake houdt van lezen en schrijven over de nieuwste digitale internettendensen en netwerken binnen de ontwerpgemeenschap. Bekijk hem op Twitter @jakerocheleau voor meer informatie over zijn werk.

Gebruikt u een op rasters gebaseerd kader voor uw ontwerpen? Deel uw mening met ons!

• ← Exclusieve gratis pictogrammen: "Appliance Icons"
• Flash-websites maken met Wix →