Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Removed unneeded styles

Simplified & clearer markup (CSS / HTML)

Signed-off-by: Jérôme Coupé <jercoupe@gmail.com>
  • Loading branch information...
commit 0f33fe5dd9ffdcaf1e7c4dc131256f81a45d2e7a 1 parent 7139b41
@jeromecoupe authored
Showing with 20 additions and 37 deletions.
  1. +7 −24 css/screen.css
  2. +13 −13 index.html
View
31 css/screen.css
@@ -44,7 +44,7 @@ reflowing grids of items
letter-spacing: normal; /* reset IE < 8 */
}
-.gridunit
+.item
{
display:inline-block;
vertical-align:top;
@@ -56,13 +56,13 @@ reflowing grids of items
background:yellow;
}
-.gridunit:nth-child(2n)
+.item:nth-child(2n)
{
background:red;
margin-right:0;
}
-.lt-ie8 .gridunit
+.lt-ie8 .item
{
min-height:1px; /*triggers haslayout for ie < 8*/
display:inline; /*faking inline-block behaviour for IE < 8*/
@@ -77,14 +77,14 @@ reflowing grids of items
}
/*Grid of items: 3 units per row*/
- .gridunit, .gridunit:nth-child(2n)
+ .item, .item:nth-child(2n)
{
width:30.4347826%; /*280/920*/
margin-right:4.3478261%; /*40/920*/
background:yellow;
}
- .gridunit:nth-child(3n)
+ .item:nth-child(3n)
{
background:red;
margin-right:0;
@@ -100,14 +100,14 @@ reflowing grids of items
}
/*Grid of items: 4 units per row*/
- .gridunit, .gridunit:nth-child(2n), .gridunit:nth-child(3n)
+ .item, .item:nth-child(2n), .item:nth-child(3n)
{
width:21.7391304%; /*200/920*/
margin-right:4.3478261%; /*40/920*/
background:yellow;
}
- .gridunit:nth-child(4n)
+ .item:nth-child(4n)
{
background:red;
margin-right:0;
@@ -128,21 +128,4 @@ The bicubic interpolation for IE is dealt with in normalize.css
{
max-width:100%;
display:block;
-}
-
-/* =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;
}
View
26 index.html
@@ -36,63 +36,63 @@
<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">
+ <ul class="grid">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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">
+ <li class="item">
<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>
Please sign in to comment.
Something went wrong with that request. Please try again.