Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

description

My slides from my presentation at Barcamp Ghent #2 (30 nov 08)

Transcript of Meester van het CSS universum worden + Opvolging “Craftsmanship”

Page 1: Meester van het CSS universum worden + Opvolging “Craftsmanship”

BARCAMP GENT 28 november 2008

Meester van het CSS-universum worden /

Opvolging “Craftsmanship”

Page 2: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Johan Ronsse

Page 3: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 4: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 5: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 6: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 7: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 8: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 9: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 10: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Meester van het CSS-universum worden

Page 11: Meester van het CSS universum worden + Opvolging “Craftsmanship”

20 minuten

Page 12: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Layout

Page 13: Meester van het CSS universum worden + Opvolging “Craftsmanship”

CSS = hulpmiddel

Page 14: Meester van het CSS universum worden + Opvolging “Craftsmanship”

HTML + CSS

Page 15: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Simple column system

1

Page 16: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 17: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

Page 18: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

Page 19: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

Page 20: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

Page 21: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 22: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Uitbreiden

Page 23: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Meerdere breedtes

Page 24: Meester van het CSS universum worden + Opvolging “Craftsmanship”

/* 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; }

Page 25: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Marges

Page 26: Meester van het CSS universum worden + Opvolging “Craftsmanship”

/* 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; }

Page 27: Meester van het CSS universum worden + Opvolging “Craftsmanship”

<div>-soup

Page 28: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

Page 29: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Gebruik: overal

Page 30: Meester van het CSS universum worden + Opvolging “Craftsmanship”

2

Grid column system

Page 31: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Begint bij ontwerp

Page 32: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 33: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 34: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Breedte kolom: 138px

Page 35: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 36: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Tussen kolommen: 12px

Page 37: Meester van het CSS universum worden + Opvolging “Craftsmanship”
Page 38: Meester van het CSS universum worden + Opvolging “Craftsmanship”

.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 */

Page 39: Meester van het CSS universum worden + Opvolging “Craftsmanship”

.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 */

Page 40: Meester van het CSS universum worden + Opvolging “Craftsmanship”

.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 */

Page 41: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Opvolging “Craftsmansship”

Page 42: Meester van het CSS universum worden + Opvolging “Craftsmanship”

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

IRA GLASS

Page 43: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Better.

Page 44: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Dankjewel!

Page 45: Meester van het CSS universum worden + Opvolging “Craftsmanship”

Vragen?