Meester van het CSS universum worden + Opvolging “Craftsmanship”
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Meester van het CSS universum worden + Opvolging “Craftsmanship”

  • 2,562 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,562
On Slideshare
2,562
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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