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

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

2. Johan Ronsse

10. Meester van het CSS-
universum worden

11. 20 minuten

12. Layout

13. CSS = hulpmiddel

14. HTML + CSS

15. 1
Simple column system

17. <div class=quot;colsquot;>
<p>tekst</p>
</div>

18. <div class=quot;colsquot;>
<div class=quot;colquot;>
<p>tekst</p>
</div>
</div>

19. <div class=quot;colsquot;>
<div class=quot;colquot;>
<p>tekst</p>
</div>
<div class=quot;colquot;>
<p>tekst</p>
</div>
</div>

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

22. Uitbreiden

23. Meerdere breedtes

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

25. Marges

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

27. <div>-soup

28. <div class=quot;colsquot;>
<div class=quot;col col-2quot;>
<div class=quot;spacing-right-halfquot;>
<p>tekst</p>
</div>
</div>
<div class=quot;col-2quot;>
<div class=quot;spacing-left-halfquot;>
<p>tekst</p>
</div>
</div>
</div>

29. Gebruik: overal

30. 2
Grid column system

31. Begint bij ontwerp

34. Breedte kolom: 138px

36. Tussen kolommen: 12px

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

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

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

41. Opvolging
“Craftsmansship”

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

43. Better.

44. Dankjewel!

45. Vragen?