BARCAMP GENT 28 november 2008
Meester van het CSS-
universum worden /
Opvolging “Craftsmanship”

Johan Ronsse

Meester van het CSS-
universum worden

20 minuten

Layout

CSS = hulpmiddel

HTML + CSS

1
Simple column system

<div class=\"cols\">
<p>tekst</p>
</div>

<div class=\"cols\">
<div class=\"col\">
<p>tekst</p>
</div>
</div>

<div class=\"cols\">
<div class=\"col\">
<p>tekst</p>
</div>
<div class=\"col\">
<p>tekst</p>
</div>
</div>

.col {
float: left;
width: 50%;
}

Uitbreiden

Meerdere breedtes

/* Default simple column system */
.columns .column { float: left; }
/* Two columns */
.columns .column-12,
.columns .column-24 { width: 49.9%; }
/* Three columns*/
.columns .column-23 { width: 66.5%; }
.columns .column-13 { width: 33.2%; }
/* Four columns */
.columns .column-14 { width: 24.9%; }
.columns .column-34 { width: 74.9%; }
/* Five columns */
.columns .column-15 { width: 19.9%; }
.columns .column-25 { width: 39.9%; }
.columns .column-35 { width: 59.9%; }
.columns .column-45 { width: 79.9%; }
/* Spacing divs to fit inside colunns: gutter width and 1/2 gutter width */
.columns .spacing-left { margin-left: 20px; }
.columns .spacing-left-half { margin-left: 10px; }
.columns .spacing-right { margin-right: 20px; }
.columns .spacing-right-half { margin-right: 10px; }
.columns .spacing-both-half { margin-right: 10px; margin-left: 10px; }

Marges

/* Default simple column system */
.columns .column { float: left; }
/* Two columns */
.columns .column-12,
.columns .column-24 { width: 49.9%; }
/* Three columns*/
.columns .column-23 { width: 66.5%; }
.columns .column-13 { width: 33.2%; }
/* Four columns */
.columns .column-14 { width: 24.9%; }
.columns .column-34 { width: 74.9%; }
/* Five columns */
.columns .column-15 { width: 19.9%; }
.columns .column-25 { width: 39.9%; }
.columns .column-35 { width: 59.9%; }
.columns .column-45 { width: 79.9%; }
/* Spacing divs to fit inside colunns: gutter width and 1/2 gutter width */
.columns .spacing-left { margin-left: 20px; }
.columns .spacing-left-half { margin-left: 10px; }
.columns .spacing-right { margin-right: 20px; }
.columns .spacing-right-half { margin-right: 10px; }
.columns .spacing-both-half { margin-right: 10px; margin-left: 10px; }

<div>-soup

<div class=\"cols\">
<div class=\"col col-2\">
<div class=\"spacing-right-half\">
<p>tekst</p>
</div>
</div>
<div class=\"col-2\">
<div class=\"spacing-left-half\">
<p>tekst</p>
</div>
</div>
</div>

Gebruik: overal

2
Grid column system

Begint bij ontwerp

Breedte kolom: 138px

Tussen kolommen: 12px

.cols { padding-left: 68px; float: left; }
.colshift { position: relative; bottom: 17px; }
.col { width: 138px; padding-right: 12px; float: left; }
.col-15 { width: 207px; } /* One and a half column */
.col-2 { width: 288px; } /* Double column */
.col-3 { width: 438px; } /* Triple column */
.col-4 { width: 588px; } /* Four columns */
.col-5 { width: 738px; } /* Five columns */
.col-6 { width: 888px; } /* Six columns */

.cols { padding-left: 68px; float: left; }
.col { width: 138px; padding-right: 12px; float: left; }
.col-15 { width: 207px; } /* One and a half column */
.col-2 { width: 288px; } /* Double column */
.col-3 { width: 438px; } /* Triple column */
.col-4 { width: 588px; } /* Four columns */
.col-5 { width: 738px; } /* Five columns */
.col-6 { width: 888px; } /* Six columns */

.cols { padding-left: 68px; float: left; }
.col { width: 138px; padding-right: 12px; float: left; }
.col-15 { width: 207px; } /* One and a half column */
.col-2 { width: 288px; } /* Double column */
.col-3 { width: 438px; } /* Triple column */
.col-4 { width: 588px; } /* Four columns */
.col-5 { width: 738px; } /* Five columns */
.col-6 { width: 888px; } /* Six columns */

Opvolging
“Craftsmansship”

“You don’t want to be
making mediocre stuff.”
IRA GLASS

Better.

Dankjewel!

Vragen?