Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Better looking README in Markdown syntax #1

Merged
merged 1 commit into from

2 participants

@gioele

Hi, I changed the README to Markdown so that it will be rendered nicely on the GitHub pages. If you pull this change, remember to rename README to README.md or README.markdown so that GitHub will know which engine it should use to render it.

@robertpiira robertpiira merged commit 831a563 into robertpiira:master
@robertpiira
Owner
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 16, 2012
  1. @gioele
This page is out of date. Refresh to see the latest.
Showing with 53 additions and 57 deletions.
  1. +53 −57 README
View
110 README
@@ -1,130 +1,126 @@
Hello, I'm Ingrid!
+==================
Ingrid is a fluid CSS layout system, who's main goal is to reduce the use of classes on individual units.
Ingrid is a bit less obtrusive and bit more fun to reflow for responsive layouts.
-Ingrid is heavily inspired by oocss grids (oocss.org).
+Ingrid is heavily inspired by oocss grids <http://oocss.org>.
Ingrid is also meant to be an extendable system, easy to customize to your own needs.
Ingrid loves cats :o)
-Check out a quick and dirty demo-page at http://piira.se/projects/ingrid
-
-___________________________________________
+Check out a quick and dirty demo-page at <http://piira.se/projects/ingrid>.
+Introduction
+------------
So, The basic idea…
-+-------------------[c]-------------------+
-¦ +-------+ +-------+ +-------+ +-------+ ¦
-¦ | | | | | | | | ¦
-¦ | [u] | | [u] | | [u] | | [u] | ¦
-¦ | | | | | | | | ¦
-¦ +-------+ +-------+ +-------+ +-------+ ¦
-+-----------------------------------------+
+ +-------------------[c]-------------------+
+ ¦ +-------+ +-------+ +-------+ +-------+ ¦
+ ¦ | | | | | | | | ¦
+ ¦ | [u] | | [u] | | [u] | | [u] | ¦
+ ¦ | | | | | | | | ¦
+ ¦ +-------+ +-------+ +-------+ +-------+ ¦
+ +-----------------------------------------+
The container [c] needs two class-names:
- 1) .ingrid
- 2) .in-fourths (or .in-thirds if there are 3 units).
+ 1. `.ingrid`;
+ 2. `.in-fourths` (or `.in-thirds` if there are 3 units).
Each unit [u] within the container [c] needs the class-name:
- 1) .unit
+ 1. `.unit`
___________________________________________
To tweak the layout we can combine units like this.
-+-------------------[c]-------------------+
-¦ +-------+ +-------+ +-----------------+ ¦
-¦ | | | | | | ¦
-¦ | [u] | | [u] | | [u] | ¦
-¦ | | | | | | ¦
-¦ +-------+ +-------+ +-----------------+ ¦
-+-----------------------------------------+
+ +-------------------[c]-------------------+
+ ¦ +-------+ +-------+ +-----------------+ ¦
+ ¦ | | | | | | ¦
+ ¦ | [u] | | [u] | | [u] | ¦
+ ¦ | | | | | | ¦
+ ¦ +-------+ +-------+ +-----------------+ ¦
+ +-----------------------------------------+
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`, `.in-thirds`, `.in-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]-------------------+
-¦ +-------------------------------------+ ¦
-¦ | [f] | ¦
-¦ +-------------------------------------+ ¦
-¦ +-------+ +-------+ +-------+ +-------+ ¦
-¦ | | | | | | | | ¦
-¦ | [u] | | [u] | | [u] | | [u] | ¦
-¦ | | | | | | | | ¦
-¦ +-------+ +-------+ +-------+ +-------+ ¦
-+-----------------------------------------+
-
-___________________________________________
+ +-------------------[c]-------------------+
+ ¦ +-------------------------------------+ ¦
+ ¦ | [f] | ¦
+ ¦ +-------------------------------------+ ¦
+ ¦ +-------+ +-------+ +-------+ +-------+ ¦
+ ¦ | | | | | | | | ¦
+ ¦ | [u] | | [u] | | [u] | | [u] | ¦
+ ¦ | | | | | | | | ¦
+ ¦ +-------+ +-------+ +-------+ +-------+ ¦
+ +-----------------------------------------+
Gutters
+-------
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.
-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).
-___________________________________________
Mental model
+------------
With Ingrid we are thinking in form of units as blocks of content/modules that can be stacked horizontally or vertically.
-A container with the class of .in-fifths would contain five units. There is really nothing that says how these units should be aligned or what widths they should have.
+A container with the class of `.in-fifths` would contain five units. There is really nothing that says how these units should be aligned or what widths they should have.
I believe this model works pretty neatly for reflowing content in a responsive layout.
-___________________________________________
-
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.
-- More on border-box http://paulirish.com/2012/box-sizing-border-box-ftw/
+Border-box makes it easy to set borders and padding (for gutters) directly on units. (More on border-box <http://paulirish.com/2012/box-sizing-border-box-ftw/>.)
-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.
-- More on inline-block http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
+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. (More on `display: inline-block` at <http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/>.)
-Some nicer details with Ingrid is that we don't need to repeat class-names like .first / .last / grid-6 / size1of5 etc. on each unit.
+Some nicer details with Ingrid is that we don't need to repeat 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 have to be called ".ingrid", change all these class-names to anything semantic or unsemantic you like!
+The container doesn't have to be called `.ingrid`, change all these class-names to anything semantic or unsemantic you like!
-___________________________________________
Responsive?
+-----------
Well, Ingrid is fluid, but there are no built in media query breakpoints. The Ingrid demo-page has a couple of breakpoints just do demonstrate how this could be done.
-It's up to you to see what breakpoints make sense in your project and the way you want to structure your css / markup. Whether you work with desktop down or mobile first approach, Ingrid should work for both or a mix of these alternatives.
-
-___________________________________________
+It's up to you to see what breakpoints make sense in your project and the way you want to structure your CSS / markup. Whether you work with desktop down or mobile first approach, Ingrid should work for both or a mix of these alternatives.
-Compability
+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.
Something went wrong with that request. Please try again.