Skip to content
Browse files

first commit

  • Loading branch information...
0 parents commit e26b328dfef04a280549c711ed9ab5f536ae04f5 @paulmwatson committed
4 README
@@ -0,0 +1,4 @@
+Windows Phone 7 UI inspired tile layout *concept* for web-browsers.
+
+* WebKit/Chrome only for now.
+* I am not distributing the SegoeWP font properly. Must fix.
38 css/base.css
@@ -0,0 +1,38 @@
+/* browsertiles. 2010. Paul M. Watson <paul@paulmwatson.com> */
+/* #TODO: Fix SegoeWP distribution. */
+@font-face
+{
+ font-family: SegoeWP;
+ src: url('/fonts/SegoeWP.ttf');
+}
+
+@font-face
+{
+ font-family: SegoeWPLight;
+ src: url('/fonts/SegoeWP-Light.ttf');
+}
+
+
+html, body
+{
+ background-color: #353535;
+ color: #fff;
+ font-family: SegoeWPLight, helvetica, sans-serif;
+ height: 100%;
+ overflow: hidden;
+ width: 100%;
+}
+
+body
+{
+ background-size: 100% auto;
+}
+
+h1
+{
+ font-size: 56px;
+ margin-bottom: 50px;
+ padding-left: 1%;
+ padding-top: 1%;
+ width: 200%;
+}
135 css/icons.css
@@ -0,0 +1,135 @@
+/* browsertiles. 2010. Paul M. Watson <paul@paulmwatson.com> */
+.icon_camera div
+{
+ background-image: url(/images/icons/camera.png);
+}
+
+.icon_add_favourite div
+{
+ background-image: url(/images/icons/add-favourite.png);
+}
+
+.icon_arrow_downstop div
+{
+ background-image: url(/images/icons/arrow-downstop.png);
+}
+
+.icon_arrow_left div
+{
+ background-image: url(/images/icons/arrow-left.png);
+}
+
+.icon_arrow_next div
+{
+ background-image: url(/images/icons/arrow-next.png);
+}
+
+.icon_arrow_right div
+{
+ background-image: url(/images/icons/arrow-right.png);
+}
+
+.icon_arrow_previous div
+{
+ background-image: url(/images/icons/arrow-previous.png);
+}
+
+.icon_arrow_upstop div
+{
+ background-image: url(/images/icons/arrow-upstop.png);
+}
+
+.icon_cog div
+{
+ background-image: url(/images/icons/cog.png);
+}
+
+.icon_delete div
+{
+ background-image: url(/images/icons/delete.png);
+}
+
+.icon_edit div
+{
+ background-image: url(/images/icons/edit.png);
+}
+
+.icon_email div
+{
+ background-image: url(/images/icons/email.png);
+}
+
+.icon_favourite div
+{
+ background-image: url(/images/icons/favourite.png);
+}
+
+.icon_folder div
+{
+ background-image: url(/images/icons/folder.png);
+}
+
+.icon_gift div
+{
+ background-image: url(/images/icons/gift.png);
+}
+
+.icon_help div
+{
+ background-image: url(/images/icons/help.png);
+}
+
+.icon_minus div
+{
+ background-image: url(/images/icons/minus.png);
+}
+
+.icon_movie div
+{
+ background-image: url(/images/icons/movie.png);
+}
+
+.icon_pause div
+{
+ background-image: url(/images/icons/pause.png);
+}
+
+.icon_play div
+{
+ background-image: url(/images/icons/play.png);
+}
+
+.icon_plus div
+{
+ background-image: url(/images/icons/plus.png);
+}
+
+.icon_refresh div
+{
+ background-image: url(/images/icons/refresh.png);
+}
+
+.icon_save div
+{
+ background-image: url(/images/icons/save.png);
+}
+
+.icon_search div
+{
+ background-image: url(/images/icons/search.png);
+}
+
+.icon_tick div
+{
+ background-image: url(/images/icons/tick.png);
+}
+
+.icon_touch div
+{
+ background-image: url(/images/icons/touch.png);
+}
+
+.icon_x div
+{
+ background-image: url(/images/icons/x.png);
+}
102 css/reset.css
@@ -0,0 +1,102 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+body {
+ line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+ display:block;
+}
+
+nav ul {
+ list-style:none;
+}
+
+blockquote, q {
+ quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content:'';
+ content:none;
+}
+
+a {
+ margin:0;
+ padding:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+ background-color:#ff9;
+ color:#000;
+ text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+ background-color:#ff9;
+ color:#000;
+ font-style:italic;
+ font-weight:bold;
+}
+
+del {
+ text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+ border-bottom:1px dotted;
+ cursor:help;
+}
+
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+ display:block;
+ height:1px;
+ border:0;
+ border-top:1px solid #cccccc;
+ margin:1em 0;
+ padding:0;
+}
+
+input, select {
+ vertical-align:middle;
+}
205 css/tiles.css
@@ -0,0 +1,205 @@
+/* browsertiles. 2010. Paul M. Watson <paul@paulmwatson.com> */
+.tiles, .tile
+{
+ list-style-type: none;
+}
+
+.tiles
+{
+ height: 80%;
+ overflow: hidden;
+ margin: 0 auto;
+ padding: 10px;
+ width: 95%;
+}
+
+@media only screen and (max-width: 550px)
+{
+ .tiles
+ {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ width: 99%;
+ }
+}
+
+/* Default Tile */
+.tile
+{
+ cursor: pointer;
+ float: left;
+ height: 15%;
+ margin: 0;
+ opacity: 0.8;
+ overflow: hidden;
+ position: relative;
+ width: 10%;
+}
+
+.tile div
+{
+ background-repeat: no-repeat;
+ background-color: #222;
+ height: 100%;
+ width: 100%;
+ margin: 10px 10px 0 10px;
+ overflow: hidden;
+}
+
+.tile:hover
+{
+ opacity: 1;
+ z-index: 1;
+ -webkit-transform: scale(1.05);
+}
+
+.tile h2
+{
+ bottom: 10px;
+ left: 20px;
+ position: absolute;
+ text-shadow: 1px 1px 0 #888;
+ white-space: nowrap;
+}
+
+.tile h3
+{
+ font-family: SegoeWP;
+ font-size: 24px;
+ position: absolute;
+ right: 10px;
+ text-align: right;
+ top: 20px;
+}
+
+/* Custom Sizes */
+.tile.wide
+{
+ width: 20%;
+}
+
+.tile.high
+{
+ height: 30%;
+}
+
+
+@media only screen and (max-width: 1000px)
+{
+ .tile
+ {
+ width: 12.5%;
+ }
+
+ .tile.wide
+ {
+ width: 25%;
+ }
+}
+
+@media only screen and (max-width: 750px)
+{
+ .tile
+ {
+ width: 16.5%;
+ }
+
+ .tile.wide
+ {
+ width: 33%;
+ }
+}
+
+@media only screen and (max-width: 550px)
+{
+ .tile
+ {
+ width: 33%;
+ }
+
+ .tile.wide
+ {
+ width: 66%;
+ }
+}
+
+@media only screen and (max-height: 600px)
+{
+ .tile
+ {
+ height: 20%;
+ }
+
+ .tile.high
+ {
+ height: 40%;
+ }
+}
+
+/* Colours */
+.theme_blue .tile div, .tile.blue div
+{
+ background-color: #1BA1E2;
+}
+
+.theme_grey .tile div, .tile.grey div
+{
+ background-color: #666;
+}
+
+.theme_black .tile div, .tile.black div
+{
+ background-color: #000;
+}
+
+.theme_white .tile div, .tile.white div
+{
+ background-color: #fff;
+ color: #333;
+}
+
+.theme_orange .tile div, .tile.orange div
+{
+ background-color: #F09609;
+}
+
+.theme_lime .tile div, .tile.lime div
+{
+ background-color: #8CBF26;
+}
+
+.theme_brown .tile div, .tile.brown div
+{
+ background-color: #996600;
+}
+
+.theme_pink .tile div, .tile.pink div
+{
+ background-color: #FF0097;
+}
+
+.theme_red .tile div, .tile.red div
+{
+ background-color: #E51400;
+}
+
+.theme_green .tile div, .tile.green div
+{
+ background-color: #339933;
+}
+
+.theme_magenta .tile div, .tile.magenta div
+{
+ background-color: #FF0097;
+}
+
+.theme_purple .tile div, .tile.purple div
+{
+ background-color: #A200FF;
+}
+
+.theme_teal .tile div, .tile.teal div
+{
+ background-color: #00ABA9;
+}
BIN fonts/SegoeWP-Light.ttf
Binary file not shown.
BIN fonts/SegoeWP.ttf
Binary file not shown.
BIN images/icons/add-favourite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-downstop.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-left.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-next.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-previous.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-right.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/arrow-upstop.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/camera.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/cog.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/delete.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/edit.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/email.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/favourite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/folder.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/gift.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/help.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/minus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/movie.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/pause.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/play.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/plus.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/refresh.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/save.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/search.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/tick.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/icons/touch.png
Diff not rendered.
BIN images/icons/x.png
Diff not rendered.
294 index.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Browser Tiles</title>
+ <meta name="description" content="Tile UI in browser inspired by Windows Phone 7 UI.">
+ <meta name="author" content="Paul M. Watson <paul@paulmwatson.com>">
+ <!--[if IE]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" title="reset" charset="utf-8">
+ <link rel="stylesheet" href="/css/base.css" type="text/css" media="screen" title="reset" charset="utf-8">
+ <link rel="stylesheet" href="/css/tiles.css" type="text/css" media="screen" title="reset" charset="utf-8">
+ <link rel="stylesheet" href="/css/icons.css" type="text/css" media="screen" title="reset" charset="utf-8">
+ </head>
+ <body class="theme_none">
+ <h1>monday, 25th october 2010</h1>
+ <ul class="tiles">
+ <li class="tile orange high icon_camera">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile icon_add_favourite">
+ <div>
+ <h2>Email</h2><h3>13</h3>
+ </div>
+ </li>
+ <li class="tile blue icon_arrow_downstop">
+ <div>
+ <h2>Facebook</h2><h3>30</h3>
+ </div>
+ </li>
+ <li class="tile purple wide icon_arrow_left">
+ <div>
+ <h2>Twitter</h2><h3>91921</h3>
+ </div>
+ </li>
+ <li class="tile lime icon_arrow_previous">
+ <div>
+ <h2>New York Times</h2><h3>9</h3>
+ </div>
+ </li>
+ <li class="tile brown icon_arrow_right">
+ <div>
+ <h2>SMS</h2><h3>12</h3>
+ </div>
+ </li>
+ <li class="tile icon_email">
+ <div>
+ <h2>Contacts</h2><h3>24</h3>
+ </div>
+ </li>
+ <li class="tile grey icon_favourite">
+ <div>
+ <h2>The Daily Telegraph</h2><h3>2</h3>
+ </div>
+ </li>
+ <li class="tile icon_folder">
+ <div>
+ <h2>SMS With Walton</h2><h3>1</h3>
+ </div>
+ </li>
+ <li class="tile icon_gift">
+ <div>
+ <h2>Photos</h2><h3>10</h3>
+ </div>
+ </li>
+ <li class="tile icon_help">
+ <div>
+ <h2>Contacts</h2><h3>301</h3>
+ </div>
+ </li>
+ <li class="tile icon_minus">
+ <div>
+ <h2>New York Times</h2>
+ </div>
+ </li>
+ <li class="tile icon_movie">
+ <div>
+ <h2>SMS</h2>
+ </div>
+ </li>
+ <li class="tile icon_pause">
+ <div>
+ <h2>Photos</h2>
+ </div>
+ </li>
+ <li class="tile pink wide icon_arrow_upstop">
+ <div>
+ <h2>Photos</h2>
+ </div>
+ </li>
+ <li class="tile magenta icon_cog">
+ <div>
+ <h2>New York Times</h2>
+ </div>
+ </li>
+ <li class="tile red icon_delete">
+ <div>
+ <h2>SMS</h2>
+ </div>
+ </li>
+ <li class="tile teal wide high icon_arrow_next">
+ <div style="background-image: url(http://farm1.static.flickr.com/19/23597646_8055be0f76_o.jpg); background-size: auto 100%">
+ <h2>Flickr</h2>
+ <h3>21</h3>
+ </div>
+ </li>
+ <li class="tile green icon_edit">
+ <div>
+ <h2>Photos</h2>
+ </div>
+ </li>
+ <li class="tile icon_play">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile black icon_plus">
+ <div>
+ <h2>The Guardian</h2>
+ </div>
+ </li>
+ <li class="tile icon_refresh">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile icon_save">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile icon_search">
+ <div>
+ <h2>White Knights</h2>
+ </div>
+ </li>
+ <li class="tile icon_tick">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile icon_touch">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile icon_x">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile white">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ <li class="tile">
+ <div>
+ <h2>Contacts</h2>
+ </div>
+ </li>
+ </ul>
+ <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+ <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
+ </body>
+</html>
4 js/main.js
@@ -0,0 +1,4 @@
+/* browsertiles. 2010. Paul M. Watson <paul@paulmwatson.com> */
+$(document).ready()
+{
+};

0 comments on commit e26b328

Please sign in to comment.
Something went wrong with that request. Please try again.