|
1 @val img200 = src:="http://placehold.it/200x200" |
|
2 @val img250 = img(src:="http://placehold.it/250x250") |
|
3 @val sasquatch = img(src:="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg") |
|
4 |
|
5 @div |
|
6 @h1 |
|
7 Pure Extras |
|
8 @h2 |
|
9 CSS styles for images, thumbnails, badges, contextual menus and alerts. |
|
10 Depends on Pure CSS. |
|
11 @p |
|
12 Pure-Scala 1:1 reimplementation of |
|
13 @a(href:="http://github.com/tilomitra/cssextras", "pure-extras"). |
|
14 |
|
15 @h2 |
|
16 Images |
|
17 @p |
|
18 Styling of three different types are available for images, eliptical, |
|
19 rounded, bordered. To use them, just add one of these classes to the |
|
20 @code(raw("<img>")) tag. |
|
21 |
|
22 @div(pure.g) |
|
23 @div(pure.u_1_3) |
|
24 @img(Extras.pure_img_elliptical, width:="200", height:="150", |
|
25 src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png") |
|
26 @div(pure.u_1_3) |
|
27 @img(Extras.pure_img_rounded, width:="200", height:="150", |
|
28 src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png") |
|
29 @div(pure.u_1_3) |
|
30 @img(Extras.pure_img_bordered, width:="200", height:="150", |
|
31 src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png") |
|
32 |
|
33 @p |
|
34 When using class @code("Extras.pure_img_elliptical"), if the width and |
|
35 height of the image are equal, it will appear as a circle. Otherwise, it |
|
36 will appear as an ellipse. |
|
37 @img(Extras.pure_img_elliptical, width:="200", height:="200", img200) |
|
38 |
|
39 @h2 |
|
40 Thumbnails |
|
41 @p |
|
42 Add the class @code("Extras.pure_thumbnails") to the container |
|
43 @code(raw("<ul>")). Then add one of the classes, |
|
44 @code("Extras.pure_thumb_elliptical"), @code("Extras.pure_thumb_rounded"), |
|
45 or @code("Extras.pure_thumb_bordered"), to the @code(raw("<a>")). |
|
46 |
|
47 @ul(Extras.pure_thumbnails, pure.g) |
|
48 @li(pure.u_1_4) |
|
49 @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#") |
|
50 @img250 |
|
51 @li(pure.u_1_4) |
|
52 @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#") |
|
53 @img250 |
|
54 @li(pure.u_1_4) |
|
55 @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#") |
|
56 @img250 |
|
57 @li(pure.u_1_4) |
|
58 @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#") |
|
59 @img250 |
|
60 @div(Extras.caption_) |
|
61 @h3(Extras.caption_head) |
|
62 Rocket – game concept |
|
63 @p |
|
64 This is a great shot from Jozef Mak from Dribbble. |
|
65 |
|
66 @p |
|
67 Adding a @code("div(Extras.caption_)") allows you to customize the |
|
68 thumbnail with additional content. |
|
69 |
|
70 @p |
|
71 If you have YUI grids on the page, add @code("pure_u_*") for multi-column |
|
72 thumbnails that scale to fit the columns. |
|
73 |
|
74 @ul(Extras.pure_thumbnails, pure.g) |
|
75 @li(pure.u_1_4) |
|
76 @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#") |
|
77 @sasquatch |
|
78 @li(pure.u_1_4) |
|
79 @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#") |
|
80 @sasquatch |
|
81 @li(pure.u_1_4) |
|
82 @a(Extras.pure_thumb, href:="#") |
|
83 @sasquatch |
|
84 @li(pure.u_1_4) |
|
85 @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#") |
|
86 @sasquatch |
|
87 @div(Extras.caption_) |
|
88 @h3(Extras.caption_head) |
|
89 Thumbnail label |
|
90 @p |
|
91 Curabitur et sapien ac diam pharetra lacinia quis ac tortor. |
|
92 Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit |
|
93 diam in vehicula. |
|
94 |
|
95 @h2 |
|
96 Badges |
|
97 @p |
|
98 To create a badge, use a @code("span") tag, and add one of the badge |
|
99 classes as shown below. |
|
100 |
|
101 @span(Extras.pure_badge) |
|
102 A badge |
|
103 @span(Extras.pure_badge_success) |
|
104 Success badge |
|
105 @span(Extras.pure_badge_warning) |
|
106 Warning badge |
|
107 @span(Extras.pure_badge_error) |
|
108 Badges can have a bunch of content |
|
109 @span(Extras.pure_badge_info) |
|
110 Info badge |
|
111 @span(Extras.pure_badge_inverse) |
|
112 or not much at all. |
|
113 |
|
114 @h2 |
|
115 Alerts |
|
116 @p |
|
117 Create alerts by adding a class to it's @code("div"). |
|
118 |
|
119 @h3 |
|
120 Default Alert |
|
121 @p |
|
122 The default alert can be set by adding the @code("Extras.pure_alert") class name. |
|
123 @div(Extras.pure_alert) |
|
124 @label |
|
125 Welcome back, Tilo. |
|
126 |
|
127 @h3 |
|
128 Error Alert |
|
129 @p |
|
130 Alerts in red have the connotation of something going wrong. The error |
|
131 alert can be set by appending the @code("Extras.pure_alert_error") class name |
|
132 in addition to the @code("Extras.pure_alert"). |
|
133 @div(Extras.pure_alert, Extras.pure_alert_error) |
|
134 @label(strong("Breaking News")) |
|
135 'Most' of Atlanic City Underwater. Atlantic City Boardwalk Destroyed by Sandy. |
|
136 |
|
137 @h3 |
|
138 Warning Alert |
|
139 @p |
|
140 If you want to send a warning notification, use the warning alert. It can |
|
141 be set by appending the @code("Extras.pure_alert_warning") class name in |
|
142 addition to the @code("Extras.pure_alert"). |
|
143 @div(Extras.pure_alert, Extras.pure_alert_warning) |
|
144 @label(strong("Update")) |
|
145 Looks like you like the Green Bay Packers so we added the team to your Sports App! |
|
146 |
|
147 @h3 |
|
148 Success Alert |
|
149 @p |
|
150 Mission successful? Use the Success Alert! It can be set by appending the |
|
151 @code("Extras.pure_alert_success") in addition to the |
|
152 @code("Extras.pure_alert"). |
|
153 @div(Extras.pure_alert, Extras.pure_alert_success) |
|
154 @label(strong("New Badge Unlocked!")) |
|
155 You unlocked the "Paradise" badge! |
|
156 |
|
157 @h2 |
|
158 Contextual Modals |
|
159 |
|
160 @div(pure.g) |
|
161 @div(pure.u_1_2) |
|
162 @h3 |
|
163 Bottom Arrow |
|
164 @div(Extras.pure_popover, Extras.pure_popover_bottom) |
|
165 @div |
|
166 @p |
|
167 You have no new notifications. |
|
168 @p |
|
169 Receive notifications when you comment or discuss content with |
|
170 friends on Yahoo! |
|
171 @p |
|
172 @a(pure.button, Extras.pure_button_block, href:="#") |
|
173 Learn More |
|
174 @div(Extras.pure_arrow_border) |
|
175 @div(Extras.pure_arrow) |
|
176 @div(pure.u_1_2) |
|
177 @h3 |
|
178 Left Arrow |
|
179 @div(Extras.pure_popover, Extras.pure_popover_left) |
|
180 @div |
|
181 @p |
|
182 You have no new notifications. |
|
183 @p |
|
184 Receive notifications when you comment or discuss content with |
|
185 friends on Yahoo! |
|
186 @p |
|
187 @a(pure.button, Extras.pure_button_block, href:="#") |
|
188 Learn More |
|
189 @div(Extras.pure_arrow_border) |
|
190 @div(Extras.pure_arrow) |
|
191 |
|
192 @div(pure.g) |
|
193 @div(pure.u_1_2) |
|
194 @h3 |
|
195 Top Arrow |
|
196 @div(Extras.pure_popover, Extras.pure_popover_top) |
|
197 @div |
|
198 @p |
|
199 You have no new notifications. |
|
200 @p |
|
201 Receive notifications when you comment or discuss content with |
|
202 friends on Yahoo! |
|
203 @p |
|
204 @a(pure.button, Extras.pure_button_block, href:="#") |
|
205 Learn More |
|
206 @div(Extras.pure_arrow_border) |
|
207 @div(Extras.pure_arrow) |
|
208 @div(pure.u_1_2) |
|
209 @h3 |
|
210 Right Arrow |
|
211 @div(Extras.pure_popover, Extras.pure_popover_right) |
|
212 @div |
|
213 @p |
|
214 You have no new notifications. |
|
215 @p |
|
216 Receive notifications when you comment or discuss content with |
|
217 friends on Yahoo! |
|
218 @p |
|
219 @a(pure.button, Extras.pure_button_block, href:="#") |
|
220 Learn More |
|
221 @div(Extras.pure_arrow_border) |
|
222 @div(Extras.pure_arrow) |
|
223 |
|
224 @h2 |
|
225 Contextual Modals with Grids |
|
226 @p |
|
227 You can use grids within these contextual menus for interesting effects. |
|
228 @div(pure.g) |
|
229 @div(pure.u_1) |
|
230 @h4 |
|
231 You have mail. |
|
232 @div(Extras.pure_popover, Extras.pure_popover_bottom, width:="70%") |
|
233 @div(pure.g) |
|
234 @div(pure.u_1_5) |
|
235 @strong |
|
236 Yahoo! Mail |
|
237 @div(pure.u_3_5) |
|
238 You have 3 new messages. |
|
239 @div(pure.u_1_5, cls:="text-right") |
|
240 @a(pure.button, Extras.pure_button_small, href:="#") |
|
241 Read |
|
242 @div(Extras.pure_arrow_border) |
|
243 @div(Extras.pure_arrow) |
|
244 |
|
245 @h2 |
|
246 Buttons |
|
247 @h3 |
|
248 Button Types |
|
249 @p |
|
250 @a(pure.button) |
|
251 A regular button |
|
252 @a(pure.button, Extras.pure_button_selected) |
|
253 Selected |
|
254 @p |
|
255 @a(pure.button, Extras.pure_button_secondary) |
|
256 Secondary |
|
257 @a(pure.button, Extras.pure_button_error) |
|
258 Error |
|
259 @a(pure.button, Extras.pure_button_success) |
|
260 Success |
|
261 @a(pure.button, Extras.pure_button_warning) |
|
262 Warning |
|
263 @p |
|
264 @a(pure.button, Extras.pure_button_block) |
|
265 Block |
|
266 |
|
267 @h3 |
|
268 Button Sizes |
|
269 @p |
|
270 Large buttons have twice the padding of regular buttons. Apply the |
|
271 @code("Extras.pure_button_large"). |
|
272 @a(pure.button, Extras.pure_button_large) |
|
273 Big click target |
|
274 @a(pure.button, Extras.pure_button_success, Extras.pure_button_large) |
|
275 Big Success |
|
276 |
|
277 @p |
|
278 Small buttons have half the padding of regular buttons. Apply the |
|
279 @code("Extras.pure_button_small"). |
|
280 @a(pure.button, Extras.pure_button_small) |
|
281 Smaller target |
|
282 @a(pure.button, Extras.pure_button_secondary, Extras.pure_button_small) |
|
283 Smaller Secondary Button |
|
284 @a(pure.button, Extras.pure_button_warning, Extras.pure_button_small) |
|
285 Smaller Warning Button |
|
286 @a(pure.button, Extras.pure_button_error, Extras.pure_button_small) |
|
287 Smaller Error Button |
|
288 |
|
289 // vim: et ts=2 sw=2 syn=scala |