Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
147 lines (130 sloc) 5.91 KB
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
<style>
body { width: 900px; margin: 0 auto; }
</style>
<script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.metro.js"></script>
<script type="text/javascript" src="/scripts/tilt.js"></script>
</head>
<body>
<a href="http://github.com/Code52/metro.css/">
<img alt="Fork me on GitHub" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" style="position: absolute; top: 0; right: 0; border: 0;">
</a>
<h1 class="accent">metro.css</h1>
<h2 class="lime">stylesheets and then some</h2>
<div class="metro-pivot">
<div class="pivot-item">
<h3>about</h3>
<p>The <a href="http://code52.org">Code52</a> gang are putting together some stylesheets and resources for people looking to get more familiar with Metro.</p>
<p>Much like the Twitter Bootstrap project (which was one of the inspirations for this project), the site uses LESS to build the stylesheets on-the-fly. So if you wanted to test this locally, you'd need something like <a href="http://github.com/mojombo/jekyll/">Jekyll</a> or our own <a href="http://github.com/Code52/Pretzel/">Pretzel</a> to serve up the content (as the generation is done using Javascript and you will likely encounter file:// permission issues).
<p>While you can just go and grab the code from <a href="http://github.com/Code52/metro.css/">GitHub</a>, feel free to click around the site and see more for yourself.
</div>
<div class="pivot-item">
<h3>demos</h3>
<ul class="metro-list">
<li class="accent"><a href="/demos/fonts/">A font for all occasions</a></li>
<li class="accent"><a href="/demos/fonts/">jqMetro - a pivot control</a></li>
<li class="accent"><a href="/demos/blog/">Applying Metro to a blog</a></li>
<li class="accent"><a href="/demos/slides/">Adding metro to impress.js (WIP)</a></li>
</ul>
</div>
<div class="pivot-item">
<h3>columns</h3>
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
<div class="row">
<div class="span4">Level 3</div>
<div class="span4">Level 3</div>
<div class="span4">Level 3</div>
</div>
<div class="row">
<div class="span4">Level 4</div>
<div class="span8">Level 4</div>
</div>
</div>
</div>
</div>
<div class="pivot-item">
<h3>controls</h3>
<h4>progress bars</h4>
<div class="row">
<div class="span4">
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
</div>
</div>
<h4>active progress bars</h4>
<div class="row">
<div class="span4">
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
</div>
</div>
<h4>tiles</h3>
<div class="tiles" style="width:800px;">
<div class="tilerow">
<div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
<div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
<div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
<div class="tile two-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
</div>
<div class="tilerow">
<div class="tile two-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
<div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
<div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
<div class="tile two-v fifthcol limebg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile two-v fourthcol orangebg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile one purplebg"><p><h2>test</h2></p></div>
<div class="tile one purplebg"><p><h2>test</h2></p></div>
<div class="tile one purplebg"><p><h2>test</h2></p></div>
<div class="tile one purplebg"><p><h2>test</h2></p></div>
<div class="tile one purplebg"><p><h2>test</h2></p></div>
</div>
</div>
</div>
</div>
<script>
var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("<span class='header' />"); },
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
itemsTemplate: function () { return $("<div class='items' />"); },
headersTemplate: function () { return $("<div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};
$(function () {
$("div.metro-pivot").metroPivot(defaults);
$(".tile").each(addTileTilt);
});
</script>
</body>
</html>