• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Crispy Grid - CSS as it is meant to be used
 

Crispy Grid - CSS as it is meant to be used

on

  • 584 views

 

Statistics

Views

Total Views
584
Views on SlideShare
488
Embed Views
96

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 96

http://lanyrd.com 96

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Crispy Grid - CSS as it is meant to be used Presentation Transcript

  • Introduction of Crispy GridCSS as it is meant to be used Christian Peters github.com/ChristianPeters @duddledan
  • 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 Development DRY - Don‘t Repeat Yourself * No information should be mapped into code twice *
  • 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 *
  • 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 *
  • 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 *
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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) *
  • 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) *
  • 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))
  • 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
  • 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
  • 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 Current Approaches? id uc ept for L exc Claim: Present grid systems lead to cluttered markup ... even when using the Sass versions
  • 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
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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
  • 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
  • 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
  • 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 alternative?“ Why current approaches do not work well: The outer width of a box matters.
  • 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
  • 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!