1. Introduction of Crispy Grid
CSS as it is meant to be used
Christian Peters
github.com/ChristianPeters
@duddledan

2. Crispy Grid // CSS as it is meant to be used 2 29.10.2011
Basic Principles of Software
Development

3. Crispy Grid // CSS as it is meant to be used 2 29.10.2011
Basic Principles of Software
Development
DRY - Don‘t Repeat Yourself
*
No information should be mapped into code twice
*

4. Crispy Grid // CSS as it is meant to be used 2 29.10.2011
Basic Principles of Software
Development
DRY - Don‘t Repeat Yourself
*
No information should be mapped into code twice
*
Separation of Concerns
*
Layers like markup and styling should be separated
*

5. Crispy Grid // CSS as it is meant to be used 2 29.10.2011
Basic Principles of Software
Development
DRY - Don‘t Repeat Yourself
*
No information should be mapped into code twice
*
Separation of Concerns
*
Layers like markup and styling should be separated
*
Principle of Least Astonishmeant
*
Avoid surprises, use meaningful names
*

6. Crispy Grid // CSS as it is meant to be used 2 29.10.2011
Basic Principles of Software
Development
DRY - Don‘t Repeat Yourself
*
No information should be mapped into code twice
*
Separation of Concerns
*
Layers like markup and styling should be separated
*
Principle of Least Astonishmeant
*
Avoid surprises, use meaningful names
*
Convention over Configuration
*
Establish sensible defaults that can be overridden
*

7. Crispy Grid // CSS as it is meant to be used 3 29.10.2011
Basic Principles of Sofware Development
Don‘t Repeat Yourself - Example
#add-to-cart
color: #c81e61
input[type=submit].sign-up
color: #c81e61

8. Crispy Grid // CSS as it is meant to be used 3 29.10.2011
Basic Principles of Sofware Development
Don‘t Repeat Yourself - Example
#add-to-cart
color: #c81e61
input[type=submit].sign-up
color: #c81e61
$magenta: #c81e61
#add-to-cart
color: $magenta
input[type=submit].sign-up
color: $magenta

9. Crispy Grid // CSS as it is meant to be used 3 29.10.2011
Basic Principles of Sofware Development
Don‘t Repeat Yourself - Example
#add-to-cart
color: #c81e61
input[type=submit].sign-up
color: #c81e61
$magenta: #c81e61
#add-to-cart
color: $magenta
input[type=submit].sign-up
color: $magenta
$magenta: #c81e61
$call-to-action-color: $magenta
#add-to-cart
color: $call-to-action-color
input[type=submit].sign-up
color: $call-to-action-color

10. Crispy Grid // CSS as it is meant to be used 4 29.10.2011
Basic Principles of Sofware Development
Separation of Concerns - Example
.formfield.label.grid_4.alpha
= f.label(:lastname, t("cart.address.lastname")+'*')
.formfield.grid_12.omega
= f.text_field :lastname, :class => 'len-medium', :id =>
'checkout-input-a-nachname', :required => true

11. Crispy Grid // CSS as it is meant to be used 4 29.10.2011
Basic Principles of Sofware Development
Separation of Concerns - Example
.formfield.label.grid_4.alpha
= f.label(:lastname, t("cart.address.lastname")+'*')
.formfield.grid_12.omega
= f.text_field :lastname, :class => 'len-medium', :id =>
'checkout-input-a-nachname', :required => true
= f.label :lastname, t('cart.address.lastname')+'*'
= f.text_field :lastname, required: true
#customer-information
label
+grid(4)
+alpha
text_field
+grid(12)
+omega

12. Crispy Grid // CSS as it is meant to be used 5 29.10.2011
Basic Principles of Sofware Development
Principle of Least Astonishmeant -
Examples
Common syntax for identifiers
*
Use dashes as word separators (#activity-stream)
*

13. Crispy Grid // CSS as it is meant to be used 5 29.10.2011
Basic Principles of Sofware Development
Principle of Least Astonishmeant -
Examples
Common syntax for identifiers
*
Use dashes as word separators (#activity-stream)
*
Use semantic identifier names
*
Focus on content instead of appearance (#activity-stream)
*
Do not use „immutable classes“ (.red, .last, .paragraph)
*

14. Crispy Grid // CSS as it is meant to be used 5 29.10.2011
Basic Principles of Sofware Development
Principle of Least Astonishmeant -
Examples
Common syntax for identifiers
*
Use dashes as word separators (#activity-stream)
*
Use semantic identifier names
*
Focus on content instead of appearance (#activity-stream)
*
Do not use „immutable classes“ (.red, .last, .paragraph)
*
Conventions for IDs
*
e.g. use IDs for elements that are unique to the whole
* application (the user profile (#profile), the login form
(form#login))

15. Crispy Grid // CSS as it is meant to be used 6 29.10.2011
Basic Principles of Sofware Development
Convention over Configuration -
Example
Use cascading em
color: $accent-color
font-weight: bold
em.special-offer
color: $special-offer-color
#terms-and-conditions em
font-style: italic

16. Crispy Grid // CSS as it is meant to be used 6 29.10.2011
Basic Principles of Sofware Development
Convention over Configuration -
Example
Use cascading em
color: $accent-color
font-weight: bold
em.special-offer
color: $special-offer-color
#terms-and-conditions em
font-style: italic
Defaults for mixins
@mixin light-shadow($direction: 'right', $blur-distance: 3px)
@if $direction == 'left'
+single-box-shadow($light-grey, -1px, 1px, $blur-distance)
@else if $direction == 'bottom'
+single-box-shadow($light-grey, 0, 1px, $blur-distance)
@else
+single-box-shadow($light-grey, 1px, 1px, $blur-distance)
.light-shadow
+light-shadow

17. Crispy Grid // CSS as it is meant to be used 7 29.10.2011
Grid Frameworks

18. Crispy Grid // CSS as it is meant to be used 8 29.10.2011
What Is Wrong with Current
Approaches?

19. Crispy Grid // CSS as it is meant to be used 8 29.10.2011
What Is Wrong with Current
Approaches? id
uc
ept for L
exc
Claim:
Present grid systems lead to cluttered markup
... even when using the Sass versions

20. Crispy Grid // CSS as it is meant to be used 8 29.10.2011
What Is Wrong with Current
Approaches? id
uc
ept for L
exc
Claim:
Present grid systems lead to cluttered markup
... even when using the Sass versions
Why?
They do not leverage the CSS box model

21. Crispy Grid // CSS as it is meant to be used 9 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

22. Crispy Grid // CSS as it is meant to be used 9 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

23. Crispy Grid // CSS as it is meant to be used 9 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
blueprint
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

24. Crispy Grid // CSS as it is meant to be used 10 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

25. Crispy Grid // CSS as it is meant to be used 10 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

26. Crispy Grid // CSS as it is meant to be used 10 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
#container
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam +grid-container
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
#container
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est margin-left: auto
Lorem ipsum dolor sit amet.
margin-right: auto
width: 960px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

27. Crispy Grid // CSS as it is meant to be used 10 29.10.2011
Grid Framework Example
#inner-container
+grid($ninesixty-columns - 2 * 1)
+alpha
Lorem ipsum dolor sit amet, consetetur
diam+omega
This isinvidunt sedlabore nonumy eirmod
a
sadipscing elitr,
tempor ut +grid-prefix(1)
et dolore magna
aliquyam erat, sed diam voluptua. At vero
+grid-suffix(1)
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
#inner-container
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
display: inline
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
float: left
voluptua. At vero eos et accusam et justo
margin-left: 5px
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
margin-right: 5px
Lorem ipsum dolor sit amet.
width: 870px
margin-left: 0
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
margin-right: 0
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
padding-left: 40px
padding-right: 40px
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

28. Crispy Grid // CSS as it is meant to be used 10 29.10.2011
Grid Framework Example
#inner-container
Lorem ipsum dolor sit amet, consetetur
+grid($ninesixty-columns - 2 * 1, $gutter-width: 0)
This isinvidunt sedlabore nonumy eirmod
a
sadipscing elitr, diam
tempor+grid-prefix(1)
ut et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et+grid-suffix(1) ea
accusam et justo duo dolores et
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
#inner-container
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
display: inline
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
float: left
voluptua. At vero eos et accusam et justo
margin-left: 0
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
margin-right: 0
Lorem ipsum dolor sit amet.
width: 880px
padding-left: 40px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor 40px consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
padding-right: sit amet,
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

29. Crispy Grid // CSS as it is meant to be used 11 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

30. Crispy Grid // CSS as it is meant to be used 11 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
#container
consetetur sadipscing elitr, sed diam +container
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
#container
gubergren, no sea takimata sanctus est margin: 0 auto
Lorem ipsum dolor sit amet.
width: 950px
+clearfix
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
blueprint
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

31. Crispy Grid // CSS as it is meant to be used 11 29.10.2011
Grid Framework Example
#inner-container
+column($blueprint-grid-columns - 2 * 1, $last: true)
Lorem ipsum dolor sit amet, consetetur
+append(1) et dolore magna
This isinvidunt sedlabore nonumy eirmod
a
sadipscing elitr,
tempor ut
diam
+prepend(1)
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
#inner-container
amet. Lorem ipsum dolor sit amet,
display: inline
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
float: left
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
margin-right: 0
duo dolores et ea rebum. Stet clita kasd
width: 870px
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
padding-left: 40px
padding-right: hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
Duis autem vel eum iriure dolor in 40px
* html facilisi. et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenitnibh euismoddolore te
#inner-containerconsectetuer adipiscing elit, sed diam nonummy augue duis tincidunt
facilisis at vero eros
feugait nulla Lorem ipsum dolor sit amet,
overflow-x: hidden
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
blueprint
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

32. Crispy Grid // CSS as it is meant to be used 12 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

33. Crispy Grid // CSS as it is meant to be used 12 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Crispy Grid
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

34. Crispy Grid // CSS as it is meant to be used 12 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a #container
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
+grid-container($padding: 1)
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
#container
amet. Lorem ipsum dolor sit amet,
margin-left: auto
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
margin-right: auto
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
padding-left: 40px
duo dolores et ea rebum. Stet clita kasd
padding-right: 40px
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
width: 870px
overflow: hidden
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Crispy Grid
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

35. Crispy Grid // CSS as it is meant to be used 13 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

36. Crispy Grid // CSS as it is meant to be used 13 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a header
sadipscing elitr, sed diam nonumy eirmod
+grid(22, $gutter-width: 0)
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
margin-bottom: 30px
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
header
consetetur sadipscing elitr, sed diam
display: inline
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
float: left
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
margin-left: 0
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
margin-right: 0
width: 880px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
margin-bottom: 30px
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

37. Crispy Grid // CSS as it is meant to be used 13 29.10.2011
Grid Framework Example
#inner-header
Lorem ipsum dolor sit amet, consetetur
padding: 15px 20px
This is a elitr, sed diam nonumy eirmod
sadipscing
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

38. Crispy Grid // CSS as it is meant to be used 14 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

39. Crispy Grid // CSS as it is meant to be used 14 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a header
sadipscing elitr, sed diam nonumy eirmod
+column(22, $last: true)
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
margin-bottom: 30px
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
header
consetetur sadipscing elitr, sed diam
display: inline
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
float: left
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus estmargin-right: 0
Lorem ipsum dolor sit amet.
width: 870px
* html header
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
overflow-x: hidden
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
blueprint
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

40. Crispy Grid // CSS as it is meant to be used 14 29.10.2011
Grid Framework Example
#inner-header
Lorem ipsum dolor sit amet, consetetur
padding: 15px 20px
This is a elitr, sed diam nonumy eirmod
sadipscing
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
blueprint
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

41. Crispy Grid // CSS as it is meant to be used 15 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

42. Crispy Grid // CSS as it is meant to be used 15 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a header
sadipscing elitr, sed diam nonumy eirmod
+row(22, $padding: 20px)
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
padding-top: 15px
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
padding-bottom: 15px
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
margin-bottom: 30px
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
header
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
float: left
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
width: 830px
padding-left: 20px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
padding-right: 20px
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
padding-top: 15px
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
padding-bottom: 15px
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
margin-bottom: 30px
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Crispy Grid
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

43. Crispy Grid // CSS as it is meant to be used 16 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

44. Crispy Grid // CSS as it is meant to be used 16 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
960.gs
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

45. Crispy Grid // CSS as it is meant to be used 17 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

46. Crispy Grid // CSS as it is meant to be used 17 29.10.2011
Grid Framework Example
Lorem ipsum dolor sit amet, consetetur #info-box
This is a
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
border: 10px solid $light-green
aliquyam erat, sed diam voluptua. At vero +column(9, $padding: 15px,
eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea
$border-width: 10px, $gutter: 1)
takimata sanctus est Lorem ipsum dolor sit padding-top: 10px
amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
padding-bottom: 10px
nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo
#info-box
duo dolores et ea rebum. Stet clita kasd border: 10px solid $light-green
gubergren, no sea takimata sanctus est float: left
Lorem ipsum dolor sit amet.
width: 290px
border-left-width: 10px
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
border-right-width: 10px
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 15px nibh euismod tincidunt
padding-left: nonummy
ut laoreet dolore magna aliquam erat volutpat.
padding-right: 15px
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis10pxaliquip ex ea commodo
padding-top: nisl ut
padding-bottom: 10px
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.
Crispy Grid
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna.

47. Crispy Grid // CSS as it is meant to be used 18 29.10.2011
Crispy Grid
Usage Overview
Mixins
+grid-
container
+column
+last
+last-column
+row

48. Crispy Grid // CSS as it is meant to be used 18 29.10.2011
Crispy Grid
Usage Overview
Mixins Options
+grid- $colspan
container
$padding
+column
$differing-right-padding
+last
$border-width
+last-column
$differing-right-border-
+row width
$gutter
$subtract-border-from

49. Crispy Grid // CSS as it is meant to be used 18 29.10.2011
Crispy Grid
Usage Overview
Mixins Options Units
+grid- $colspan Columns (no unit)
container
$padding Number (px, em, pt)
+column
$differing-right-padding Percent (%)
+last
$border-width
+last-column
$differing-right-border-
+row width
$gutter
$subtract-border-from

50. Crispy Grid // CSS as it is meant to be used 19 29.10.2011
Feedback?

51. Crispy Grid // CSS as it is meant to be used 20 29.10.2011
„Your mixins do not feel right. Any
alternative?“
Why current approaches do not work well:
The outer width of a box matters.

52. Crispy Grid // CSS as it is meant to be used 20 29.10.2011
„Your mixins do not feel right. Any
alternative?“
Why current approaches do not work well:
The outer width of a box matters.
CSS, I want to set the outer width!
box-sizing: content-box
http://www.w3.org/TR/css3-ui/#box-sizing

53. Crispy Grid // CSS as it is meant to be used 21 29.10.2011

54. Crispy Grid // CSS as it is meant to be used 21 29.10.2011

55. Crispy Grid // CSS as it is meant to be used 22 29.10.2011
Watch it! Try it! Fork it!