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 Jekyll or our own Pretzel to serve up the content (as the generation is done using Javascript and you will likely encounter file:// permission issues).
While you can just go and grab the code from GitHub, feel free to click around the site and see more for yourself.
Metro headings change, depending on the size. Large headings should be a light weight font and lowercase, but as it gets smaller, switch to regular weightings and uppercase to increase legibility.
Segoe UI is the prefered font for metro interfaces, but it isn't available on all platforms. We plan to use Segoe UI, Segoe WP, Helvetica Neue, Roboto, sans-serif
As it is difficult to compare against fonts you can't install/embed, here is an image demonstrating the different fonts
The following colours are available for foreground text colour by using class="accentname", that is class="lime" or for backgrounds class="accentnamebg" or class="limebg"
accent class. If you're compiling from Less, open up variables.less and change @accent to your desired accent colour - this will save a whole lot of search/replace!
Windows Phone 7 introduced the "Pivot" control, which in any other language would be described as a tab - the only difference being the transition between each frame, and the adjusting tab header positions.
Using jQuery Metro, we can achieve this relatively easily.
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
<div class="metro-pivot"> <div class="pivot-item"> <h3>tab1</h3> <p> content </p> </div> <div class="pivot-item"> <h3>tab2</h3> <p> content</p> </div> </div>
Include the following Javascript
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.metro.js"></script>
and add the following to a script block to activate. TODO: Reset the defaults to this!
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);
});
<div class="tiles"> <div class="tilerow"> <div class="tile two-v bluebg"><a href="#">content</div> <div class="tile one bluebg"><a href="#">content</div> <div class="tile one bluebg"><a href="#">content</div> <div class="tile two-h bluebg"><a href="#">content</div> </div> </div>
In the above example, the first tile would be two tiles high, and the fourth would be two tiles width. To cope with extra wide or extra high tiles, you can use offset classes, firstcol, secondcol, thirdcol, fourthcol and fifthcol
To enable tilt on tiles, you need to include scripts/tilt.js (and jquery), then in your footer.
$(function () {
$(".tile").each(addTileTilt);
}
These are all completely standalone, depending on what accent colour you want. It should be pre-minified.
Unfortunately as mentioned above, only Roboto can be distributed. It's not required, just on systems without Segoe UI or Helvetica Neue, Roboto is the next best choice before falling back to sans-serif
This contains the tile tilt and pivot Javascript files - just add jQuery.
