Skeleton

Wat is Skeleton?

Sketeton is net zoals 960gs en BluePrint een gridsystem. De opzet is dat je de CSS, voor je website, krijgt van skeleton en start met een template die zij voor jou ontwikkelden. Deze template bevat een aantal kolommen waar jij jouw lay-out tussen moet tekenen.

Op deze manier ontwikkel je een website die conform de huidige webstandaarden is én er prima uitziet op verschillende browsers en schermweergaven.

Een kleine rondleiding

Ga naar http://getskeleton.com/

Van start met Skeleton

Klik op Download.

Download Skeleton 1.1 en de PSD Template.

Pak het masterbestand (zip).

De structuur van de bestanden:

Open de template in Photoshop, Fireworks of ander grafisch programma.

Teken een lay-out, tussen de tweede en voorlaatste hulplijn.

Voorbeeld:


Een eenvoudig voorbeeld

Normaal gezien heeft een website een mooie lay-out, die eerst in Photoshop, Fireworks of Illustrator gebouwd wordt. In dit eenvoudig voorbeeld, slaan we deze stap over en starten dadelijk met de webpagina.

Maak een nieuwe webpagina (in Dreamweaver, kladblok, …) en sla de pagina op.

We linken de pagina nu met 3 css-bestanden (tussen de head-tags):

·      sketelton.css: dit zorgt voor de specifieke skeleton-opmaak en is dus verplicht.

·      base.css: dit geeft een basisopmaak die je kan gebruiken maar dit is zeker niet verplicht. Wanneer u zelf lettertypes en ander opmaak zal instellen, kan je beter niet met base.css koppelen.

·      layout.css: dit biedt enkele media queries

We maken nu een div-structuur (tussen de body-tags):

We gebruiken de id’s later voor onze eigen css-code. We voegen nu klassen toe aan de divs.

De container krijgt steeds de klasse container.

Dan kies je afhankelijk van het aantal kolommen dat je een div wil geven, een aantal.

Het totaal is 16 kolommen.

Wanneer je een div de volledige breedte wil geven, gebruik je “sixteen columns”.

Twee divs naast mekaar (left en right), kan je bv 5 en 11 kolommen breed maken:

“five columns” en “eleven columns”.

Je kan ook speciale klassen gebruiken zoals “full-width”, “one-third  columns” of “two-thirds column”.

Typ wat inhoud tussen de divs. Je zal het resultaat zien.

We maken een eigen CSS-bestand aan, waar we de divs via id’s een eigen opmaak geven, zoals achtergrondkleur, achtergrondfiguur en tekstopmaak.

Een voorbeeld (style.css):

body {   
     background-color: #333;
     font-family: Arial;     
     font-size: 10pt;
}
#container
{   
     background-color: #CCC;
}
#header
{   
     background-color: #9C0;
     height: 100px;
}
#footer
{   
     background-color: #000;
     height: 75px;
     color: #EDEDED;
}
#left, #right
{   
     color: #FFF;
}

Resultaat:

Uitbreiding:

·      Elke kolom heeft standaard 10 px marge aan de linkerkant én de rechterkant. Via de klassen alpha en omega kan je respectievelijk de marge links of rechts op 0px zetten.

·      Via de klasse row kan je 20 px ondermarge instellen.

·      Via de klasse offset-by-one tot en met offset-by-fifteen, kan je 60 tot 900px linkerpadding (opvulling) geven. Zo kan je inhoud opschuiven.

·      Wanneer je een afwijkende padding of margin wil instellen, plaats je daarvoor best een nieuwe div in de bestaande, met eigen opmaak (id).

Verwante cursussen

·      Weblay-outs leren maken met Fireworks

·      Leren werken met Photoshop

·      Cursus HTML en CSS

·      Maak een thema voor Wordpress

·      Maak een template voor Drupal

·      Maak een template voor Joomla

Verwante tutorials

·      Werken met het 960 Grid System deel 1 (inleiding)

·      Werken met het 960 Grid System deel 2 (basis)

·      Werken met het 960 Grid System deel 3 (gevorderd)

Meer van dit lekkers

BEKIJK ALLE TUTORIALS!

Sharing is caring

Iets bijgeleerd? Deel deze tutorial!

U bent niet alleen

deze pagina
totaal

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com