Submit Search
Upload
Meester van het CSS universum worden + Opvolging “Craftsmanship”
•
2 likes
•
1,107 views
Johan Ronsse
Follow
My slides from my presentation at Barcamp Ghent #2 (30 nov 08)
Read less
Read more
Design
Technology
News & Politics
Report
Share
Report
Share
1 of 45
Download now
Download to read offline
Recommended
Web Services
Web Services
mikata
Microformats - 2008
Microformats - 2008
Andrei Gheorghe
Barcamp Gent 2: rsnapshot
Barcamp Gent 2: rsnapshot
Peter Dedecker
Craftmanship
Craftmanship
wonko
jQuery for designers
jQuery for designers
Johan Ronsse
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
Johan Ronsse
Better CSS with Compass/Sass
Better CSS with Compass/Sass
Johan Ronsse
I Am A Switcher
I Am A Switcher
Inferis
Recommended
Web Services
Web Services
mikata
Microformats - 2008
Microformats - 2008
Andrei Gheorghe
Barcamp Gent 2: rsnapshot
Barcamp Gent 2: rsnapshot
Peter Dedecker
Craftmanship
Craftmanship
wonko
jQuery for designers
jQuery for designers
Johan Ronsse
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
Johan Ronsse
Better CSS with Compass/Sass
Better CSS with Compass/Sass
Johan Ronsse
I Am A Switcher
I Am A Switcher
Inferis
What is Bedrock?
What is Bedrock?
Johan Ronsse
iOS design: a case study
iOS design: a case study
Johan Ronsse
Designing better user interfaces
Designing better user interfaces
Johan Ronsse
Design for developers
Design for developers
Johan Ronsse
The jump to freelance
The jump to freelance
Johan Ronsse
Wolf fronteers 2010
Wolf fronteers 2010
Johan Ronsse
CSS3 now
CSS3 now
Johan Ronsse
Workflow
Workflow
Johan Ronsse
More Related Content
More from Johan Ronsse
What is Bedrock?
What is Bedrock?
Johan Ronsse
iOS design: a case study
iOS design: a case study
Johan Ronsse
Designing better user interfaces
Designing better user interfaces
Johan Ronsse
Design for developers
Design for developers
Johan Ronsse
The jump to freelance
The jump to freelance
Johan Ronsse
Wolf fronteers 2010
Wolf fronteers 2010
Johan Ronsse
CSS3 now
CSS3 now
Johan Ronsse
Workflow
Workflow
Johan Ronsse
More from Johan Ronsse
(8)
What is Bedrock?
What is Bedrock?
iOS design: a case study
iOS design: a case study
Designing better user interfaces
Designing better user interfaces
Design for developers
Design for developers
The jump to freelance
The jump to freelance
Wolf fronteers 2010
Wolf fronteers 2010
CSS3 now
CSS3 now
Workflow
Workflow
Meester van het CSS universum worden + Opvolging “Craftsmanship”
1.
BARCAMP GENT 28
november 2008 Meester van het CSS- universum worden / Opvolging “Craftsmanship”
2.
Johan Ronsse
3.
4.
5.
6.
7.
8.
9.
10.
Meester van het
CSS- universum worden
11.
20 minuten
12.
Layout
13.
CSS = hulpmiddel
14.
HTML + CSS
15.
1
Simple column system
16.
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%; }
21.
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
32.
33.
34.
Breedte kolom: 138px
35.
36.
Tussen kolommen: 12px
37.
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?
Download now