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

Simple column system

1

<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?