Skip to content

Instantly share code, notes, and snippets.

@xeoncross

xeoncross/grid-ie.css

Created December 17, 2011 02:09
Show Gist options
  • Save xeoncross/1488882 to your computer and use it in GitHub Desktop.
Save xeoncross/1488882 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive 2, 3, & 4 column grid
Raw
grid-ie.css
/* IE 6/7/8 (1024px+) */
.superflous { display: block; }
.container { margin: 0 auto; width: 960px; }
.third, .twothirds, .forth, .half, .threeforths, .full { display: inline; float: left; margin: 0 0 0 24px; }
.first, .full { margin: 0;}
.forth { width: 222px; }
.third { width: 304px; }
.half { width: 468px; }
.twothirds { width: 632px; }
.threeforths{ width: 714px; }
.full { width: 960px; }
Raw
grid.css
.container { margin: 20px; clear: left; }
.superflous { display: none; }
/* iPhone landscape & large mobile devices (480px+) */
@media only screen and (min-width: 480px)
{
/*
.first, .full { clear: left; }
.forth { width: 46%; display: inline; float: left; margin: 2%; }
*/
}
/* Tablets/netbooks (768px+) */
@media only screen and (min-width: 700px)
{
.superflous { display: block; }
.container { margin: 0 auto; width: 720px; }
.third, .twothirds, .forth, .half, .threeforths, .full { display: inline; float: left; }
.container div + div { margin-left: 24px; }
.forth { width: 162px; }
.third { width: 224px; }
.half { width: 348px; }
.twothirds { width: 472px; }
.threeforths{ width: 534px; }
.full { width: 720px; }
}
/* Desktops (1024px+) */
@media only screen and (min-width: 1024px)
{
.container { width: 960px; }
.forth { width: 222px; }
.third { width: 304px; }
.half { width: 468px; }
.twothirds { width: 632px; }
.threeforths{ width: 714px; }
.full { width: 960px; }
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Tiny Responsive Grid System</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="grid.css" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="grid-ie.css"/>
<![endif]-->
<script src="http://localhost/lorem.js"></script>
<style>
/* Vertical Rhythm - Auto-ajusting Font/Line-Height Ratio */
body{font-size:100%;line-height:1.5em;font-family:Arial,sans-serif;}/*IE*/
html>body{font-size:1em}
p{margin:0 0 1.5em 0;padding:0}
h1,h2,h3,h4{color: #000; font-weight:normal;line-height:1.5em;}
h1{font-size:3em;}
h2{font-size:2em}
h3{font-size:1.5em;line-height:2em;}
h4{font-size:1em;font-weight:bold}
.third, .twothirds, .forth, .half, .threeforths, .full
{ margin-bottom: 1.5em; background: #eee; }
</style>
</head>
<body>
<div class="container">
<div class="full">
<h2>Tiny, Responsive, Grid Demo</h2>
<p>An HTML 5 Framework with a 2, 3, &amp; 4 column CSS grid vertical rythem.</p>
</div>
</div>
<div class="container">
<div class="twothirds">
<h3>Two Thirds</h3>
<!-- 2 paragraphs -->
</div>
<div class="third">
<h3>One Third</h3>
<!-- 1 paragraphs -->
</div>
</div>
<div class="container">
<div class="third">
<h3>One Third</h3>
<!-- 1 paragraphs -->
</div>
<div class="twothirds">
<h3>Two Thirds</h3>
<!-- 2 paragraphs -->
</div>
</div>
<div class="container">
<div class="third first">
<h3>One</h3>
<!-- 1 paragraphs -->
</div>
<div class="third superflous">
<h3>Two (superflous)</h3>
<!-- 1 paragraphs -->
</div>
<div class="third">
<h3>Three</h3>
<!-- 1 paragraphs -->
</div>
</div>
<div class="container">
<div class="half">
<h3>Half</h3>
<!-- 1 paragraphs -->
</div>
<div class="half">
<h3>Half</h3>
<!-- 1 paragraphs -->
</div>
</div>
<div class="container">
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
</div>
<div class="container">
<div class="half superflous">
<h3>Half (superflous)</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
</div>
<div class="container">
<div class="threeforths">
<h3>Three Forths</h3>
<!-- 1 paragraphs -->
</div>
<div class="forth">
<h3>Forth</h3>
<!-- 1 paragraphs -->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment