diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/README.markdown b/README.markdown index ecbb55a..da7cca9 100644 --- a/README.markdown +++ b/README.markdown @@ -17,16 +17,16 @@ Introduction So, The basic idea… +-------------------[c]-------------------+ - ¦ +-------+ +-------+ +-------+ +-------+ ¦ - ¦ | | | | | | | | ¦ - ¦ | [u] | | [u] | | [u] | | [u] | ¦ - ¦ | | | | | | | | ¦ - ¦ +-------+ +-------+ +-------+ +-------+ ¦ + | +-------+ +-------+ +-------+ +-------+ | + | | | | | | | | | | + | | [u] | | [u] | | [u] | | [u] | | + | | | | | | | | | | + | +-------+ +-------+ +-------+ +-------+ | +-----------------------------------------+ The container [c] needs two class-names: - 1. `.ingrid`; + 1. `.ingrid` 2. `.in-fourths` (or `.in-thirds` if there are 3 units). Each unit [u] within the container [c] needs the class-name: @@ -39,18 +39,18 @@ ___________________________________________ To tweak the layout we can combine units like this. +-------------------[c]-------------------+ - ¦ +-------+ +-------+ +-----------------+ ¦ - ¦ | | | | | | ¦ - ¦ | [u] | | [u] | | [u] | ¦ - ¦ | | | | | | ¦ - ¦ +-------+ +-------+ +-----------------+ ¦ + | +-------+ +-------+ +-----------------+ | + | | | | | | | | + | | [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-two` 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`, `.in-thirds`, `.in-fourths`, etc.). +The `.span-x` class-name can be used to combine units in any context (`.in-halves`, `.in-thirds`, `.in-fourths`, etc.). ___________________________________________ @@ -58,14 +58,14 @@ ___________________________________________ Units [f] that need to span the whole width of the container use the class _.field-unit_. +-------------------[c]-------------------+ - ¦ +-------------------------------------+ ¦ - ¦ | [f] | ¦ - ¦ +-------------------------------------+ ¦ - ¦ +-------+ +-------+ +-------+ +-------+ ¦ - ¦ | | | | | | | | ¦ - ¦ | [u] | | [u] | | [u] | | [u] | ¦ - ¦ | | | | | | | | ¦ - ¦ +-------+ +-------+ +-------+ +-------+ ¦ + | +-------------------------------------+ | + | | [f] | | + | +-------------------------------------+ | + | +-------+ +-------+ +-------+ +-------+ | + | | | | | | | | | | + | | [u] | | [u] | | [u] | | [u] | | + | | | | | | | | | | + | +-------+ +-------+ +-------+ +-------+ | +-----------------------------------------+ @@ -120,7 +120,7 @@ It's up to you to see what breakpoints make sense in your project and the way yo Compability ----------- -Ingrid works just fine with IE8 + and all modern browsers. IE6-7 might need some extra help on your part for not supporting `border-box` model. +Ingrid works just fine with IE8 + and all modern browsers. IE7 might need some extra help on your part for not supporting `border-box` model… IE6 is not supported at all. Todo @@ -128,6 +128,7 @@ Todo * Create a proper demo-page * Work on the grid nomenclature +* Proper browser testing License diff --git a/css/demo-styles.css b/css/demo-styles.css index 9d165ae..0c04ebc 100644 --- a/css/demo-styles.css +++ b/css/demo-styles.css @@ -1,192 +1,289 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ -/* These are some messy DEMO styles. no need to poke around here all that much :-) */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} -/* Page */ -nav ul { - padding: 0 0 .8em; - margin-bottom: 1.8em; - list-style: none; - font-size: 14px; - text-align: right; - border-bottom: 1px dashed rgba(0,0,0,.2); -} -nav ul li { - margin-left: .8em; - display: inline; -} -figure { - display: block; -} +/* These are some messy DEMO styles. no need to poke around here all that much */ + + +/* Base +------------------------------------------*/ + html { - -webkit-font-smoothing: antialiased; + -webkit-font-smoothing: antialiased; } + body { - margin: 62px 0; - background:#FFF url(../img/white_texture.png); - color:#444; - font:normal normal 400 100%/1.5em georgia, verdana, sans-serif; + margin: 62px 0; + background: #FFF url(../img/white_texture.png); + color: #444; + font: normal normal 400 100%/1.5em georgia, verdana, sans-serif; } + a { - background-color:transparent; - font-size:100%; - margin:0; - padding:0; - vertical-align:baseline + font-size: 100%; + margin: 0; + padding: 0; + vertical-align: baseline } + a:link, a:visited, a:hover, a:focus, a:active { - text-decoration: none; - color: rgb(250, 36, 0); + text-decoration: none; + color: rgb(250, 36, 0); } + a:hover, a:focus { - text-decoration: underline; + text-decoration: underline; } + img { max-width: 100%; - height: auto !important; } -ul { - padding: 0; - list-style-position: inside; + +figure { + margin: 1em 0; } -.article-img { - margin: 1em 1em 1em 10px; - float: left; + +figure img { + display: block; } -figure { - margin: 1em 0; padding: 0; + +/* Typography +------------------------------------------*/ + +h1, h2, h3, h4, h5, h6, dl, ol, ul, p, blockquote, pre { + margin-bottom: 1em; + margin-top: 1em; } -figcaption { - font-size: 12px; + +ol ol, +ol ul, +ul ol, +ul ul { + margin-left: 1.5em; } -aside ul { - font-size: 12px; - line-height: 2.1em; + +li { + display: list-item; + list-style-position: inside; } -#page { - margin: 0 auto; - padding: 1px 0; - width: 90%; - max-width: 1000px; + +h1 { + font-size: 1.5em; } -#footer { - clear: both; + +h2 { + font-size: 1.3125em; } -/* Type */ -h1,h2,h3,h4 { - color: #111; - font-weight: normal; +h3 { + font-size: 1.125em; } -.intro hgroup h1 { - font-size: 24px; + +h4 { + font-size: 1em; } -.intro h2 { - font-size: 16px; - margin: 0; + +h5 { + font-size: 1em; } -.intro hgroup { - margin-bottom: 1.5em; + +h6 { + font-size: 1em; } + +/* Typographic elements */ + .section-title { - margin-top: 1.5em; - padding: .4em 0 .55em; - border-top: 1px solid rgba(0,0,0,.2); - border-bottom: 1px dashed rgba(0,0,0,.2); + margin-top: 1.5em; + padding: .4em 0 .55em; + border-top: 1px solid rgba(0,0,0,.2); + border-bottom: 1px dashed rgba(0,0,0,.2); +} + + +/* Page +------------------------------------------*/ + +#page { + margin: 0 auto; + width: 93%; + max-width: 1000px; +} + +#footer { + margin-top: 2.2em; + border-top: 1px dashed rgba(0,0,0,.2); + clear: both; +} + +#masthead h1 { + margin: .1em 0; +} + +#masthead h2 { + font-size: 90%; +} + +.github { + margin-bottom: 2em; + padding-bottom: 1em; + border-bottom: 1px dashed rgba(0,0,0,.2); + text-align: center; +} + +@media only screen and (min-width: 768px) { + + .demo-introduction { + padding-left: 26%; + } + + .demo-introduction .ingrid { + margin: 0 -1.5%; + } + } -/* Gallery example */ + +/* Gallery example +------------------------------------------*/ + .gallery a { - display: block; - margin-top: 10px; - margin-bottom: 10px; + display: block; + margin-top: 10px; + margin-bottom: 10px; } + .gallery img { - display: block; - box-shadow: 0 0 0 4px rgba(0,0,0,0); - -webkit-transition: box-shadow .5s; + display: block; + box-shadow: 0 0 0 4px rgba(0,0,0,0); + -webkit-transition: box-shadow .5s; } + .gallery a:hover img, .gallery a:focus img { - box-shadow: 0 0 0 4px rgba(0,0,0,1); + box-shadow: 0 0 0 4px rgba(0,0,0,1); } -/* Components */ -.component { - border-bottom: 2px solid rgba(0,0,0,.2); -} -/* Footer */ -#footer { - margin-top: 2.2em; - border-top: 1px dashed rgba(0,0,0,.2); -} +/* Components +------------------------------------------*/ -/* Boxes */ .box { - margin-top: 10px; - margin-bottom: 10px; - padding: 1px 12px; - background: #fff; - overflow: hidden; - zoom: 1; - font-size: 14px; + margin-top: 1em; + margin-bottom: 1em; + padding: 1px 1em; + background: #fff; + *zoom: 1; +} + +figure + .box { + margin-top: -1em; } -/* Play content */ -.news-articles { +/* Article layout +------------------------------------------*/ + +.news-articles .unit { margin-top: 1em; + margin-bottom: 1em; } + .news-articles .unit { - border-left: 1px solid rgba(0,0,0,.2); + border-left: 1px solid rgba(0,0,0,.2); } + .news-articles .unit:first-child { - border-left: none; + border-left: none; } + .news-articles figure { margin-top: 0; } -/* Media queries */ +/* Breakpoint examples +------------------------------------------*/ + @media only screen and (max-width:768px) { - - .gallery .unit { - width: 25%; - } - .in-fourths .unit { - width: 50%; - } - .intro .unit { - width: 33.33333%; - } - .intro .unit { - width: auto; - } + + .gallery .unit { + width: 25%; + } + + .in-fourths .unit { + width: 50%; + } + + .intro .unit { + width: auto; + } + } + @media only screen and (max-width: 480px) { - /* Test of reflowing some layout for smaller screens */ - - .news-articles .unit:nth-child(3) { - border-left: none; - } - .ingrid .unit { - width: auto; - display: block; - } - .gallery .unit { - width: 33.33333%; - display: inline-block; - } - - .in-thirds .unit { width: 50%; display: inline-block; } - .in-thirds .unit:nth-child(3) { - display: block; - width: auto; - } + + /* Test of reflowing some layout for smaller screens */ + + .news-articles .unit:nth-child(3) { + border-left: none; + } + + .ingrid .unit { + width: auto; + display: block; + } + + .gallery .unit { + width: 33.33333%; + display: inline-block; + } + } \ No newline at end of file diff --git a/css/ingrid.css b/css/ingrid.css index 7fbbc18..4213f4e 100644 --- a/css/ingrid.css +++ b/css/ingrid.css @@ -17,10 +17,10 @@ Updated: 2012/2/16 --------------------------------------------------------*/ .ingrid { - margin: 0 -13px; + margin: 0 -1em; /* Can be set in em, % or px */ padding: 0; clear: both; - list-style: none; + list-style: none; /* Works with ul & ol */ letter-spacing: -0.31em; word-spacing: -0.43em; } @@ -29,7 +29,7 @@ Updated: 2012/2/16 .field-unit { margin: 0; display: inline-block; - position: relative; + position: relative; /* For left or right offsets */ letter-spacing: normal; word-spacing: normal; vertical-align: top; @@ -48,7 +48,7 @@ Updated: 2012/2/16 .unit, .field-unit { - padding: 0 13px; + padding: 0 1em; /* Can be set in em, % or px (must match .ingrid negative margins) */ -moz-box-sizing: border-box; box-sizing: border-box; } @@ -57,7 +57,7 @@ Updated: 2012/2/16 /* oldIE - Some IE7 help + Some IE7 help (a starter-kit for oldIE support) --------------------------------------------------------*/ .ingrid { @@ -83,12 +83,12 @@ Updated: 2012/2/16 These divider classes are set on .ingrid container --------------------------------------------------------*/ -.in-twos .unit { width: 50%; } -.in-thirds .unit { width: 33.33333%; } -.in-fourths .unit { width: 25%; } -.in-fifths .unit { width: 20%; } -.in-sixths .unit { width: 16.6666666%; } -.in-sevenths .unit { width: 14.2857143%; } +.in-halves > .unit { width: 50%; } +.in-thirds > .unit { width: 33.33333%; } +.in-fourths > .unit { width: 25%; } +.in-fifths > .unit { width: 20%; } +.in-sixths > .unit { width: 16.6666666%; } +.in-sevenths > .unit { width: 14.2857143%; } @@ -98,27 +98,27 @@ Updated: 2012/2/16 --------------------------------------------------------*/ /* Spatial units in thirds */ -.in-thirds .span-2 { width: 66.66666%; } +.in-thirds > .span-two { width: 66.66666%; } /* Spatial units in fourths */ -.in-fourths .span-2 { width: 50%; } -.in-fourths .span-3 { width: 75%; } +.in-fourths > .span-two { width: 50%; } +.in-fourths > .span-three { width: 75%; } /* Spatial units in fifths */ -.in-fifths .span-2 { width: 40%; } -.in-fifths .span-3 { width: 60%; } -.in-fifths .span-4 { width: 80%; } +.in-fifths > .span-two { width: 40%; } +.in-fifths > .span-three { width: 60%; } +.in-fifths > .span-four { width: 80%; } /* Spatial units in sixths */ -.in-sixths .span-2 { width: 33.33333%; } -.in-sixths .span-3 { width: 50%; } -.in-sixths .span-4 { width: 66.66666%; } -.in-sixths .span-5 { width: 83.3333333%; } +.in-sixths > .span-two { width: 33.33333%; } +.in-sixths > .span-three { width: 50%; } +.in-sixths > .span-four { width: 66.66666%; } +.in-sixths > .span-five { width: 83.3333333%; } /* Spatial units in sevenths */ -.in-sevenths .span-2 { width: 28.5714286%; } -.in-sevenths .span-3 { width: 42.8571429%; } -.in-sevenths .span-4 { width: 57.1428572%; } -.in-sevenths .span-5 { width: 71.4285715%; } -.in-sevenths .span-6 { width: 85.7142858%; } +.in-sevenths > .span-two { width: 28.5714286%; } +.in-sevenths > .span-three { width: 42.8571429%; } +.in-sevenths > .span-four { width: 57.1428572%; } +.in-sevenths > .span-five { width: 71.4285715%; } +.in-sevenths > .span-six { width: 85.7142858%; } diff --git a/index.html b/index.html index dbf3725..2824de1 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,9 @@
- +
+

See project on Github

+
@@ -37,23 +36,13 @@

Ingrid

A fluid CSS layout system.

-
+
Ingrid
-
- -
+
+

Hello, my name is Ingrid

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. @@ -63,6 +52,16 @@

Hello, my name is Ingrid

Ingrid is also meant to be an extendable system, easy to customize to your own needs.

+

Some examples

@@ -94,19 +93,19 @@

unit four

-
+
-

unit one

a kitten
+

unit one

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

-

unit two

a kitten
+

unit two

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

@@ -114,33 +113,33 @@

unit two

-
+

Nesting grids and units

-
-
+
+

unit one

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

@@ -150,10 +149,17 @@

unit two

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

-
-
+
+
+

field-unit one

+

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

+
+

field-unit one

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.

+
+
+

field-unit one

A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording.