Permalink
Browse files

Reaaadmeeee

  • Loading branch information...
robertpiira committed Feb 15, 2012
1 parent 250f79b commit 74fba49177b6c5db88baa89a86895cf89330c705
Showing with 18 additions and 41 deletions.
  1. +18 −41 README
View
59 README
@@ -10,6 +10,8 @@ Ingrid is also meant to be an extendable system, easy to customize to your own n
Ingrid loves cats :o)
+Check out a quick and dirty demo-page at http://piira.se/projects/ingrid
+
___________________________________________
@@ -45,21 +47,16 @@ To tweak the layout we can combine units
¦ +-------+ +-------+ +-----------------+ ¦
+-----------------------------------------+
-In this case the container [c] and units [u] have
-the same class-names as in the first example.
+In this case the container [c] and units [u] have the same class-names as in the first example.
-The difference is that we add the class-name .span-2
-on the last unit (making it span the width of
-two units).
+The difference is that we add the class-name .span-2 on the last unit (making it span the width of two units).
-The span-x class-name can be used to combine units
-in any context (in-twos / thirds / fourths etc).
+The span-x class-name can be used to combine units in any context (in-twos / thirds / fourths etc).
___________________________________________
-Units [f] that need to span the whole width of the
-container use the class .field-unit.
+Units [f] that need to span the whole width of the container use the class .field-unit.
+-------------------[c]-------------------+
¦ +-------------------------------------+ ¦
@@ -77,58 +74,38 @@ ___________________________________________
Gutters
-The gutters are made by first giving the container [c]
-negative left and right margins.
+The gutters are made by first giving the container [c] negative left and right margins.
-Each unit [u] has a padding on each side that is equal to
-the containers [c] negative margins.
+Each unit [u] has a padding on each side that is equal to the containers [c] negative margins.
-The gutters are set to a certain width in ingrid.css.
-But these measures can easily be overridden/tweaked to your
-own preference via your own classes that extend the container
-or directly in the ingrid css-file.
+The gutters are set to a certain width in ingrid.css. But these measures can easily be overridden/tweaked to your own preference via your own classes that extend the container or directly in the ingrid css-file.
-The padding for the gutters work with em, % or pixel units
-(thanks to the CSS border-box box model).
+The padding for the gutters work with em, % or pixel units (thanks to the CSS border-box box model).
___________________________________________
Details
-Ingrid uses display: inline-block and border-box box model
-for laying out the individual units.
+Ingrid uses display: inline-block and border-box box model for laying out the individual units.
-Border-box makes it easy to set borders and padding (for gutters)
-directly on units.
+Border-box makes it easy to set borders and padding (for gutters) directly on units.
-Inline-block is just nice to work with and easy to reflow
-for different layouts.
+Inline-block is just nice to work with and easy to reflow for different layouts.
-The one negative with inline-bock is the additional white-space
-that gets added between units. To remove the white-space evenly
-across different browsers can seem bit hacky. So Ingrid tries her
-best to get rid of the white-space. But the results are not
-cross-browser pixel-perfect. But really… Ingrid just doesn't care
-about pixel-perfection in that sense anymore.
+The one negative with inline-bock is the additional white-space that gets added between units. To remove the white-space evenly across different browsers can seem bit hacky. So Ingrid tries her best to get rid of the white-space. But the results are not cross-browser pixel-perfect. But really… Ingrid just doesn't care about pixel-perfection in that sense anymore.
-Some nicer details with Ingrid is that we don't need to add
-class-names like .first / .last / grid-6 / size1of5 etc.
-on each unit.
+Some nicer details with Ingrid is that we don't need to add class-names like .first / .last / grid-6 / size1of5 etc. on each unit.
-You could also skip the whole in-fourths / in-fifths class-names
-that Ingrid provides and make your own semantic class names
-for width hooks instead.
+You could also skip the whole in-fourths / in-fifths class-names that Ingrid provides and make your own semantic class names for width hooks instead.
-The container doesn't neither have to be called ".in-grid", change
-all these class-names to anything semantic or unsemantic you like!
+The container doesn't neither have to be called ".in-grid", change all these class-names to anything semantic or unsemantic you like!
___________________________________________
Compability
-Ingrid works just fine with IE8 + and all modern browsers.
-IE6-7 might need some extra help for not supporting border-box model.
+Ingrid works just fine with IE8 + and all modern browsers. IE6-7 might need some extra help for not supporting border-box model.

0 comments on commit 74fba49

Please sign in to comment.