1 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 7 <title>Pure Extras</title> 8 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css"> 9 <link rel="stylesheet" type="text/css" href="https://rawgithub.com/tilomitra/prettypages/gh-pages/ui.css"> 10<link rel="stylesheet" type="text/css" href="https://rawgithub.com/tilomitra/cssextras/master/css/pure-extras.css"> 11<link rel="stylesheet" type="text/css" href="https://rawgithub.com/tilomitra/csstypography/master/css/pure-typography.css"> 12<link rel="stylesheet" type="text/css" href="https://rawgithub.com/ccampbell/rainbow/master/themes/github.css"> 13<!-- TYPEKIT -->
14<script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script>
vendor: 1 bytes, line 14
14
15<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
15 16 17 18<style> 19 20.spacer { 21 margin:8px 0 8px; 22} 23.wide-popover { 24 width:70%; 25} 26 27</style> 28</head> 29 30<body class='pure-skin-sam'> 31 32 <div class="header"> 33 34 <h1>Pure Extras</h1> 35 <h2>CSS styles for images, thumbnails, badges, contextual menus and alerts. Depends on Pure CSS.</h2> 36 37 </div> 38 <div class="content csstype"> 39 40 <h2>Install using <a href="http://bower.io">Bower</a></h2> 41 42 <pre><code data-language="html"> 43 bower install pure-extras 44 </code></pre> 45 46 <p>You can fork it from Github too.</p> 47 <p class="text-center"> 48 <a class="pure-button pure-button-success pure-button-large" href="http://github.com/tilomitra/cssextras">Fork from Github</a> 49 </p> 50 51 <h2>Images</h2> 52 <p> 53 Styling of three different types are available for images, eliptical, rounded, bordered. 54 To use them, just add one of these classes to the <code><img></code> tag 55 </p> 56 57 <div class="pure-g"> 58 59 <div class="pure-u-1-3"> 60 <img class="pure-img-eliptical" src="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png" width="200" height="150"/> 61 </div> 62 <div class="pure-u-1-3"> 63 <img class="pure-img-rounded" src="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png" width="200" height="150"/> 64 </div> 65 <div class="pure-u-1-3"> 66 <img class="pure-img-bordered" src="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png" width="200" height="150"/> 67 </div> 68 69 </div> 70 <p> 71 When using class <code>pure-img-eliptical</code>, if the width and height of the image 72 are equal, it will appear as a circle. Otherwise, it will appear as an ellipse. 73 </p> 74 <img class="pure-img-eliptical" src="http://placehold.it/200x200" width="200" height="200"/> 75 76 <h2>Thumbnails</h2> 77 <p> 78 Add the class <code>pure-thumbnails</code> to the container <code><ul></code>, 79 Then add one of the classes, <code>pure-thumb-eliptical</code>, <code>pure-thumb-rounded</code>, or <code>pure-thumb-bordered</code>, to the <code><a></code> 80 . 81 </p> 82 <ul class="pure-thumbnails pure-g-r"> 83 <li class="pure-u-1-4"> 84 <a class="pure-thumb pure-thumb-eliptical" href="#"> 85 <img src="http://placehold.it/250x250"/> 86 </a> 87 </li> 88 <li class="pure-u-1-4"> 89 <a class="pure-thumb pure-thumb-rounded" href="#"> 90 <img src="http://placehold.it/250x250"/> 91 </a> 92 </li> 93 <li class="pure-u-1-4"> 94 <a class="pure-thumb pure-thumb-bordered" href="#"><img src="http://placehold.it/250x250"></a> 95 </li> 96 <li class="pure-u-1-4"> 97 <a class="pure-thumb pure-thumb-bordered" href="#"><img src="http://placehold.it/250x250"/> 98 <div class="caption"> 99 <h3 class="caption-head">Rocket â game concept</h3> 100 <p>This is a great shot from Jozef Mak from Dribbble. 101 </p> 102 </div> 103 </a> 104 </li> 105 </ul> 106 <p> 107 Adding a <code><div class="caption"></code> allows you to customize the thumbnail with additional content. 108 </p> 109 110 111 <p> 112 if you have YUI grids on the page, add <code>pure-u-*</code> for multi-column thumbnails that scale to fit the columns. 113 </p> 114 <ul class="pure-thumbnails pure-g"> 115 <li class="pure-u-1-4"> 116 <a class="pure-thumb pure-thumb-eliptical"> 117 <img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg"/> 118 </a> 119 </li> 120 <li class="pure-u-1-4"> 121 <a class="pure-thumb pure-thumb-rounded"> 122 <img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg"/> 123 </a> 124 </li> 125 <li class="pure-u-1-4"> 126 <a class="pure-thumb"><img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg"/> 127 </a> 128 </li> 129 <li class="pure-u-1-4"> 130 <a class="pure-thumb pure-thumb-bordered"><img src="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg"/> 131 <div class="caption"> 132 <h3 class="caption-head">Thumbnail label</h3> 133 <p>Curabitur et sapien ac diam pharetra lacinia quis ac tortor. Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit diam in vehicula. 134 </p> 135 </div> 136 </a> 137 </li> 138 </ul> 139 140 141 <h2>Badges</h2> 142 <p> 143 To create a badge, use a <code><span></code> tag, and add one of the badge classes as shown below. 144 </p> 145
146 <span class="pure-badge">A badge</span> 147 <span class="pure-badge-success">Success badge</span> 148 <span class="pure-badge-warning">4</span> 149 <span class="pure-badge-error">Badges can have a bunch of content</span> 150 <span class="pure-badge-info">8</span> 151 <span class="pure-badge-inverse">or not much at all.</span> 152 153 <h2>Alerts</h2> 154 <p> 155 Create alerts by adding a class to it's <code><div></code>. 156 </p> 157 158 <h3>Default Alert</h3> 159 <p>The default alert can be set by adding the <code>pure-alert</code> class name.</p> 160 <div class="pure-alert"> 161 <label>Welcome back, Tilo.</label> 162 </div> 163 164 <h3>Error Alert</h3> 165 <p>Alerts in red have the connotation of something going wrong. The error alert can be set by appending the <code>pure-alert-error</code> class name in addition to the <code>pure-alert</code> class name.</p> 166 <div class="pure-alert pure-alert-error"> 167 <label><strong>Breaking News</strong></label> 168 'Most' of Atlanic City Underwater. Atlantic City Boardwalk Destroyed by Sandy. 169 </div> 170 171 <h3>Warning Alert</h3> 172 <p>If you want to send a warning notification, use the warning alert. It can be set by appending the <code>pure-alert-warning</code> class name in addition to the <code>pure-alert</code> class name.</p> 173 <div class="pure-alert pure-alert-warning"> 174 <label><strong>Update</strong></label> 175 Looks like you like the Green Bay Packers so we added the team to your Sports App! 176 </div> 177 178 <h3>Success Alert</h3> 179 <p>Mission successful? Use the Success Alert! It can be set by appending the <code>pure-alert-succes</code> class name in addition to the <code>pure-alert</code> class name.</p> 180 <div class="pure-alert pure-alert-success"> 181 <label><strong>New Badge Unlocked!</strong></label> 182 You unlocked the "Paradise" badge! 183 </div> 184 185 <h2>Contextual Modals</h2> 186 187 <div class="pure-g spacer"> 188 <div class="pure-u-1-2"> 189 <h3>Bottom Arrow</h3> 190 <div class="pure-popover bottom"> 191 <div> 192 <p>You have no new notifications.</p> 193 <p>Receive notifications when you comment or discuss content with friends on Yahoo!</p> 194 <p><a href="#" class="pure-button block">Learn More</a></p> 195 </div> 196 <div class="pure-arrow-border"></div> 197 <div class="pure-arrow"></div> 198 </div> 199 </div> 200 <div class="pure-u-1-2"> 201 <h3>Left Arrow</h3> 202 <div class="pure-popover left"> 203 <div> 204 <p>You have no new notifications.</p> 205 <p>Receive notifications when you comment or discuss content with friends on Yahoo!</p> 206 <p><a href="#" class="pure-button block">Learn More</a></p> 207 </div> 208 <div class="pure-arrow-border"></div> 209 <div class="pure-arrow"></div> 210 </div> 211 </div> 212 </div> 213 214 <div class="pure-g spacer"> 215 <div class="pure-u-1-2"> 216 <h3>Top Arrow</h3> 217 <div class="pure-popover top"> 218 <div> 219 <p>You have no new notifications.</p> 220 <p>Receive notifications when you comment or discuss content with friends on Yahoo!</p> 221 <p><a href="#" class="pure-button block">Learn More</a></p> 222 </div> 223 <div class="pure-arrow-border"></div> 224 <div class="pure-arrow"></div> 225 </div> 226 </div> 227 <div class="pure-u-1-2"> 228 <h3>Right Arrow</h3> 229 <div class="pure-popover right"> 230 <div> 231 <p>You have no new notifications.</p> 232 <p>Receive notifications when you comment or discuss content with friends on Yahoo!</p> 233 <p><a href="#" class="pure-button block">Learn More</a></p> 234 </div> 235 <div class="pure-arrow-border"></div> 236 <div class="pure-arrow"></div> 237 </div> 238 </div> 239 </div> 240 241 <h2>Contextual Modals with Grids</h2> 242 <p>You can use grids within these contextual menus for interesting effects.</p> 243 244 <div class="pure-g spacer"> 245 <div class="pure-u-1"> 246 <h4>You have mail.</h4> 247 <div class="pure-popover bottom wide-popover"> 248 <div class="pure-g-r"> 249 <div class="pure-u-1-5"><strong>Yahoo! Mail</strong></div> 250 <div class="pure-u-3-5">You have 3 new messages.</div> 251 <div class="pure-u-1-5 text-right"><a href="#" class="small pure-button">Read</a></div> 252 </div> 253 <div class="pure-arrow-border"></div> 254 <div class="pure-arrow"></div> 255 </div> 256 </div> 257 </div> 258 259 260 <div class="pure-g spacer"> 261 <div class="pure-u-1"> 262 <h4>Multiple Notification Sources.</h4> 263 <div class="pure-popover top wide-popover"> 264 <div class="pure-g-r spacer"> 265 <div class="pure-u-1-5"><strong>Finance:</strong></div> 266 <div class="pure-u-3-5"><strong>AAPL</strong> dropped <strong>5%</strong> to $612.26 in After Hours trading.</div> 267 <div class="pure-u-1-5 text-right"><a href="#" class="small pure-button">
267Full Chart</a></div> 268 </div> 269 <div class="pure-g-r spacer"> 270 <div class="pure-u-1-5"><strong>Messenger:</strong></div> 271 <div class="pure-u-3-5">3 unread messages from Chad Michaels.</div> 272 <div class="pure-u-1-5 text-right"><a href="#" class="small pure-button">Read</a></div> 273 </div> 274 <div class="pure-g-r spacer"> 275 <div class="pure-u-1-5"><strong>Sports:</strong></div> 276 <div class="pure-u-3-5"><strong>Final Score</strong> Oakland <strong>3-1</strong> Baltimore</div> 277 <div class="pure-u-1-5 text-right"><a href="#" class="small pure-button">Highlights</a></div> 278 </div> 279 <div class="pure-arrow-border"></div> 280 <div class="pure-arrow"></div> 281 </div> 282 </div> 283 </div> 284 285 <h2>Buttons</h2> 286 287 <p>Buttons are provided through the <code>cssbutton</code>, so you'll need the following stylesheet:</p> 288 289 <pre><code data-language="html"> 290 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssbutton/cssbutton-min.css"> 291 </code></pre> 292 293 <p><code>cssbutton</code> provides the basic button styles, but <strong>CSSExtras</strong> adds more styling on top of that, as seen below.</p> 294 295 <h3>Button Types</h3> 296 297 <p> 298 <a class="pure-button">A regular button</a> 299 <a class="pure-button pure-button-selected">Selected</a> 300 </p> 301 <p> 302 <a class="pure-button pure-button-secondary">Secondary</a> 303 <a class="pure-button pure-button-error">Error</a> 304 <a class="pure-button pure-button-success">Success</a> 305 <a class="pure-button pure-button-warning">Warning</a> 306 </p> 307 <p> 308 <a class="pure-button pure-button-block">Block</a> 309 </p> 310 311 <h3>Button Sizes</h3> 312 <p>Large buttons have twice the padding of regular buttons. Apply the <code>pure-button-large</code> class name.</p> 313 <a href="#" class="pure-button pure-button-large">Big click target</a> 314 <a href="#" class="pure-button pure-button-success pure-button-large">Big Success</a> 315 316 <p>Small buttons have half the padding of regular buttons. Apply the <code>pure-button-small</code> class name.</p> 317 <a href="#" class="pure-button pure-button-small">Smaller target</a> 318 <a href="#" class="pure-button pure-button-secondary pure-button-small">Smaller Secondary Button</a> 319 <a href="#" class="pure-button pure-button-warning pure-button-small">Smaller Warning Button</a> 320 <a href="#" class="pure-button pure-button-error pure-button-small">Smaller Error Button</a> 321 322 </div> 323
323<script src="https://rawgithub.com/ccampbell/rainbow/master/js/rainbow.min.js"></script>
323 324
324<script src="https://rawgithub.com/ccampbell/rainbow/master/js/language/generic.js"></script>
324 325</body> 326</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.