Permalink
Browse files

Initial commit

initial commit
  • Loading branch information...
0 parents commit 401ba453aa74704c1d7bb67328b14f7cb1aa7c32 @jeromecoupe committed Mar 28, 2012
Showing with 1,330 additions and 0 deletions.
  1. +502 −0 css/normalize.css
  2. +141 −0 css/screen.css
  3. BIN img/placeholder_16-9.png
  4. +113 −0 index.html
  5. +4 −0 js/domassistant.min.js
  6. +4 −0 js/modernizr.min.js
  7. +6 −0 js/respond.min.js
  8. +560 −0 js/selectivizr.min.js

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,141 @@
+/*
+
+Mobile First item grid using display:inline-block; for items
+
+- Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)
+- Prevent the whitespace bug between items
+- Tested in all modern browsers and in IE >= 7
+- Uses selectivizr and respond to get support for CSS3 selectors and screen-size based media-queries
+- Demo available at: http://www.g-rom.be/reflowing_item_grid/ (or .zip attached)
+
+*/
+
+body
+{
+ font:normal 14px/1.5 Helvetica, Arial, sans-serif;
+ background:#fcf9f5;
+ color:#000;
+ margin:2em;
+}
+
+#pagewrapper
+{
+ margin:0 auto;
+ padding:0 4.3478261%;
+}
+
+/* =Grids
+reflowing grids of items
+###########################################*/
+.grid
+{
+ width:100%;
+ background:green;
+ list-style:none;
+ margin:0;
+ padding:0;
+ font-family: "Courier New", monospace; /*switch to monospace for the whitespace hack to work consistently*/
+ letter-spacing: -0.55em; /* webkit: collapse whitespace between units */
+ word-spacing: -0.1em; /* IE < 8 && gecko: collapse whitespace between units */
+}
+
+.lt-ie8 .grid
+{
+ letter-spacing: normal; /* reset IE < 8 */
+}
+
+.gridunit
+{
+ display:inline-block;
+ vertical-align:top;
+ width:47.826087%; /*440/920*/
+ margin:0 4.3478261% 3em 0; /*40/920*/
+ font-family: "open-sans", Helvetica, sans-serif; /*restore non-monospace font in grid units*/
+ letter-spacing: normal;
+ word-spacing: normal;
+ background:yellow;
+}
+
+.gridunit:nth-child(2n)
+{
+ background:red;
+ margin-right:0;
+}
+
+.lt-ie8 .gridunit
+{
+ min-height:1px; /*triggers haslayout for ie < 8*/
+ display:inline; /*faking inline-block behavious for IE < 8*/
+}
+
+@media screen and (min-width:760px) {
+
+ /*bumping down the font size*/
+ body
+ {
+ font-size:80%;
+ }
+
+ /*Grid of items: 3 units per row*/
+ .gridunit, .gridunit:nth-child(2n)
+ {
+ width:30.4347826%; /*280/920*/
+ margin-right:4.3478261%; /*40/920*/
+ background:yellow;
+ }
+
+ .gridunit:nth-child(3n)
+ {
+ background:red;
+ margin-right:0;
+ }
+
+}
+
+@media screen and (min-width:1000px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape){
+
+ #pagewrapper
+ {
+ max-width:1000px;
+ }
+
+ /*Grid of items: 4 units per row*/
+ .gridunit, .gridunit:nth-child(2n), .gridunit:nth-child(3n)
+ {
+ width:21.7391304%; /*200/920*/
+ margin-right:4.3478261%; /*40/920*/
+ background:yellow;
+ }
+
+ .gridunit:nth-child(4n)
+ {
+ background:red;
+ margin-right:0;
+ }
+
+}
+
+/* =Fluid Images
+The bicubic interpolation for IE is dealt with in normalize.css
+###########################################*/
+.imgholder img
+{
+ max-width:100%;
+}
+
+/* =Clearing Floats
+<http://oncemade.com/renaming-and-extending-easy-clearing-aka-clearfix/>
+###########################################*/
+.group:after
+{
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+}
+
+.lt-ie8 .group
+{
+ min-height: 1px;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width">
+
+ <title>Reflowing Inline-block Grid</title>
+
+ <!-- CSS -->
+ <link rel="stylesheet" media="screen" href="css/normalize.css" />
+ <link rel="stylesheet" media="screen" href="css/screen.css" />
+
+ <!-- JS (modernizr only in the head, rest of script at the bottom) -->
+ <script src="js/modernizr.min.js"></script>
+
+</head>
+<body>
+ <div id="pagewrapper" class="group">
+ <hgroup>
+ <h1>Test for reflowing grids using inline-block</h1>
+ <h2>AKA we will be so happy when <a href="http://dev.w3.org/csswg/css3-flexbox/">flexbox</a> is supported accross the board</h2>
+ <hgroup>
+ <p>The aim of this test is to have a grid of items using media queries to change the number of items displayed per row depending on the available screen space. Using floats was not an option, since we have to support items of various lengths.</p>
+ <ul>
+ <li>Uses display:inline-block; and media queries</li>
+ <li>Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)</li>
+ <li>Plays nice with items of various lengths</li>
+ <li>Prevent the <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/">whitespace bug between items</a></li>
+ <li>Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize but I can live with that)</li>
+ <li>Uses <a href="https://github.com/keithclark/selectivizr">selectivizr</a> and <a href="https://github.com/scottjehl/Respond">respond</a> to get support for CSS3 selectors and screen-size based media-queries in IE</li>
+ </ul>
+
+ <ul class="module grid row3">
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 1</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 2</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 3</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 4</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 5</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 6</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 7</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 8</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 9</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 10</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis. Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 11</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ <li class="gridunit">
+ <p class="imgholder"><img src="img/placeholder_16-9.png" /></p>
+ <h3>Block 12</h3>
+ <p>Curabitur mollis nisl id augue placerat vestibulum. Ut varius erat ac enim iaculis convallis. Donec metus eros, malesuada eget tristique eget, pellentesque a dui. Quisque a metus sit amet erat bibendum sagittis</p>
+ </li>
+ </ul>
+
+ </div>
+
+ <!--[if lte IE 9]>
+ <script src="js/domassistant.min.js"></script>
+ <script src="js/selectivizr.min.js"></script>
+ <script src="js/respond.min.js"></script>
+ <![endif]-->
+
+</body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 401ba45

Please sign in to comment.