Permalink
Browse files

Mobile First

  • Loading branch information...
1 parent a88ebd2 commit 54696dab9e9f1f9cd0fde27ed2bdda54a073ce80 @davatron5000 committed Sep 4, 2012
Showing with 210 additions and 288 deletions.
  1. +11 −7 README.md
  2. +73 −87 index.html
  3. +126 −194 style.css
View
@@ -9,16 +9,20 @@ Foldy960 isn't aiming to be Yet-Another-CSS-Framework and we hesitate to use the
* 990px total width.
## Features
-* Simplified 6 Column Responding Grid
- * `< 480px`: One column fluid.
- * `< 640px`: One column fluid.
- * `> 640px`: Fluid 3 column 960 grid. (default)
-* `.grid_right` for proper content collapsing
+* Simplified Mobile First 6 Column Responding Grid
+ * `0 - 480px`: One column fluid.
+ * `480 - 640px`: One column fluid with a little subgridding.
+ * `640px+`: Fluid 6 column "960" grid.
+* `.grid-right` for proper content collapsing
* `.content-pad-right` & `.content-pad-left` for extra padding if you needed. Obviously, not the most desired semantics, but absolutely bulletproof when you're padding content.
-* `.foldy-gallery` - a class for handling image galleries. Goes from tri-grid to bi-grid.
-* Foldy defaults to `max-width: 990px;` but change that to whatever you friggin' want.
+* `.gallery` - a class for handling image galleries. Goes from bi-grid to tri-grid.
+* Foldy defaults to `max-width: 1280px;` but change that to whatever you friggin' want.
## Changelog
+* 09/04/2011
+ * Mobile First
+ * Changed to hyphenation instead of underline.
+ * Changed `.foldy-gallery` to just `.gallery` with subclass `.grid-unit`
* 09/07/2011
* Switched to 6 column grid.
* Added `.foldy-gallery` class.
View
@@ -13,104 +13,90 @@
</head>
<body>
- <header id="header">
- <div class="container">
- <div class="grid_full">
- <h1>Foldy960</h1>
- </div>
- </div>
- </header>
-
<section id="content">
<div class="container">
-
- <section class="cf">
- <div class="grid_2 grid_right">
- <img src="http://placekitten.com/600/400" alt="kittens brought to you by kittens" />
- </div>
-
- <div class="grid_4">
- <div class="content-pad-right">
- <h2>A simplified and responsive 960&nbsp;grid.</h2>
- <p>We've used <a href="http://960.gs">960.gs</a> at <a href="http://paravelinc.com">Paravel</a> for so long, it made sense to modify what we knew as we made the transition over to Responsive Web Design. </p>
- <p>Foldy is not Yet-Another-Boilerplate. It a little kit built for those headed down a responsive route and have experience with the 960 grid. It's built to be modified.</p>
+ <section id="introp" class="cf">
+ <div class="grid-full">
+ <h1 class="heading">Foldy</h1>
</div>
- </div>
- </section>
-
- <section class="cf">
- <div class="grid_2" style="clear:left">
- <h3>6 is the magic number!</h3>
- <p>Foldy is a simplified 6 column grid based in spirit on the 960 grid. We also keep this as simple as possible, stripping out any prefix/suffix stuff.</p>
+ <div class="grid-2 grid-flow-opposite">
+ <figure>
+ <img src="http://placekitten.com/600/400" alt="kittens brought to you by kittens" />
+ <figcaption>Use <code>.grid-flow-opposite</code> for <a href="">Content Choreography</a>.</figcaption>
+ </figure>
</div>
- <div class="grid_2">
- <h3>Pad your content</h3>
- <p><code>.content-pad-left</code> &amp; <code>.content-pad-right</code> exist so you can add more padding to a block of content if needed.</p>
- </div>
- <div class="grid_2">
- <h3>.grid_right</h3>
- <p>Floating content right instead of left is helpful if you want that content to display first in the collapsed view. We have a class for that. <em>See cat above.</em></p>
+
+ <div class="grid-4">
+ <div class="content-pad-right">
+ <p>Foldy is a simplified mobile first responsive grid. It's based on the <a href="http://960.gs">960 Grid</a>, and is designed for people (like us at <a href="http://paravelinc.com">Paravel</a>) who are transitioning into Responsive Web Design.</p>
+ <p> It's ugly on purpose. It's not a framework or a drop-in solution, it's a starting point. It's a <del>learning tool</del> <ins>launch pad</ins> that is made to be customzied.</p>
+ </div>
</div>
</section>
-
- <section class="demos cf">
- <div class="row cf">
- <div class="grid_1">.grid_1</div>
- <div class="grid_1">.grid_1</div>
- <div class="grid_1">.grid_1</div>
- <div class="grid_1">.grid_1</div>
- <div class="grid_1">.grid_1</div>
- <div class="grid_1">.grid_1</div>
- </div>
- <div class="row cf">
- <div class="grid_2">.grid_2</div>
- <div class="grid_2">.grid_2</div>
- <div class="grid_2">.grid_2</div>
- </div>
- <div class="row cf">
- <div class="grid_3">.grid_3</div>
- <div class="grid_3">.grid_3</div>
- </div>
- <div class="row cf">
- <div class="grid_half">.grid_half</div>
- <div class="grid_half">.grid_half</div>
- </div>
- <div class="row cf">
- <div class="grid_4">.grid_4</div>
- <div class="grid_2">.grid_2</div>
- </div>
- <div class="row cf">
- <div class="grid_1">.grid_1</div>
- <div class="grid_4">.grid_4</div>
- <div class="grid_1">.grid_1</div>
- </div>
- <div class="row cf">
- <div class="grid_5">.grid_5</div>
- <div class="grid_1">.grid_1</div>
- </div>
- <div class="row cf">
- <div class="grid_6">.grid_6 or .grid_full</div>
- </div>
+
+ <section id="grid" class="clearfix">
+ <div class="grid-full">
+ <h2 class="sub-heading">Grid</h2>
+ </div>
+ <div class="cf show-grid">
+ <div class="row">
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-1">.grid-1</div>
+ </div>
+ <div class="row">
+ <div class="grid-2">.grid-2</div>
+ <div class="grid-2">.grid-2</div>
+ <div class="grid-2">.grid-2</div>
+ </div>
+ <div class="row">
+ <div class="grid-3">.grid-3</div>
+ <div class="grid-3">.grid-3</div>
+ </div>
+ <div class="row">
+ <div class="grid-half">.grid-half</div>
+ <div class="grid-half">.grid-half</div>
+ </div>
+ <div class="row">
+ <div class="grid-4">.grid-4</div>
+ <div class="grid-2">.grid-2</div>
+ </div>
+ <div class="row">
+ <div class="grid-1">.grid-1</div>
+ <div class="grid-4">.grid-4</div>
+ <div class="grid-1">.grid-1</div>
+ </div>
+ <div class="row">
+ <div class="grid-5">.grid-5</div>
+ <div class="grid-1">.grid-1</div>
+ </div>
+ <div class="row">
+ <div class="grid-6">.grid-6 or .grid-full</div>
+ </div>
+ </div>
</section>
-
- <section class="cf">
- <div class="grid_full">
- <h3>.foldy-gallery</h3>
+
+ <section id="gallery" class="cf">
+ <div class="grid-full">
+ <h2 class="sub-heading">Gallery</h2>
<p>One common task in responsive web design is making a grid of thumbs collapse into a 2-column grid. Foldy makes this easy. 6 is the magic number. And it should be easy enough to understand how the simplified grid works that you could modify it yourself.</p>
</div>
- <div class="foldy-gallery row cf">
- <img src="http://placekitten.com/400/300" class="grid_2">
- <img src="http://placekitten.com/400/300" class="grid_2">
- <img src="http://placekitten.com/400/300" class="grid_2">
- <img src="http://placekitten.com/400/300" class="grid_2">
- <img src="http://placekitten.com/400/300" class="grid_2">
- <img src="http://placekitten.com/400/300" class="grid_2">
+ <div class="gallery cf">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
+ <img src="http://placekitten.com/400/300" class="grid-unit">
</div>
-
+
</section>
-
- <footer class="grid_full">
- <p>&hearts; 2011 <a href="http://paravelinc.com">Paravel, inc</a> &mdash; Have fun tell us about the awesome stuff you use it on.</p>
+
+ <footer class="grid-full">
+ <p>&hearts; 20X6 <a href="http://paravelinc.com">Paravel, inc</a> &mdash; Have fun tell us about the awesome stuff you use it on.</p>
</footer>
</div>
</section>
Oops, something went wrong.

0 comments on commit 54696da

Please sign in to comment.