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=quot;colsquot;>
	 <p>tekst</p>
</div>
<div class=quot;colsquot;>
	 <div class=quot;colquot;>
	 	 <p>tekst</p>
	 </div>
</div>
<div class=quot;colsquot;>
	 <div class=quot;colquot;>
	 	 <p>tekst</p>
	 </div>
	 <div class=quot;colquot;>
	 	 <p>tekst<...
.col {
	 float: left;
	 width: 50%;
}
Uitbreiden
Meerdere breedtes
/* Default simple column system */
.columns .column { float: left; }

/* Two columns */
.columns .column-12,
.columns .col...
Marges
/* Default simple column system */
.columns .column { float: left; }

/* Two columns */
.columns .column-12,
.columns .col...
<div>-soup
<div class=quot;colsquot;>
	 <div class=quot;col col-2quot;>
	 	 <div class=quot;spacing-right-halfquot;>
	 	 	 <p>tekst</...
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-ri...
.cols { padding-left: 68px; float: left; }
.col { width: 138px; padding-right: 12px; float: left; }

.col-15 { width: 207p...
.cols { padding-left: 68px; float: left; }
.col { width: 138px; padding-right: 12px; float: left; }

.col-15 { width: 207p...
Opvolging
“Craftsmansship”
“You don’t want to be
making mediocre stuff.”

                 IRA GLASS
Better.
Dankjewel!
Vragen?
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Upcoming SlideShare
Loading in …5
×

Meester van het CSS universum worden + Opvolging “Craftsmanship”

2,127 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,127
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Meester van het CSS universum worden + Opvolging “Craftsmanship”

  1. 1. BARCAMP GENT 28 november 2008 Meester van het CSS- universum worden / Opvolging “Craftsmanship”
  2. 2. Johan Ronsse
  3. 3. Meester van het CSS- universum worden
  4. 4. 20 minuten
  5. 5. Layout
  6. 6. CSS = hulpmiddel
  7. 7. HTML + CSS
  8. 8. 1 Simple column system
  9. 9. <div class=quot;colsquot;> <p>tekst</p> </div>
  10. 10. <div class=quot;colsquot;> <div class=quot;colquot;> <p>tekst</p> </div> </div>
  11. 11. <div class=quot;colsquot;> <div class=quot;colquot;> <p>tekst</p> </div> <div class=quot;colquot;> <p>tekst</p> </div> </div>
  12. 12. .col { float: left; width: 50%; }
  13. 13. Uitbreiden
  14. 14. Meerdere breedtes
  15. 15. /* 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; }
  16. 16. Marges
  17. 17. /* 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; }
  18. 18. <div>-soup
  19. 19. <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>
  20. 20. Gebruik: overal
  21. 21. 2 Grid column system
  22. 22. Begint bij ontwerp
  23. 23. Breedte kolom: 138px
  24. 24. Tussen kolommen: 12px
  25. 25. .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 */
  26. 26. .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 */
  27. 27. .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 */
  28. 28. Opvolging “Craftsmansship”
  29. 29. “You don’t want to be making mediocre stuff.” IRA GLASS
  30. 30. Better.
  31. 31. Dankjewel!
  32. 32. Vragen?

×