Meester van het CSS universum worden + Opvolging “Craftsmanship”
-
Upload
johan-ronsse -
Category
Design
-
view
103 -
download
0
description
Transcript of Meester van het CSS universum worden + Opvolging “Craftsmanship”
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?