De siste to årene (kanskje lengre) har CSS-rammeverk blitt meget populære. De mest kjente er blueprint og 960 Grid System. Tanken bak rammeverkene er å bruke et verktøy som forenkler byggingen av nettsiders layout. Blueprint er utviklet av Olav Frihagen Bjørkøy og 960 Grid System er utviklet av Nathan Smith. Selv om begge systemer er fine i sin originale form, har jeg valgt å ikke bruke hverken blueprint eller 960 Grid System når jeg jobber med CSS-rammeverk.
Hva slags CSS-rammeverk bruker jeg?
Selve prinsippet i 960 Grid System passer meg utmerket, men det inneholder litt mer enn jeg trenger. Derfor har jeg trukket ut selve kjernen og ender opp med dette CSS-rammeverket:
.wrapper { width: 960px; }
.col01, .col02, .col03, .col04, .col05, .col06, .col07, .col08, .col09, .col10, .col11, .col12 {
display: inline;
margin: 0 10px;
float: left;
}
.col01 { width: 60px; }
.col02 { width: 140px; }
.col03 { width: 220px; }
.col04 { width: 300px; }
.col05 { width: 380px; }
.col06 { width: 460px; }
.col07 { width: 540px; }
.col08 { width: 620px; }
.col09 { width: 700px; }
.col10 { width: 780px; }
.col11 { width: 860px; }
.col12 { width: 940px; }
.first { margin-left: 0; }
.last { margin-right: 0; }
.clearfix:after {
height: 0;
clear: both;
content: '.';
display: block;
visibility: hidden;
}
.clearfix { display:inline-block ;}
* html .clearfix { height:1%; }
.clearfix { display:block ;}
Ukomprimert, utgjør de 30 linjene 0.7 KB. I tillegg synes jeg det fungerer bra å bruke Eric Meyers reset.css.
Hvordan bruker jeg CSS-rammeverk?
Ved å huske og respektere det jeg har skrevet i CSS-rammeverket kan jeg enkelt og kjapt sette sammen layouter som stort sett fungerer i alle de mest kjente og brukte nettleserne. Her er et lite eksempel:
<div class="wrapper"> <!-- Hovedspalte --> <div class="col06 first"></div> <!-- Sidespalte --> <div class="col06 last"> <!-- halvbredde kolonne --> <div class="col03 first"></div> <!-- halvbredde kolonne --> <div class="col03 last"></div> <!-- fullbredde kolonne --> <div class="col06 first last"></div> </div> </div>
Koden over gir meg denne layouten:
Outline, bakgrunnsfarge og høyde er lagt til for visuell effekt.
Alle kolonneklassene har 10px margin på høyre og venstre side. For å putte nye kolonner inn i eksisterende kolonner, trenger jeg å nullstille marginen til første og siste kolonne. Det sørger klassene .first og .last for. I tillegg til klassene som utgjør CSS-rammeverket, er det viktig at jeg legger til semantiske (meningsbærende) klasser som jeg kan skrive min egen CSS til.
Når bruker jeg CSS-rammeverk?
Denne bloggen bruker ikke noe CSS-rammeverk. Layouten er for enkel, så gevinsten blir minimal. Uansett hvilke prosjekter jeg jobber med, er det en vurderingssak om CSS-rammeverk egner seg eller ikke.
Det finnes en mengde artikler om positive og negative sider ved CSS-rammeverk, men jeg er mer interessert i å høre hva dere mener om tema?
Litt...
mia
31 July, 2009 – 13:27Jeg tester faktisk ut 960 i disse dager i html/css. Tidligere har jeg kun brukt rammeverket i Photoshop.
Forhåpentligvis vil det effektivisere meg, men det er som du sier, det kommer an på hvor stor og komplisert layouten er
Martin Berglund
31 July, 2009 – 17:36Det høres bra ut. Du får nok mest ut av 960 i layouter der strukturen legger opp til mange og varierende spaltebredder. Jeg har ofte startet med 960 (light) og fjernet CSS-rammeverket når jeg oppdager at layouten ikke tjener noe på å bruke det.
mia
1 August, 2009 – 13:28Ja det gjorde jeg og
Haarball
3 December, 2009 – 03:21Jeg bruker ofte 960.gs som utgangspunkt, men kun bakgrunnsbildene (12_col.png/16_col.png), enten i Photoshop som et layer eller som bakgrunnsbilde på f.eks. body. Det er ikke alltid 960 er riktig bredde, noe det kan være mange forskjellige grunner til, og da er det ikke verre enn å lage sitt eget.
Her om dagen lagde jeg et med 15 kolonner à 70 pixler, med 10 px mellomrom. Grunnen til at jeg ville ha så mange er fordi layouten består av 3 kolonner hvor den midterste er flytende, og har en min-width (ca. 1000px) og max-width (1210px). Så layouten passer til griden både hvis du har 1024px-oppløsning og en som er større enn max-width. Hvor gøy er ikke det a?
Ser sjelden noen grunn til ikke å bruke grids (rent visuelt, ikke nødvendigvis CSS-rammeverket). Selv om fordelene kanskje ikke alltid er åpenbare skaper de en begrensning som inviterer til kreativitet, og gir en følelse av at layouten alltid er ryddig or organisert. Frigjørende.
Martin Berglund
5 December, 2009 – 15:41Jeg har prøvd meg på noe liknende den min-width/max-width løsningen du har laget. Med noen linjer jQuery, sjekker jeg nettleservinduets bredde og bytter mellom to utgaver ettersom hva bredden er.
Demo kommer snart