Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add small tile size #39

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add small tile size #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 47 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ <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">
Expand Down Expand Up @@ -78,15 +78,15 @@ <h4>active progress bars</h4>
</div>
</div>

<h4>tiles</h3>
<h4>tiles</h4>
<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>
Expand All @@ -98,25 +98,62 @@ <h4>tiles</h3>
<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>
<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>
<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>

<h4 style="clear: both;">small tiles</h4>
<div class="tiles" style="width:500px;">
<div class="tilerow">
<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
<div class="tile half-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 half-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
<div class="tile quarter limebg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter limebg"><a href="#"><h2>test</h2></a></div>
<div class="tile half-v smallfifthcol limebg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
<div class="tile half-v smallfourthcol orangebg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
<div class="tile quarter smallfifthcol tealbg"><a href="#"><h2>test</h2></a></div>
</div>
<div class="tilerow">
<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
</div>
</div>

</div>
</div>
</div>



<script>
var defaults = {
animationDuration: 350,
Expand Down Expand Up @@ -144,4 +181,4 @@ <h4>tiles</h3>

</script>
</body>
</html>
</html>
65 changes: 42 additions & 23 deletions less/tiles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
@tilebasewidth : 130;
@tilepadding: 5;
@tilemargin: 10;
@tilebasewidth: 130px;
@tilepadding: 5px;
@tilemargin: 10px;
@tilesize: (@tilepadding*2) + @tilebasewidth + @tilemargin;
@2tilewidth: (@tilebasewidth + @tilemargin) *2;
@smalltilesize: (@tilepadding*2) + @tilebasewidth /2 + @tilemargin;
@small2tilewidth: (@tilebasewidth /2 + @tilemargin) *2;

.tile {
-webkit-perspective: 0;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.2s;
float: left;
margin-right: @tilemargin + 0px;
margin-bottom: @tilemargin + 0px;
margin-right: @tilemargin;
margin-bottom: @tilemargin;
text-align:center;
padding: @tilepadding + 0px;
padding: @tilepadding;
opacity:0.75;

h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
color: @white;
-webkit-user-select: none;
}
Expand All @@ -28,29 +31,45 @@
.tile img { border :0;}
.tile:hover { opacity:1;}
.tiles { .clear; }
.tilerow {
float:left;
.tilerow {
float:left;
-webkit-perspective: 0;
-webkit-transform-style: preserve-3d;
-webkit-user-select: none;
}
-webkit-user-select: none;
}

.tilesize(@width, @height) {
width: @width;
height: @height;
}
.one {
width: @tilebasewidth + 0px;
height: @tilebasewidth + 0px;
.tilesize(@tilebasewidth, @tilebasewidth);
}
.two-h {
width: (@tilebasewidth + @tilemargin) *2 + 0px;
height: @tilebasewidth + 0px;
.tilesize(@2tilewidth, @tilebasewidth);
}
.two-v {
width: @tilebasewidth + 0px;
height: (@tilebasewidth + @tilemargin)*2 + 0px;
.tilesize(@tilebasewidth, @2tilewidth);
}

.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol { position: absolute;}
.firstcol { }
.secondcol { margin-left: @tilesize*1px; }
.thirdcol { margin-left: @tilesize*2px; }
.fourthcol { margin-left: @tilesize*3px; }
.fifthcol { margin-left: @tilesize*4px; }
.half-h {
.tilesize(@small2tilewidth, @tilebasewidth /2);
}
.half-v {
.tilesize(@tilebasewidth /2, @small2tilewidth);
}
.quarter {
.tilesize(@tilebasewidth /2, @tilebasewidth /2);
}

.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol, .smallfirstcol, .smallsecondcol, .smallthirdcol, .smallfourthcol, .smallfifthcol { position: absolute;}
.firstcol { }
.secondcol { margin-left: @tilesize*1; }
.thirdcol { margin-left: @tilesize*2; }
.fourthcol { margin-left: @tilesize*3; }
.fifthcol { margin-left: @tilesize*4; }
.smallfirstcol { }
.smallsecondcol { margin-left: @smalltilesize*1; }
.smallthirdcol { margin-left: @smalltilesize*2; }
.smallfourthcol { margin-left: @smalltilesize*3; }
.smallfifthcol { margin-left: @smalltilesize*4; }