13
13
< html xmlns ="http://www.w3.org/1999/xhtml " xml:lang ="en ">
14
14
< head >
15
15
< title > Slammer</ title >
16
- < link rel ="stylesheet " href ="{{site.url}}/media/css/base.css " type ="text/css " media ="screen " charset ="utf-8 "/>
17
16
< link rel ="stylesheet " href ="{{site.url}}/media/css/slammer.css " type ="text/css " media ="screen " charset ="utf-8 "/>
18
17
< link rel ="stylesheet " type ="text/css " href ="{{site.url}}/media/css/jquery.lightbox-0.5.css " media ="screen " />
19
18
< script type ="text/javascript " src ="{{site.url}}/media/js/jquery.js "> </ script >
40
39
< div class ="slam ">
41
40
< div class ="heading ">
42
41
< h1 > Slammer</ h1 >
43
- < div class ="subtitle "> Now, the matrix is everywhere. </ div >
42
+ < div class ="subtitle "> The Matrix is Everywhere </ div >
44
43
</ div >
45
44
< div class ="slammer-info ">
46
45
< span > Leopard Only</ span >
47
46
< span class ="slammer-download ">
48
- < a href ="{{links.Slammer.Download}} "> Free Download</ a >
47
+ < a href ="{{links.Slammer.Download}} "> Download</ a >
49
48
</ span >
50
- < span > Version: 0.3 Beta</ span >
49
+ < span > Version: 0.4 Beta</ span >
51
50
< div class ="clear "> </ div >
52
51
</ div >
53
52
</ div >
@@ -58,78 +57,182 @@ <h1>Slammer</h1>
58
57
</ div >
59
58
</ div >
60
59
< div class ="slammer-content ">
61
- < div class ="left-column ">
62
- < h2 > Grid for any application</ h2 >
63
- < p >
64
- < h3 > Are you:</ h3 >
65
- < p >
66
- Designing a web page? < br />
67
- Designing for the Mac?< br />
68
- Designing an iPhone App?< br />
69
- </ p >
70
- < h3 > You need Slammer.</ h3 >
71
- < p >
72
- Generate a grid.< br />
73
- Drag the grid on top of your design tool.< br />
74
- Push those pixels until they line up with the grid.
75
- < p >
76
- </ p >
60
+ < div class ="slammer-column " id ="slammer-features ">
61
+ < h2 > Features</ h2 >
62
+ < ul >
63
+ < li >
64
+ < h3 > Customizable Grid Overlays</ h3 >
65
+ < p >
66
+ Add multiple grids with varying columns and rows. Change the transparency and color of any element. Save and share your favorite setups.
67
+ </ p >
68
+ </ li >
69
+ < li >
70
+ < h3 > Rulers & Crosshairs</ h3 >
71
+ < p >
72
+ Precisely position your UI elements with the aid pixel precise rulers and crosshairs. Change the axes of the rules to measure elements anywhere on your canvas.
73
+ </ p >
74
+ </ li >
75
+ < li >
76
+ < h3 > Keyboard Shortcuts</ h3 >
77
+ < p >
78
+ Move the entire window or resize the window using the arrow keys. Keep the slammer window on top of all applications using a simple keystroke.
79
+ </ p >
80
+ </ li >
81
+ < li >
82
+ < h3 > Core Animation</ h3 >
83
+ < p >
84
+ Beautiful user interface with custom drawn controls that animate beautifully using core animation.
85
+ </ p >
86
+ </ li >
87
+
88
+ </ ul >
89
+ </ div >
90
+ < div class ="slammer-column " id ="slammer-screenshots ">
91
+ < h2 > Screenshots</ h2 >
92
+ < ul >
93
+ < li >
94
+ < p >
95
+ < a href ="{{site.url}}/media/images/slammer-cap.png "
96
+ title ="Slammer Basic Grid "
97
+ class ="lb ">
98
+ < img width ="130px " alt ="Slammer Basic Grid "
99
+ src ="{{site.url}}/media/images/slammer-cap.png "/>
100
+ </ a >
101
+ </ p >
102
+ </ li >
103
+ < li >
104
+ < p >
105
+ < a title ="Slammer Rulers & Crosshairs " href ="{{site.url}}/media/images/slammer-rulers.png " class ="lb ">
106
+ < img width ="130px " alt ="Slammer Rulers & Crosshairs "
107
+ src ="{{site.url}}/media/images/slammer-rulers.png "/>
108
+ </ a >
109
+ </ p >
110
+ </ li >
111
+ < li >
112
+ < p >
113
+ < a title ="Slammer Switching X-Axis Direction " href ="{{site.url}}/media/images/slammer-x-axis-switch.png " class ="lb ">
114
+ < img width ="130px " alt ="Slammer Switching X-Axis Direction "
115
+ src ="{{site.url}}/media/images/slammer-x-axis-switch.png "/>
116
+ </ a >
117
+ </ p >
118
+ </ li >
119
+ < li >
120
+ < p >
121
+ < a title ="Slammer Switching Y-Axis Direction " " href="{{site.url}}/media/images/slammer-y-axis-switch.png" class="lb">
122
+ < img width ="130px " alt ="Slammer Switching Y-Axis Direction "
123
+ src ="{{site.url}}/media/images/slammer-y-axis-switch.png "/>
124
+ </ a >
125
+ </ p >
126
+ </ li >
127
+ < li >
128
+ < p >
129
+ < a title ="Slammer Axes Switched " href ="{{site.url}}/media/images/slammer-axes-switched.png " class ="lb ">
130
+ < img width ="130px " alt ="Slammer Axes Switched "
131
+ src ="{{site.url}}/media/images/slammer-axes-switched.png "/>
132
+ </ a >
133
+ </ p >
134
+ </ li >
135
+ < li >
136
+ < p >
137
+ < a title ="Slammer Everything " href ="{{site.url}}/media/images/slammer-everything.png " class ="lb ">
138
+ < img width ="130px " alt ="Slammer Everything "
139
+ src ="{{site.url}}/media/images/slammer-everything.png "/>
140
+ </ a >
141
+ </ p >
142
+ </ li >
143
+ </ ul >
77
144
</ div >
78
- < div class ="left-column ">
79
- < p >
80
- < a href ="{{site.url}}/media/images/slammer-cap.png " class ="lb ">
81
- < img class ="cap " src ="{{site.url}}/media/images/slammer-cap.png "/> </ a >
145
+ < div class ="slammer-column " id ="slammer-presets ">
146
+ < h2 > Presets</ h2 >
147
+ < ul >
148
+ < li >
149
+ < p >
150
+ < a title ="Slammer The Grid System Preset " href ="{{site.url}}/media/images/slammer-thegridsystem.png " class ="lb ">
151
+ < img width ="130px " alt ="Slammer The Grid System Preset "
152
+ src ="{{site.url}}/media/images/slammer-thegridsystem.png "/>
153
+ </ a >
82
154
</ p >
155
+ </ li >
156
+ < li >
157
+ < p >
158
+ < a title ="Slammer 960 GS 12 Column Preset " href ="{{site.url}}/media/images/slammer-960gs-12.png " class ="lb ">
159
+ < img width ="130px " alt ="Slammer 960 GS 12 Column Preset "
160
+ src ="{{site.url}}/media/images/slammer-960gs-12.png "/>
161
+ </ a >
162
+ </ p >
163
+ </ li >
164
+ < li >
165
+ < p >
166
+ < a title ="Slammer 960 GS 16 Column Preset " href ="{{site.url}}/media/images/slammer-960gs-16.png " class ="lb ">
167
+ < img width ="130px " alt ="Slammer 960 GS 16 Column Preset "
168
+ src ="{{site.url}}/media/images/slammer-960gs-16.png "/>
169
+ </ a >
170
+ </ p >
171
+ </ li >
172
+ < li >
173
+ < p >
174
+ < a title ="Slammer Rows Only Preset 1 " href ="{{site.url}}/media/images/rows-only2.png " class ="lb ">
175
+ < img width ="130px " alt ="Slammer Rows Only Preset 1 "
176
+ src ="{{site.url}}/media/images/rows-only2.png "/>
177
+ </ a >
178
+ </ p >
179
+ </ li >
180
+ < li >
181
+ < p >
182
+ < a title ="Slammer Rows Only Preset 2 " href ="{{site.url}}/media/images/rows-only.png " class ="lb ">
183
+ < img width ="130px " alt ="Slammer Rows Only Preset 2 "
184
+ src ="{{site.url}}/media/images/rows-only.png "/>
185
+ </ a >
186
+ </ p >
187
+ </ li >
188
+ < li >
189
+ < p >
190
+ < a title ="Download " href ="{{links.Slammer.Presets}} " class ="download ">
191
+ < img alt ="Download Presets "
192
+ src ="{{site.url}}/media/images/download.png "/>
193
+ </ a >
194
+ </ p >
195
+ </ li >
196
+ </ ul >
83
197
</ div >
84
- < div class ="right-column ">
85
- < h2 > What are they saying?</ h2 >
86
- < p > < ul >
198
+ < div class ="slammer-column " id ="slammer-overheard ">
199
+ < h2 > Overheard</ h2 >
200
+ < ul >
201
+ < li >
202
+ < a href ="http://twitter.com/bjallen ">
203
+ bjallen</ a > : @lakshmivyas Really digging Slammer. Looking forward to seeing what you do with it.
204
+ </ li >
205
+ < li >
206
+ < a href ="http://twitter.com/visualpro ">
207
+ visualpro</ a > : *** Way Coool.
208
+ </ li >
209
+ < li >
210
+ < a href ="http://twitter.com/vl ">
211
+ VL</ a > : Slammer seems to be the best solution for grid overlays yet.
212
+ </ li >
213
+ < li >
214
+ < a href ="http://twitter.com/eriklarsen ">
215
+ eriklarsen</ a > :Slammer is pretty slick. Overlay customizable grids for your design and coding needs. Makes life a little easier.
216
+ </ li >
87
217
< li >
88
218
< a href ="http://twitter.com/mattwiebe ">
89
219
mattwiebe</ a > : If you design with grids and use a Mac, you should definitely be using Slammer...Intensely useful.
90
220
</ li >
91
- < li >
92
- < a href ="http://twitter.com/carlrafting ">
93
- carlrafting</ a > : Wowzer: Slammer
94
- </ li >
95
221
< li >
96
222
< a href ="http://twitter.com/dubsak ">
97
223
dubsak</ a > : Slammer - Put a grid over any window. This just made life a little nicer...
98
224
</ li >
99
225
< li >
100
226
< a href ="http://twitter.com/aisleone ">
101
- aisleone</ a > : A simple but very useful Mac OS X app that superimposes a customizable grid over any window
227
+ aisleone</ a > : A simple/ very useful Mac OS X app that superimposes a customizable grid.
102
228
</ li >
229
+ < li >
230
+ < a href ="http://twitter.com/carlrafting ">
231
+ carlrafting</ a > : Wowzer: Slammer
232
+ </ li >
103
233
</ ul >
104
- </ p > </ div >
105
- < div class ="right-column ">
106
- < h2 > Completely customizable</ h2 >
107
- < p >
108
- < ul >
109
- < li > Change the background color and the grid color according to the application background so that the grid is prominent yet non-intrusive.</ li >
110
- < li > Change the grid dimensions to suit your applications.</ li >
111
- < li > Add multiple grids for fine tuning your design.</ li >
112
- < li > Save your favorite grids as presets for future use.</ li >
113
- < li > Share your grids with other designers.</ li >
114
- </ ul > </ p >
115
- </ div >
116
- < div class ="left-column ">
117
- < h2 > Position it with ease</ h2 >
118
- < p >
119
- Slammer has excellent keyboard support for precise positioning and alignment.
120
- < ul >
121
- < li > Position the grid using the arrow keys.</ li >
122
- < li > Resize the grid using shift + arrow keys.</ li >
123
- </ p >
124
234
</ div >
125
- < div class ="right-column ">
126
- < h2 > Coming Soon...</ h2 >
127
- < p > < ul >
128
- < li > Automatic positioning</ li >
129
- < li > Built in Ruler</ li >
130
- </ ul >
131
- </ div >
132
- < div class ="clear "> </ div >
235
+ < div class ="clear "> </ div >
133
236
</ div >
134
237
</ div >
135
238
< div class ="slammer-footer ">
0 commit comments