This repository has been archived by the owner on Mar 25, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (134 loc) · 6.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Mockups by virtusize</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src="javascripts/scale.fix.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1 class="header">Mockups</h1>
<p class="header">Widget v5 static mockups</p>
<ul>
<li class="download">
<a class="buttons" href="https://github.com/virtusize/mockups/zipball/master">Download ZIP</a>
</li>
<li class="download">
<a class="buttons" href="https://github.com/virtusize/mockups/tarball/master">Download TAR</a>
</li>
<li><a class="buttons github" href="https://github.com/virtusize/mockups">View On GitHub</a></li>
</ul>
<p class="header">
This project is maintained by <a class="header name" href="https://github.com/virtusize">Virtusize</a>
</p>
</header>
<section>
<h1>
<a name="test-and-throw-away-mockups" class="anchor" href="#test-and-throw-away-mockups">
<span class="octicon octicon-link"></span>
</a>
<em>Test and throw away</em> mockups
</h1>
<h2><a name="demo" class="anchor" href="#demo"><span class="octicon octicon-link"></span></a>Demo</h2>
<p>
<a href="http://virtusize.github.io/mockups/aptado/start.html">Aptado</a><br>
<a href="http://virtusize.github.io/mockups/purchase-history/">Purchase history</a><br>
<a href="http://virtusize.github.io/mockups/vector-rendering/">Vector-rendering</a> (Snap)<br>
<a href="http://virtusize.github.io/mockups/vector-rendering/raphael.html">Vector-rendering</a>
(Raphaël)<br>
Widget v5 panels: <a href="http://virtusize.github.io/mockups/v5/">Select item</a>,
<a href="http://virtusize.github.io/mockups/v5/compare.html">Compare</a>,
<a href="http://virtusize.github.io/mockups/v5/wardrobe.html">Wardrobe</a>
</p>
<p>
<a href="http://virtusize.github.io/mockups/purchase-history/">Purchase history</a><br>
<a href="http://virtusize.github.io/mockups/vector-rendering/">Vector-rendering</a> (Snap)<br>
<a href="http://virtusize.github.io/mockups/vector-rendering/raphael.html">Vector-rendering</a>
(Raphaël)<br>
Widget v5 panels: <a href="http://virtusize.github.io/mockups/v5/">Select item</a>, <a
href="http://virtusize.github.io/mockups/v5/compare.html">Compare</a>, <a
href="http://virtusize.github.io/mockups/v5/wardrobe.html">Wardrobe</a><br>
<a href="http://virtusize.github.io/mockups/admin/dashboard.html">Happy Place</a>
</p>
<h2>
<a name="mockup-structure-for-aptado" class="anchor" href="#mockup-structure-for-aptado">
<span class="octicon octicon-link"></span>
</a>
Mockup structure for Aptado
</h2>
<ul>
<li>Standalone</li>
<li>Mostly static</li>
<li>Frontend only: HTML, CSS and JavaScript</li>
<li>Focus on mobile and tablet</li>
</ul>
<h2>
<a name="mockup-structure-for-purchase-history" class="anchor"
href="#mockup-structure-for-purchase-history">
<span class="octicon octicon-link"></span>
</a>
Mockup structure for purchase history</h2>
<ul>
<li>Standalone</li>
<li>Mostly static</li>
<li>Frontend only: HTML, CSS and jQuery</li>
<li>Only compare view and purchase history view</li>
<li>Focus on flow and interaction</li>
<li>Going old-school: mostly images in the design, no fancy CSS</li>
</ul>
<h2>
<a name="mockup-structure-for-vector-rendering" class="anchor"
href="#mockup-structure-for-vector-rendering">
<span class="octicon octicon-link"></span>
</a>
Mockup structure for vector rendering
</h2>
<h3><a name="snap" class="anchor" href="#snap"><span class="octicon octicon-link"></span></a>Snap</h3>
<ul>
<li>Standalone</li>
<li>Frontend only: HTML, CSS and <a href="http://snapsvg.io/">Snap.svg</a></li>
<li>Showcase of basic shape rendering, making use of masking</li>
<li>Shape styles done with CSS, implementing both transparency and dashed strokes</li>
<li>Shapes support basic hover and click events</li>
<li>Centered text rendering in SVG, with option to load web font</li>
</ul>
<h3>
<a name="rapha%C3%ABl" class="anchor" href="#rapha%C3%ABl">
<span class="octicon octicon-link"></span>
</a>Raphaël
</h3>
<ul>
<li>Standalone</li>
<li>Frontend only: HTML, CSS and <a href="http://raphaeljs.com/">Raphaël</a> (fallback to VML for IE8)</li>
<li>Showcase of basic shape rendering, implementing basic transparency</li>
<li>Shape styles done with CSS for SVG and hard coded for VML</li>
<li>Shapes support basic hover and click events</li>
<li>Centered text rendering, support for web font in SVG, limited VML capabilities</li>
</ul>
<h2>
<a name="mockup-structure-for-happy-place" class="anchor"
href="#mockup-structure-for-happy-place">
<span class="octicon octicon-link"></span>
</a>
Mockup structure for happy place</h2>
<ul>
<li>Standalone</li>
<li>Mostly static</li>
<li>Frontend only: HTML, CSS and jQuery</li>
<li>Focus on visuals</li>
<li>No graphs</li>
</ul>
</section>
</div>
<!--[if !IE]>
<script>fixScale(document);</script><![endif]-->
</body>
</html>