Permalink
Browse files

Cleaned up the demo a tiny bit and added Progress Bars.

  • Loading branch information...
1 parent 85432ee commit 5eaa5043582c2fb11cbc842407e1d6c2f341bba8 @andrewtobin andrewtobin committed Feb 11, 2012
View
@@ -14,32 +14,22 @@ <h1 class="accent">LARGE heading text</h1>
<h2 class="lime">sub heading text</h2>
<h3>sub-sub heading text</h3>
<h4>is this even a heading? woaw</h4>
-
<div class="metro-pivot">
<div class="pivot-item">
- <h3>tab1</h3>
+ <h3>fonts</h3>
<p>
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.
</p>
<p><strong>Strong</strong></p>
<p><em>Emphasis</em></p>
<p><b>Bold</b></p>
<p><i>Italic</i></p>
- <p>
- 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.
- </p>
- </div>
+ <p>If you want to use the accent colour, set <code>class="accent"</code></p>
+ </div>
<div class="pivot-item">
- <h3>tab3</h3>
+ <h3>pivots</h3>
<p>
- 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.
- </p>
- </div>
- </div>
-
- If you want to use the accent colour, set <code>class="accent"</code>
-
- <pre>
+ <pre>
var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
@@ -57,7 +47,10 @@ <h3>tab3</h3>
$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
- </pre>
+ </pre>
+ </p>
+ </div>
+ </div>
<script>
var defaults = {
animationDuration: 350,
View
@@ -35,26 +35,42 @@ <h3>demos</h3>
<li class="accent"><a href="/demos/slides/">Adding metro to impress.js (WIP)</a></li>
</ul>
</div>
- </div>
- <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 3</div>
- <div class="span8">Level 3</div>
- </div>
- </div>
- </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 progress-striped active">
+ <div class="bar" style="width: 60%;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
<script>
var defaults = {
View
@@ -1,235 +0,0 @@
-/*Copyright 2012 Twitter, Inc.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.*/
-
- // Mixins.less
-// Snippets of reusable CSS to develop faster and keep code readable
-// -----------------------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.clearfix() {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- }
- &:after {
- clear: both;
- }
-}
-
-
-
-// Center-align a block level element
-// ----------------------------------
-.center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-// IE7 inline-block
-// ----------------
-.ie7-inline-block() {
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-.ie7-restore-left-whitespace() {
- *margin-left: .3em;
-
- &:first-child {
- *margin-left: 0;
- }
-}
-
-.ie7-restore-right-whitespace() {
- *margin-right: .3em;
-
- &:last-child {
- *margin-left: 0;
- }
-}
-
-// Sizing shortcuts
-// -------------------------
-.size(@height: 5px, @width: 5px) {
- width: @width;
- height: @height;
-}
-.square(@size: 5px) {
- .size(@size, @size);
-}
-
-// Placeholder text
-// -------------------------
-.placeholder(@color: @placeholderText) {
- :-moz-placeholder {
- color: @color;
- }
- ::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-
-
-// GRID SYSTEM
-// --------------------------------------------------
-
-// Site container
-// -------------------------
-.container-fixed() {
- width: @gridRowWidth;
- margin-left: auto;
- margin-right: auto;
- .clearfix();
-}
-
-// Le grid system
-// -------------------------
-#gridSystem {
- // Setup the mixins to be used
- .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
- .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
- }
- .gridColumn(@gridGutterWidth) {
- float: left;
- margin-left: @gridGutterWidth;
- }
- // Take these values and mixins, and make 'em do their thang
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
- // Row surrounds the columns
- .row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
- }
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
- [class*="span"] {
- #gridSystem > .gridColumn(@gridGutterWidth);
- }
- // Default columns
- .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
- .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
- .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
- .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
- .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
- .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
- .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
- .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
- .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
- .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
- .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
- .span12,
- .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
- // Offset column options
- .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
- .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
- .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
- .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
- .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
- .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
- .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
- .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
- .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
- .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
- .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
- }
-}
-
-// Fluid grid system
-// -------------------------
-#fluidGridSystem {
- // Setup the mixins to be used
- .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
- width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- }
- .gridColumn(@fluidGridGutterWidth) {
- float: left;
- margin-left: @fluidGridGutterWidth;
- }
- // Take these values and mixins, and make 'em do their thang
- .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
- // Row surrounds the columns
- .row-fluid {
- width: 100%;
- .clearfix();
-
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
- > [class*="span"] {
- #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
- }
- > [class*="span"]:first-child {
- margin-left: 0;
- }
- // Default columns
- .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
- .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
- .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
- .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
- .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
- .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
- .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
- .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
- .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
- .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
- .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
- .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
- }
- }
-}
-
-
-
-// Input grid system
-// -------------------------
-#inputGridSystem {
- .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
- }
- .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
- input,
- textarea,
- .uneditable-input {
- &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
- &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
- &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
- &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
- &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
- &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
- &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
- &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
- &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
- &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
- &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
- &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
- }
- }
-}
-
View
@@ -0,0 +1,9 @@
+@import "bootstrap/reset.less";
+
+@import "bootstrap/variables.less";
+@import "bootstrap/mixins.less";
+@import "bootstrap/layouts.less";
+
+@import "bootstrap/progress-bars.less";
+
+@import "bootstrap/utilities.less";
File renamed without changes.
Oops, something went wrong.

0 comments on commit 5eaa504

Please sign in to comment.