Introduction of Crispy GridCSS as it is meant to be used        Christian Peters        github.com/ChristianPeters        ...
Crispy Grid // CSS as it is meant to be used   2   29.10.2011       Basic Principles of Software       Development
Crispy Grid // CSS as it is meant to be used   2                  29.10.2011       Basic Principles of Software       Deve...
Crispy Grid // CSS as it is meant to be used   2                     29.10.2011       Basic Principles of Software       D...
Crispy Grid // CSS as it is meant to be used   2                     29.10.2011       Basic Principles of Software       D...
Crispy Grid // CSS as it is meant to be used   2                      29.10.2011       Basic Principles of Software       ...
Crispy Grid // CSS as it is meant to be used      3             29.10.2011       Basic Principles of Sofware Development  ...
Crispy Grid // CSS as it is meant to be used      3             29.10.2011       Basic Principles of Sofware Development  ...
Crispy Grid // CSS as it is meant to be used      3                  29.10.2011       Basic Principles of Sofware Developm...
Crispy Grid // CSS as it is meant to be used   4               29.10.2011       Basic Principles of Sofware Development   ...
Crispy Grid // CSS as it is meant to be used   4                  29.10.2011       Basic Principles of Sofware Development...
Crispy Grid // CSS as it is meant to be used   5                   29.10.2011       Basic Principles of Sofware Developmen...
Crispy Grid // CSS as it is meant to be used   5                            29.10.2011       Basic Principles of Sofware D...
Crispy Grid // CSS as it is meant to be used   5                            29.10.2011       Basic Principles of Sofware D...
Crispy Grid // CSS as it is meant to be used          6                        29.10.2011       Basic Principles of Sofwar...
Crispy Grid // CSS as it is meant to be used          6                                 29.10.2011       Basic Principles ...
Crispy Grid // CSS as it is meant to be used   7   29.10.2011       Grid Frameworks
Crispy Grid // CSS as it is meant to be used   8   29.10.2011       What Is Wrong with Current       Approaches?
Crispy Grid // CSS as it is meant to be used   8                                 29.10.2011       What Is Wrong with Curre...
Crispy Grid // CSS as it is meant to be used   8                                 29.10.2011       What Is Wrong with Curre...
Crispy Grid // CSS as it is meant to be used                            9                                                 ...
Crispy Grid // CSS as it is meant to be used                            9                                                 ...
Crispy Grid // CSS as it is meant to be used                            9                                                 ...
Crispy Grid // CSS as it is meant to be used                           10                                                 ...
Crispy Grid // CSS as it is meant to be used                           10                                                 ...
Crispy Grid // CSS as it is meant to be used                           10                                                 ...
Crispy Grid // CSS as it is meant to be used                           10                                                 ...
Crispy Grid // CSS as it is meant to be used                           10                                                 ...
Crispy Grid // CSS as it is meant to be used                           11                                                 ...
Crispy Grid // CSS as it is meant to be used                           11                                                 ...
Crispy Grid // CSS as it is meant to be used                           11                                                 ...
Crispy Grid // CSS as it is meant to be used                           12                                                 ...
Crispy Grid // CSS as it is meant to be used                           12                                                 ...
Crispy Grid // CSS as it is meant to be used                           12                                                 ...
Crispy Grid // CSS as it is meant to be used                           13                                                 ...
Crispy Grid // CSS as it is meant to be used                           13                                                 ...
Crispy Grid // CSS as it is meant to be used                           13                                                 ...
Crispy Grid // CSS as it is meant to be used                           14                                                 ...
Crispy Grid // CSS as it is meant to be used                           14                                                 ...
Crispy Grid // CSS as it is meant to be used                           14                                                 ...
Crispy Grid // CSS as it is meant to be used                           15                                                 ...
Crispy Grid // CSS as it is meant to be used                           15                                                 ...
Crispy Grid // CSS as it is meant to be used                           16                                                 ...
Crispy Grid // CSS as it is meant to be used                           16                                                 ...
Crispy Grid // CSS as it is meant to be used                           17                                                 ...
Crispy Grid // CSS as it is meant to be used                          17                                                  ...
Crispy Grid // CSS as it is meant to be used   18   29.10.2011       Crispy Grid       Usage Overview        Mixins       ...
Crispy Grid // CSS as it is meant to be used               18              29.10.2011       Crispy Grid       Usage Overvi...
Crispy Grid // CSS as it is meant to be used               18                             29.10.2011       Crispy Grid    ...
Crispy Grid // CSS as it is meant to be used   19   29.10.2011 Feedback?
Crispy Grid // CSS as it is meant to be used   20             29.10.2011       „Your mixins do not feel right. Any       a...
Crispy Grid // CSS as it is meant to be used                     20                       29.10.2011       „Your mixins do...
Crispy Grid // CSS as it is meant to be used   21   29.10.2011
Crispy Grid // CSS as it is meant to be used   21   29.10.2011
Crispy Grid // CSS as it is meant to be used   22   29.10.2011 Watch it! Try it! Fork it!
Upcoming SlideShare
Loading in...5
×

Crispy Grid - CSS as it is meant to be used

584

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
584
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Crispy Grid - CSS as it is meant to be used

    1. 1. Introduction of Crispy GridCSS as it is meant to be used Christian Peters github.com/ChristianPeters @duddledan
    2. 2. Crispy Grid // CSS as it is meant to be used 2 29.10.2011 Basic Principles of Software Development
    3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Crispy Grid // CSS as it is meant to be used 7 29.10.2011 Grid Frameworks
    18. 18. Crispy Grid // CSS as it is meant to be used 8 29.10.2011 What Is Wrong with Current Approaches?
    19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. Crispy Grid // CSS as it is meant to be used 19 29.10.2011 Feedback?
    51. 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. 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. 53. Crispy Grid // CSS as it is meant to be used 21 29.10.2011
    54. 54. Crispy Grid // CSS as it is meant to be used 21 29.10.2011
    55. 55. Crispy Grid // CSS as it is meant to be used 22 29.10.2011 Watch it! Try it! Fork it!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×