forked from furiouscollective/gridforms
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
215 lines (200 loc) · 7.67 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!--
PS: This landing page is badly/quickly coded to save time! The library is not.
Don't judge a book by its cover. Or something like that.
-->
<!DOCTYPE html>
<head>
<title>Grid Forms · Data entry made beautiful</title>
<link rel="stylesheet" type="text/css" href="gridforms/gridforms.css">
<link rel="stylesheet" type="text/css" href="media/style.css">
<script type="text/javascript" src="//use.typekit.net/jmi3kol.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="gridforms/gridforms.js"></script>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="header">
<img src="media/images/logo.png">
<h2>Data entry can be beautiful</h2>
<h3>Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.</h3>
<br>
<h3><b><a href="https://github.com/kumailht/gridforms">Download on Github</a></b></h3>
<br>
<iframe src="http://ghbtns.com/github-btn.html?user=kumailht&repo=gridforms&type=watch"
allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://kumailht.com/gridforms/" data-via="kumailht" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<br><br><br>
<br>
<center><img src="media/images/try.png"></center>
<br>
<form class="my-grid-form">
<fieldset>
<legend>Add to inventory</legend>
<div data-row-span="4">
<div data-field-span="3">
<label>Product Name</label>
<input type="text" autofocus>
</div>
<div data-field-span="1">
<label>Tags</label>
<input type="text">
</div>
</div>
<div data-row-span="2">
<div data-field-span="1">
<label>Vendor</label>
<select>
<option>Select a vendor</option>
<option>ted</option>
<option>Magna Phasellus Dolor Incorporated</option>
<option>Fames Ac Turpis Inc.</option>
<option>Eu Eros Institute</option>
<option>Suspendisse Sagittis Associates</option>
<option>Tempor Lorem PC</option>
<option>Nulla Facilisi Sed PC</option>
<option>Dignissim Corp.</option>
<option>Blandit Ltd</option>
<option>Dapibus Gravida Aliquam LLP</option>
<option>Cursus A Inc.</option>
<option>Tellus PC</option>
<option>Fusce Mi Foundation</option>
<option>Dictum Sapien Aenean Associates</option>
<option>In Tincidunt PC</option>
<option>Sapien Aenean Ltd</option>
<option>Libero Foundation</option>
<option>Egestas Rhoncus Proin Corp.</option>
<option>Feugiat Nec Diam Institute</option>
<option>Turpis Foundation</option>
<option>Pede Malesuada Vel Associates</option>
<option>Eget Venenatis A PC</option>
<option>Mollis Vitae Corporation</option>
<option>Gravida Mauris Incorporated</option>
<option>Tortor Consulting</option>
<option>Habitant Morbi Tristique Corporation</option>
<option>Enim Corp.</option>
<option>Sed Turpis Nec LLC</option>
<option>Enim Foundation</option>
<option>Tincidunt Orci Quis Institute</option>
<option>Lectus Pede LLC</option>
<option>Class Corporation</option>
<option>Erat Volutpat Nulla LLP</option>
<option>Sed LLC</option>
<option>Justo Faucibus Associates</option>
<option>Vel Turpis Foundation</option>
<option>Tellus Aenean Limited</option>
<option>Tempus Scelerisque Corporation</option>
<option>Eleifend LLP</option>
<option>A Felis Ullamcorper Company</option>
<option>Neque Non LLC</option>
<option>Nibh Donec Est PC</option>
</select>
</div>
<div data-field-span="1">
<label>Product Type</label>
<select>
<option>Select a product type</option>
<option>et magnis</option>
<option>Vivamus rhoncus.</option>
<option>egestas ligula.</option>
<option>nulla. Cras</option>
<option>Proin mi.</option>
<option>turpis non</option>
<option>ante ipsum</option>
<option>arcu. Curabitur</option>
<option>ante. Maecenas</option>
<option>magna. Phasellus</option>
<option>Suspendisse aliquet,</option>
<option>purus gravida</option>
<option>ac risus.</option>
<option>mollis non,</option>
</select>
</div>
</div>
<div data-row-span="1">
<div data-field-span="1">
<label>Product Description</label>
<textarea></textarea>
</div>
</div>
<div data-row-span="5">
<div data-field-span="1">
<label>SKU</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Initial Stock Level</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Cost Price</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Wholesale Price</label>
<input type="text">
</div>
<div data-field-span="1">
<label>Retail Price</label>
<input type="text">
</div>
</div>
</fieldset>
</form>
<div class="why">
<br><br><br>
<br><br>
<center><img src="media/images/features.png"></center>
<br><br><br>
<div class="grid-3 gutter-60">
<div class="span-1">
<div class="my-grid-form">
<div data-row-span="2" style="border-top: 1px solid #333">
<div data-field-span="1">
<label>Country</label>
<input type="text">
</div>
<div data-field-span="1">
<label>City</label>
<input type="text">
</div>
</div>
</div>
<br>
<p><span class="digit">1.</span>Proximity of fields relative to each other on the grid provides useful context. And field sizes serve as hints for what the value might be.</p>
</div>
<div class="span-1">
<img src="media/images/form-zoomed-out.png" style="width:256px">
<p><span class="digit">2.</span>With grid forms, lengthy forms can easily fit above the fold. Which means less scrolling. And tabbing through the form comes more naturally.</p>
</div>
<div class="span-1">
<img src="media/images/responsive.png">
<p><span class="digit">3.</span>Each field wraps to its own line on mobile devices. Even then, the forms are denser than their counterparts.</p>
</div>
</div>
</div>
<br><br><br><br>
<div class="footer">
<i><b>Gridforms</b> was made by <b><a href="http://kumailht.com">Kumail Hunaid</a></b>. <br><br>Follow <a href="http://twitter.com/kumailht">@kumailht</a> on Twitter or <br><a href="http://kumailht.com/#email-notification">subscribe</a> to be notified about future projects.</i>
</div>
<br><br><br>
<center><a href="http://formbakery.com"><img src="media/images/now-checkout-formbakery.png"></a></center>
<br><br><br><br>
<br><br><br><br>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-632178-11']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>