Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 257 lines (182 sloc) 9.88 KB
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bedrock</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Kameron|Sansita+One' rel='stylesheet' type='text/css'>
<link href="css/bedrock.css" rel="stylesheet" />
<link href="css/min/styles.min.css" rel="stylesheet" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body id="hide-grid-1">
<a href="https://github.com/dfcb/Bedrock"><img style="position:absolute; top:0; right:0; border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
<div id="wrapper">
<header>
<h1 id="logo"><a href="https://github.com/dfcb/Bedrock">Bedrock</a></h1>
<h2>a mobile first responsive grid</h2>
</header>
<div id="main" role="main">
<div class="grid-container gutters">
<article class="grid-12 left">
<p style="color:#008;">We now recommend the Bedrock influenced <a href="http://dfcb.github.com/extra-strength-responsive-grids/">Extra Strength Responsive Grids</a>. Check out the awesomeness.</p>
<p><a href="https://github.com/dfcb/Bedrock">Bedrock</a> is a responsive, mobile first 18 column grid. A theoretical grid for today's layout challenges. Pull it apart, modify it, or extend your favorite grid framework with the mobile classes.</p>
<p>It’s <strong>not</strong> another framework, nor “boilerplate”, but more like a utility. Like <a target="_blank" href="https://github.com/davatron5000/Foldy960">Foldy</a> by <a target="_blank" href="https://github.com/davatron5000">Dave Rupert</a>.</p>
</article>
<aside class="grid-6 right">
<p>Bedrock includes:</p>
<ul>
<li>Mobile first classes <code>.whole</code>, <code>.half</code> and <code>.third</code></li>
<li>Optional <code>.gutters</code></li>
</ul>
</aside>
</div>
<div id="author"><iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=tsvensen&amp;show_count=false&amp;show_screen_name=true&amp;size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe> <span>Created by <a href="http://timsvensen.com" target="_blank">Tim Svensen</a></span></div>
<h3>Examples</h3>
<p><em>Resize the browser</em> to see the example layouts change. Note the example copy and headings will change color indicating the current layout styling. Also, there is currently only one breakpoint.</p>
<p>The examples below show a few options available with the mobile first classes <code>.whole</code>, <code>.half</code> and <code>.thirds</code>. Checkout <a href="https://github.com/dfcb/Bedrock/blob/master/css/bedrock.css">bedrock.css</a> to learn more.</p>
<h4 class="example">Half : <span>12+6</span></h4>
<div class="grid-container gutters example">
<div class="grid-12 left half">12 <em>.half</em></div>
<div class="grid-6 right half">6 <em>.half</em></div>
</div>
<h4 class="example">Thirds : <span>6+6+6</span></h4>
<div class="grid-container gutters example">
<div class="grid-6 left third">6 <em>.third</em></div>
<div class="grid-6 inner third">6 <em>.third</em></div>
<div class="grid-6 right third">6 <em>.third</em></div>
</div>
<h4 class="example">Whole+Half : <span>6+6+6</span></h4>
<div class="grid-container gutters example">
<div class="grid-6 left whole">6 <em>.whole</em></div>
<div class="grid-6 inner half">6 <em>.half</em></div>
<div class="grid-6 right half">6 <em>.half</em></div>
</div>
<h4 class="example">Mobile complex : <span>Desktop complex</span></h4>
<div class="grid-container gutters example">
<div class="grid-12 left whole">12 <em>.whole</em></div>
<div class="grid-3 inner half">3 <em>.half</em></div>
<div class="grid-3 right half">3 <em>.half</em></div>
<div class="grid-3 left third">6 <em>.third</em></div>
<div class="grid-12 inner third">12 <em>.third</em></div>
<div class="grid-3 right third">6 <em>.third</em></div>
<div class="grid-9 whole">9 <em>.whole</em></div>
<div class="grid-9 whole">9 <em>.whole</em></div>
</div>
<h3>Quick Start</h3>
<ol>
<li>Grab <a href="https://github.com/dfcb/Bedrock/blob/master/css/bedrock.css">bedrock.css</a></li>
<li>Include the file before your stylesheet or prepend to your CSS</li>
<li>Update the media query in bedrock.css to respond correctly for your project</li>
<li>See the examples above in <a href="https://github.com/dfcb/Bedrock/blob/master/index.html">index.html</a> for a basic grid setup</li>
<li>Build your project</li>
</ol>
<ul>
<li>Optionally add gutters by adding <code>.gutters</code> to <code>.grid-container</code></li>
<li>Mobile classes: <code>.whole</code>, <code>.half</code> and <code>.third</code></li>
</ul>
<h3>The Grid</h3>
<p>The following grids are provided to demonstrate the grid across breakpoints as the browser is resized.</p>
<p>Note that no mobile classes have been used so each grid element spans the full width in the mobile breakpoint.</p>
<h4>The Grid With <code>.gutters</code></h4>
<div class="the-grid grid-container gutters example">
<div class="grid-18 left right">18</div>
<div class="grid-9 left">9</div>
<div class="grid-9 right">9</div>
<div class="grid-6 left">6</div>
<div class="grid-6 inner">6</div>
<div class="grid-6 right">6</div>
<div class="grid-3 left">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 right">3</div>
<div class="grid-1 left">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 right">1</div>
</div>
<h4>The Grid Without <code><strike>.gutters</strike></code></h4>
<div class="the-grid grid-container example">
<div class="grid-18 left right">18</div>
<div class="grid-9 left">9</div>
<div class="grid-9 right">9</div>
<div class="grid-6 left">6</div>
<div class="grid-6 inner">6</div>
<div class="grid-6 right">6</div>
<div class="grid-3 left">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 inner">3</div>
<div class="grid-3 right">3</div>
<div class="grid-1 left">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 inner">1</div>
<div class="grid-1 right">1</div>
</div>
<h3>Closing Thoughts</h3>
<p>This project exists to explore a mobile first grid solution in a responsive web. Our goal is not to “muddy the waters” with more grid frameworks. As stated above, it's here to demonstrate a mobile first approach and serve as a utility.</p>
<p>Help improve Bedrock:</p>
<ul>
<li>pull requests accepted</li>
<li>comment in an issue</li>
</ul>
<p class="closing">Bedrock was created with <a href="http://tsvensen.github.com/GruntStart/">GruntStart</a>.</p>
</div><!-- /#main -->
</div><!-- /#wrapper -->
<img id="resize" src="img/resize.png" alt="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/min/scripts.min.js" type="text/javascript"></script>
<!-- Add your own Google Analytics UA number or remove this snippet -->
<script>
// http://stackoverflow.com/questions/1264630/google-analytics-multiple-trackers-for-several-accounts#answer-12498571
var codes = ['UA-34991331-3', 'UA-34145020-1'], // tim, dfcb
_gaq = _gaq || [];
for(i in codes) {
_gaq.push(['_setAccount', codes[i]]);
_gaq.push(['_trackPageview']);
}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>