├── .gitignore
├── package.json
├── LICENSE.md
├── README.md
├── settings
    └── html.completion.cson
└── snippets
    ├── components.cson
    └── components-react.cson


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | npm-debug.log
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atom-tachyons",
 3 |   "version": "1.6.0",
 4 |   "description": "Tachyon Support with snippets and autocompletion.",
 5 |   "activationCommands": {
 6 |     "bootstrap": "toggle"
 7 |   },
 8 |   "keywords": [
 9 |     "atom",
10 |     "tachyons",
11 |     "css"
12 |   ],
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/calweb/atom-tachyons.git"
16 |   },
17 |   "license": "MIT",
18 |   "engines": {
19 |     "atom": ">0.50.0"
20 |   },
21 |   "dependencies": {},
22 |   "readmeFilename": "README.md",
23 |   "bugs": {
24 |     "url": "https://github.com/calweb/atom-tachyons/issues"
25 |   },
26 |   "homepage": "https://github.com/calweb/atom-tachyons#readme"
27 | }
28 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2016 Calvin Webster <calweb@gmail.com>
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tachyon Support for Atom
 2 | 
 3 | Provides [Tachyon][1] classes with autocompletion and [component][2] snippets.
 4 | 
 5 | ## Install:
 6 | ```bash
 7 | apm install atom-tachyons
 8 | ```
 9 | 
10 | ## Key Features:
11 | 
12 |   - Supports autocompletion of all helper classes in JavaScript, CSS and HTML
13 |   - Snippet support for all [components][2] in js, jsx, and html files.
14 | 
15 | ## Components
16 | 
17 | All [components][2] also have autocompletion support for extra options.
18 | 
19 | ### Articles
20 |   - `feature`
21 |   - `full-bleed-background`
22 |   - `large-title-text`
23 |   - `left-title-top`
24 |   - `left-title`
25 |   - `photo-essay`
26 |   - `single-column-large-title`
27 |   - `title-text-image`
28 |   - `title-text`
29 | 
30 | ### Banners
31 |   - `banner-basic`
32 | 
33 | ### Buttons
34 |   - `btn-{solid,thin,normal,thick}` (eg `btn-solid`)
35 |   - `btn-pill-{solid,thin,normal,thick}` (eg `btn-pill-solid`)
36 |   - `btn-pill-grow-{solid,thin,normal,thick}` (eg `btn-pill-grow-solid`)
37 | 
38 | ### Cards
39 |   - `album-centered`
40 |   - `album-left`
41 |   - `news-card`
42 |   - `product-card`
43 |   - `profile-card-title`
44 |   - `profile-card`
45 |   - `text-card`
46 | 
47 | ### Collections
48 |   - `albums`
49 | 
50 | ### Footers
51 |   - `simple-large-type`
52 |   - `small-print`
53 |   - `social-circles`
54 |   - `social-text`
55 |   - `social`
56 | 
57 | ### Headers
58 |   - `circle-avatar-title`
59 |   - `fixed-semi-transparent`
60 |   - `rounded-avatar-title`
61 | 
62 | ### Layout
63 |   - `centered-container`
64 |   - `flag-object-collapse`
65 |   - `flag-object`
66 |   - `four-column-collapse-two`
67 |   - `four-column`
68 |   - `two-column-collapse-one`
69 |   - `two-column`
70 | 
71 | ### Lists
72 |   - `border-spaced`
73 |   - `border-tight`
74 |   - `large-links-inline`
75 |   - `links-inline`
76 |   - `links-borders-inline`
77 |   - `slab-stat-large`
78 |   - `slab-stat-small`
79 |   - `slab-stat`
80 |   - `title-text-list`
81 | 
82 | ### Nav
83 |   - `large-title-link-list`
84 |   - `list-overflow`
85 |   - `logo-links-inline-collapse`
86 |   - `logo-links`
87 |   - `title-link-list`
88 | 
89 | 
90 | [1]: http://tachyons.io/
91 | [2]: http://tachyons.io/components/
92 | 


--------------------------------------------------------------------------------
/settings/html.completion.cson:
--------------------------------------------------------------------------------
   1 | '.text.html, .text.css, .source.js':
   2 |   'editor':
   3 |     'completions': [
   4 | 
   5 |       # Snippets
   6 |       ## Articles
   7 |       'feature'
   8 |       'full-bleed-background'
   9 |       'large-title-text'
  10 |       'left-title-top'
  11 |       'left-title'
  12 |       'photo-essay'
  13 |       'title-text-image'
  14 |       'title-text'
  15 |       ## Banners
  16 |       'basic'
  17 |       ## Buttons
  18 |       'btn-solid'
  19 |       'btn-thin'
  20 |       'btn-normal'
  21 |       'btn-thick'
  22 |       'btn-pill-solid'
  23 |       'btn-pill-thin'
  24 |       'btn-pill-normal'
  25 |       'btn-pill-thick'
  26 |       'btn-pill-grow-solid'
  27 |       'btn-pill-grow-thin'
  28 |       'btn-pill-grow-normal'
  29 |       'btn-pill-grow-thick'
  30 |       ## Cards
  31 |       'album-centered'
  32 |       'album-left'
  33 |       'news-card'
  34 |       'product-card'
  35 |       'profile-card-title'
  36 |       'profile-card'
  37 |       'text-card'
  38 |       ## Footers
  39 |       'simple-large-type'
  40 |       'small-print'
  41 |       'social-circles'
  42 |       'social-text'
  43 |       'social'
  44 |       ## Headers
  45 |       'circle-avatar-title'
  46 |       'fixed-semi-transparent'
  47 |       'rounded-avatar-title'
  48 |       ## Layout
  49 |       'centered-container'
  50 |       'flag-object-collapse'
  51 |       'flag-object'
  52 |       'four-column-collapse-two'
  53 |       'four-column'
  54 |       'two-column-collapse-one'
  55 |       'two-column'
  56 |       ## Lists
  57 |       'border-spaced'
  58 |       'border-tight'
  59 |       'large-links-inline'
  60 |       'links-inline'
  61 |       'links-borders-inline'
  62 |       'slab-stat-large'
  63 |       'slab-stat-small'
  64 |       'slab-stat'
  65 |       'title-text-list'
  66 |       ## Nav
  67 |       'large-title-link-list'
  68 |       'list-overflow'
  69 |       'logo-links-inline-collapse'
  70 |       'logo-links'
  71 |       'title-link-list'
  72 | 
  73 |       # Classes
  74 |       'border-box'
  75 |       'cover'
  76 |       'contain'
  77 |       'cover-ns'
  78 |       'contain-ns'
  79 |       'cover-m'
  80 |       'contain-m'
  81 |       'cover-l'
  82 |       'contain-l'
  83 |       'ba'
  84 |       'bt'
  85 |       'br'
  86 |       'bb'
  87 |       'bl'
  88 |       'bn'
  89 |       'ba-ns'
  90 |       'bt-ns'
  91 |       'br-ns'
  92 |       'bb-ns'
  93 |       'bl-ns'
  94 |       'bn-ns'
  95 |       'ba-m'
  96 |       'bt-m'
  97 |       'br-m'
  98 |       'bb-m'
  99 |       'bl-m'
 100 |       'bn-m'
 101 |       'ba-l'
 102 |       'bt-l'
 103 |       'br-l'
 104 |       'bb-l'
 105 |       'bl-l'
 106 |       'bn-l'
 107 |       'b--black'
 108 |       'b--near-black'
 109 |       'b--dark-grey'
 110 |       'b--mid-grey'
 111 |       'b--grey'
 112 |       'b--silver'
 113 |       'b--light-silver'
 114 |       'b--light-grey'
 115 |       'b--near-white'
 116 |       'b--white'
 117 |       'b--white-90'
 118 |       'b--white-80'
 119 |       'b--white-70'
 120 |       'b--white-60'
 121 |       'b--white-50'
 122 |       'b--white-40'
 123 |       'b--white-30'
 124 |       'b--white-20'
 125 |       'b--white-10'
 126 |       'b--white-05'
 127 |       'b--white-025'
 128 |       'b--white-0125'
 129 |       'b--black-90'
 130 |       'b--black-80'
 131 |       'b--black-70'
 132 |       'b--black-60'
 133 |       'b--black-50'
 134 |       'b--black-40'
 135 |       'b--black-30'
 136 |       'b--black-20'
 137 |       'b--black-10'
 138 |       'b--black-05'
 139 |       'b--black-025'
 140 |       'b--black-0125'
 141 |       'b--dark-red'
 142 |       'b--red'
 143 |       'b--orange'
 144 |       'b--gold'
 145 |       'b--yellow'
 146 |       'b--purple'
 147 |       'b--light-purple'
 148 |       'b--hot-pink'
 149 |       'b--dark-pink'
 150 |       'b--pink'
 151 |       'b--dark-green'
 152 |       'b--green'
 153 |       'b--navy'
 154 |       'b--blue'
 155 |       'b--dark-blue'
 156 |       'b--light-blue'
 157 |       'b--lightest-blue'
 158 |       'b--washed-blue'
 159 |       'b--washed-green'
 160 |       'b--washed-yellow'
 161 |       'b--light-pink'
 162 |       'b--light-yellow'
 163 |       'b--light-red'
 164 |       'b--transparent'
 165 |       'br0'
 166 |       'br1'
 167 |       'br2'
 168 |       'br3'
 169 |       'br4'
 170 |       'br100'
 171 |       'br--bottom'
 172 |       'br--top'
 173 |       'br--right'
 174 |       'br--left'
 175 |       'br0-ns'
 176 |       'br1-ns'
 177 |       'br2-ns'
 178 |       'br3-ns'
 179 |       'br4-ns'
 180 |       'br100-ns'
 181 |       'br--bottom-ns'
 182 |       'br--top-ns'
 183 |       'br--right-ns'
 184 |       'br--left-ns'
 185 |       'br0-m'
 186 |       'br1-m'
 187 |       'br2-m'
 188 |       'br3-m'
 189 |       'br4-m'
 190 |       'br100-m'
 191 |       'br--bottom-m'
 192 |       'br--top-m'
 193 |       'br--right-m'
 194 |       'br--left-m'
 195 |       'br0-l'
 196 |       'br1-l'
 197 |       'br2-l'
 198 |       'br3-l'
 199 |       'br4-l'
 200 |       'br100-l'
 201 |       'br--bottom-l'
 202 |       'br--top-l'
 203 |       'br--right-l'
 204 |       'br--left-l'
 205 |       'b--dotted'
 206 |       'b--dashed'
 207 |       'b--solid'
 208 |       'b--none'
 209 |       'b--dotted-ns'
 210 |       'b--dashed-ns'
 211 |       'b--solid-ns'
 212 |       'b--none-ns'
 213 |       'b--dotted-m'
 214 |       'b--dashed-m'
 215 |       'b--solid-m'
 216 |       'b--none-m'
 217 |       'b--dotted-l'
 218 |       'b--dashed-l'
 219 |       'b--solid-l'
 220 |       'b--none-l'
 221 |       'bw0'
 222 |       'bw1'
 223 |       'bw2'
 224 |       'bw3'
 225 |       'bw4'
 226 |       'bw5'
 227 |       'bt-0'
 228 |       'br-0'
 229 |       'bb-0'
 230 |       'bl-0'
 231 |       'bw0-ns'
 232 |       'bw1-ns'
 233 |       'bw2-ns'
 234 |       'bw3-ns'
 235 |       'bw4-ns'
 236 |       'bw5-ns'
 237 |       'bt-0-ns'
 238 |       'br-0-ns'
 239 |       'bb-0-ns'
 240 |       'bl-0-ns'
 241 |       'bw0-m'
 242 |       'bw1-m'
 243 |       'bw2-m'
 244 |       'bw3-m'
 245 |       'bw4-m'
 246 |       'bw5-m'
 247 |       'bt-0-m'
 248 |       'br-0-m'
 249 |       'bb-0-m'
 250 |       'bl-0-m'
 251 |       'bw0-l'
 252 |       'bw1-l'
 253 |       'bw2-l'
 254 |       'bw3-l'
 255 |       'bw4-l'
 256 |       'bw5-l'
 257 |       'bt-0-l'
 258 |       'br-0-l'
 259 |       'bb-0-l'
 260 |       'bl-0-l'
 261 |       'shadow-1'
 262 |       'shadow-2'
 263 |       'shadow-3'
 264 |       'shadow-4'
 265 |       'shadow-5'
 266 |       'shadow-1-ns'
 267 |       'shadow-2-ns'
 268 |       'shadow-3-ns'
 269 |       'shadow-4-ns'
 270 |       'shadow-5-ns'
 271 |       'shadow-1-m'
 272 |       'shadow-2-m'
 273 |       'shadow-3-m'
 274 |       'shadow-4-m'
 275 |       'shadow-5-m'
 276 |       'shadow-1-l'
 277 |       'shadow-2-l'
 278 |       'shadow-3-l'
 279 |       'shadow-4-l'
 280 |       'shadow-5-l'
 281 |       'pre'
 282 |       'top-0'
 283 |       'right-0'
 284 |       'bottom-0'
 285 |       'left-0'
 286 |       'top-1'
 287 |       'right-1'
 288 |       'bottom-1'
 289 |       'left-1'
 290 |       'top-2'
 291 |       'right-2'
 292 |       'bottom-2'
 293 |       'left-2'
 294 |       'top--1'
 295 |       'right--1'
 296 |       'bottom--1'
 297 |       'left--1'
 298 |       'top--2'
 299 |       'right--2'
 300 |       'bottom--2'
 301 |       'left--2'
 302 |       'absolute--fill'
 303 |       'top-0-ns'
 304 |       'right-0-ns'
 305 |       'bottom-0-ns'
 306 |       'left-0-ns'
 307 |       'top-1-ns'
 308 |       'right-1-ns'
 309 |       'bottom-1-ns'
 310 |       'left-1-ns'
 311 |       'top-2-ns'
 312 |       'right-2-ns'
 313 |       'bottom-2-ns'
 314 |       'left-2-ns'
 315 |       'top--1-ns'
 316 |       'right--1-ns'
 317 |       'bottom--1-ns'
 318 |       'left--1-ns'
 319 |       'top--2-ns'
 320 |       'right--2-ns'
 321 |       'bottom--2-ns'
 322 |       'left--2-ns'
 323 |       'absolute--fill-ns'
 324 |       'top-0-m'
 325 |       'right-0-m'
 326 |       'bottom-0-m'
 327 |       'left-0-m'
 328 |       'top-1-m'
 329 |       'right-1-m'
 330 |       'bottom-1-m'
 331 |       'left-1-m'
 332 |       'top-2-m'
 333 |       'right-2-m'
 334 |       'bottom-2-m'
 335 |       'left-2-m'
 336 |       'top--1-m'
 337 |       'right--1-m'
 338 |       'bottom--1-m'
 339 |       'left--1-m'
 340 |       'top--2-m'
 341 |       'right--2-m'
 342 |       'bottom--2-m'
 343 |       'left--2-m'
 344 |       'absolute--fill-m'
 345 |       'top-0-l'
 346 |       'right-0-l'
 347 |       'bottom-0-l'
 348 |       'left-0-l'
 349 |       'top-1-l'
 350 |       'right-1-l'
 351 |       'bottom-1-l'
 352 |       'left-1-l'
 353 |       'top-2-l'
 354 |       'right-2-l'
 355 |       'bottom-2-l'
 356 |       'left-2-l'
 357 |       'top--1-l'
 358 |       'right--1-l'
 359 |       'bottom--1-l'
 360 |       'left--1-l'
 361 |       'top--2-l'
 362 |       'right--2-l'
 363 |       'bottom--2-l'
 364 |       'left--2-l'
 365 |       'absolute--fill-l'
 366 |       'cf:before'
 367 |       'cf:after'
 368 |       'cf'
 369 |       'cl'
 370 |       'cr'
 371 |       'cb'
 372 |       'cn'
 373 |       'cl-ns'
 374 |       'cr-ns'
 375 |       'cb-ns'
 376 |       'cn-ns'
 377 |       'cl-m'
 378 |       'cr-m'
 379 |       'cb-m'
 380 |       'cn-m'
 381 |       'cl-l'
 382 |       'cr-l'
 383 |       'cb-l'
 384 |       'cn-l'
 385 |       'dn'
 386 |       'di'
 387 |       'db'
 388 |       'dib'
 389 |       'dit'
 390 |       'dt'
 391 |       'dtc'
 392 |       'dt-row'
 393 |       'dt-row-group'
 394 |       'dt-column'
 395 |       'dt-column-group'
 396 |       'dt--fixed'
 397 |       'dn-ns'
 398 |       'di-ns'
 399 |       'db-ns'
 400 |       'dib-ns'
 401 |       'dit-ns'
 402 |       'dt-ns'
 403 |       'dtc-ns'
 404 |       'dt-row-ns'
 405 |       'dt-row-group-ns'
 406 |       'dt-column-ns'
 407 |       'dt-column-group-ns'
 408 |       'dt--fixed-ns'
 409 |       'dn-m'
 410 |       'di-m'
 411 |       'db-m'
 412 |       'dib-m'
 413 |       'dit-m'
 414 |       'dt-m'
 415 |       'dtc-m'
 416 |       'dt-row-m'
 417 |       'dt-row-group-m'
 418 |       'dt-column-m'
 419 |       'dt-column-group-m'
 420 |       'dt--fixed-m'
 421 |       'dn-l'
 422 |       'di-l'
 423 |       'db-l'
 424 |       'dib-l'
 425 |       'dit-l'
 426 |       'dt-l'
 427 |       'dtc-l'
 428 |       'dt-row-l'
 429 |       'dt-row-group-l'
 430 |       'dt-column-l'
 431 |       'dt-column-group-l'
 432 |       'dt--fixed-l'
 433 |       'flex'
 434 |       'inline-flex'
 435 |       'flex-auto'
 436 |       'flex-none'
 437 |       'flex-column'
 438 |       'flex-row'
 439 |       'flex-wrap'
 440 |       'items-start'
 441 |       'items-end'
 442 |       'items-center'
 443 |       'items-baseline'
 444 |       'items-stretch'
 445 |       'self-start'
 446 |       'self-end'
 447 |       'self-center'
 448 |       'self-baseline'
 449 |       'self-stretch'
 450 |       'justify-start'
 451 |       'justify-end'
 452 |       'justify-center'
 453 |       'justify-between'
 454 |       'justify-around'
 455 |       'content-start'
 456 |       'content-end'
 457 |       'content-center'
 458 |       'content-between'
 459 |       'content-around'
 460 |       'content-stretch'
 461 |       'order-1'
 462 |       'order-2'
 463 |       'order-3'
 464 |       'order-4'
 465 |       'order-5'
 466 |       'order-6'
 467 |       'order-7'
 468 |       'order-8'
 469 |       'order-last'
 470 |       'flex-ns'
 471 |       'inline-flex-ns'
 472 |       'flex-auto-ns'
 473 |       'flex-none-ns'
 474 |       'flex-column-ns'
 475 |       'flex-row-ns'
 476 |       'flex-wrap-ns'
 477 |       'items-start-ns'
 478 |       'items-end-ns'
 479 |       'items-center-ns'
 480 |       'items-baseline-ns'
 481 |       'items-stretch-ns'
 482 |       'self-start-ns'
 483 |       'self-end-ns'
 484 |       'self-center-ns'
 485 |       'self-baseline-ns'
 486 |       'self-stretch-ns'
 487 |       'justify-start-ns'
 488 |       'justify-end-ns'
 489 |       'justify-center-ns'
 490 |       'justify-between-ns'
 491 |       'justify-around-ns'
 492 |       'content-start-ns'
 493 |       'content-end-ns'
 494 |       'content-center-ns'
 495 |       'content-between-ns'
 496 |       'content-around-ns'
 497 |       'content-stretch-ns'
 498 |       'order-1-ns'
 499 |       'order-2-ns'
 500 |       'order-3-ns'
 501 |       'order-4-ns'
 502 |       'order-5-ns'
 503 |       'order-6-ns'
 504 |       'order-7-ns'
 505 |       'order-8-ns'
 506 |       'order-last-ns'
 507 |       'flex-m'
 508 |       'inline-flex-m'
 509 |       'flex-auto-m'
 510 |       'flex-none-m'
 511 |       'flex-column-m'
 512 |       'flex-row-m'
 513 |       'flex-wrap-m'
 514 |       'items-start-m'
 515 |       'items-end-m'
 516 |       'items-center-m'
 517 |       'items-baseline-m'
 518 |       'items-stretch-m'
 519 |       'self-start-m'
 520 |       'self-end-m'
 521 |       'self-center-m'
 522 |       'self-baseline-m'
 523 |       'self-stretch-m'
 524 |       'justify-start-m'
 525 |       'justify-end-m'
 526 |       'justify-center-m'
 527 |       'justify-between-m'
 528 |       'justify-around-m'
 529 |       'content-start-m'
 530 |       'content-end-m'
 531 |       'content-center-m'
 532 |       'content-between-m'
 533 |       'content-around-m'
 534 |       'content-stretch-m'
 535 |       'order-1-m'
 536 |       'order-2-m'
 537 |       'order-3-m'
 538 |       'order-4-m'
 539 |       'order-5-m'
 540 |       'order-6-m'
 541 |       'order-7-m'
 542 |       'order-8-m'
 543 |       'order-last-m'
 544 |       'flex-l'
 545 |       'inline-flex-l'
 546 |       'flex-auto-l'
 547 |       'flex-none-l'
 548 |       'flex-column-l'
 549 |       'flex-row-l'
 550 |       'flex-wrap-l'
 551 |       'items-start-l'
 552 |       'items-end-l'
 553 |       'items-center-l'
 554 |       'items-baseline-l'
 555 |       'items-stretch-l'
 556 |       'self-start-l'
 557 |       'self-end-l'
 558 |       'self-center-l'
 559 |       'self-baseline-l'
 560 |       'self-stretch-l'
 561 |       'justify-start-l'
 562 |       'justify-end-l'
 563 |       'justify-center-l'
 564 |       'justify-between-l'
 565 |       'justify-around-l'
 566 |       'content-start-l'
 567 |       'content-end-l'
 568 |       'content-center-l'
 569 |       'content-between-l'
 570 |       'content-around-l'
 571 |       'content-stretch-l'
 572 |       'order-1-l'
 573 |       'order-2-l'
 574 |       'order-3-l'
 575 |       'order-4-l'
 576 |       'order-5-l'
 577 |       'order-6-l'
 578 |       'order-7-l'
 579 |       'order-8-l'
 580 |       'order-last-l'
 581 |       'fl'
 582 |       'fr'
 583 |       'fn'
 584 |       'fl-ns'
 585 |       'fr-ns'
 586 |       'fn-ns'
 587 |       'fl-m'
 588 |       'fr-m'
 589 |       'fn-m'
 590 |       'fl-l'
 591 |       'fr-l'
 592 |       'fn-l'
 593 |       'sans-serif'
 594 |       'serif'
 595 |       'system-sans-serif'
 596 |       'system-serif'
 597 |       'code'
 598 |       'courier'
 599 |       'helvetica'
 600 |       'avenir'
 601 |       'georgia'
 602 |       'times'
 603 |       'bodoni'
 604 |       'calisto'
 605 |       'garamond'
 606 |       'baskerville'
 607 |       'i'
 608 |       'fs-normal'
 609 |       'i-ns'
 610 |       'fs-normal-ns'
 611 |       'i-m'
 612 |       'fs-normal-m'
 613 |       'i-l'
 614 |       'fs-normal-l'
 615 |       'normal'
 616 |       'b'
 617 |       'fw1'
 618 |       'fw2'
 619 |       'fw3'
 620 |       'fw4'
 621 |       'fw5'
 622 |       'fw6'
 623 |       'fw7'
 624 |       'fw8'
 625 |       'fw9'
 626 |       'normal-ns'
 627 |       'b-ns'
 628 |       'fw1-ns'
 629 |       'fw2-ns'
 630 |       'fw3-ns'
 631 |       'fw4-ns'
 632 |       'fw5-ns'
 633 |       'fw6-ns'
 634 |       'fw7-ns'
 635 |       'fw8-ns'
 636 |       'fw9-ns'
 637 |       'normal-m'
 638 |       'b-m'
 639 |       'fw1-m'
 640 |       'fw2-m'
 641 |       'fw3-m'
 642 |       'fw4-m'
 643 |       'fw5-m'
 644 |       'fw6-m'
 645 |       'fw7-m'
 646 |       'fw8-m'
 647 |       'fw9-m'
 648 |       'normal-l'
 649 |       'b-l'
 650 |       'fw1-l'
 651 |       'fw2-l'
 652 |       'fw3-l'
 653 |       'fw4-l'
 654 |       'fw5-l'
 655 |       'fw6-l'
 656 |       'fw7-l'
 657 |       'fw8-l'
 658 |       'fw9-l'
 659 |       'input-reset'
 660 |       'h1'
 661 |       'h2'
 662 |       'h3'
 663 |       'h4'
 664 |       'h5'
 665 |       'h-25'
 666 |       'h-50'
 667 |       'h-75'
 668 |       'h-100'
 669 |       'h-auto'
 670 |       'h-inherit'
 671 |       'h1-ns'
 672 |       'h2-ns'
 673 |       'h3-ns'
 674 |       'h4-ns'
 675 |       'h5-ns'
 676 |       'h-25-ns'
 677 |       'h-50-ns'
 678 |       'h-75-ns'
 679 |       'h-100-ns'
 680 |       'h-auto-ns'
 681 |       'h-inherit-ns'
 682 |       'h1-m'
 683 |       'h2-m'
 684 |       'h3-m'
 685 |       'h4-m'
 686 |       'h5-m'
 687 |       'h-25-m'
 688 |       'h-50-m'
 689 |       'h-75-m'
 690 |       'h-100-m'
 691 |       'h-auto-m'
 692 |       'h-inherit-m'
 693 |       'h1-l'
 694 |       'h2-l'
 695 |       'h3-l'
 696 |       'h4-l'
 697 |       'h5-l'
 698 |       'h-25-l'
 699 |       'h-50-l'
 700 |       'h-75-l'
 701 |       'h-100-l'
 702 |       'h-auto-l'
 703 |       'h-inherit-l'
 704 |       'tracked'
 705 |       'tracked-tight'
 706 |       'tracked-mega'
 707 |       'tracked-ns'
 708 |       'tracked-tight-ns'
 709 |       'tracked-mega-ns'
 710 |       'tracked-m'
 711 |       'tracked-tight-m'
 712 |       'tracked-mega-m'
 713 |       'tracked-l'
 714 |       'tracked-tight-l'
 715 |       'tracked-mega-l'
 716 |       'lh-solid'
 717 |       'lh-title'
 718 |       'lh-copy'
 719 |       'lh-solid-ns'
 720 |       'lh-title-ns'
 721 |       'lh-copy-ns'
 722 |       'lh-solid-m'
 723 |       'lh-title-m'
 724 |       'lh-copy-m'
 725 |       'lh-solid-l'
 726 |       'lh-title-l'
 727 |       'lh-copy-l'
 728 |       'link'
 729 |       'link:link'
 730 |       'link:visited'
 731 |       'link:hover'
 732 |       'link:active'
 733 |       'link:focus'
 734 |       'list'
 735 |       'mw-100'
 736 |       'mw1'
 737 |       'mw2'
 738 |       'mw3'
 739 |       'mw4'
 740 |       'mw5'
 741 |       'mw6'
 742 |       'mw7'
 743 |       'mw8'
 744 |       'mw9'
 745 |       'mw-none'
 746 |       'mw-100-ns'
 747 |       'mw1-ns'
 748 |       'mw2-ns'
 749 |       'mw3-ns'
 750 |       'mw4-ns'
 751 |       'mw5-ns'
 752 |       'mw6-ns'
 753 |       'mw7-ns'
 754 |       'mw8-ns'
 755 |       'mw9-ns'
 756 |       'mw-none-ns'
 757 |       'mw-100-m'
 758 |       'mw1-m'
 759 |       'mw2-m'
 760 |       'mw3-m'
 761 |       'mw4-m'
 762 |       'mw5-m'
 763 |       'mw6-m'
 764 |       'mw7-m'
 765 |       'mw8-m'
 766 |       'mw9-m'
 767 |       'mw-none-m'
 768 |       'mw-100-l'
 769 |       'mw1-l'
 770 |       'mw2-l'
 771 |       'mw3-l'
 772 |       'mw4-l'
 773 |       'mw5-l'
 774 |       'mw6-l'
 775 |       'mw7-l'
 776 |       'mw8-l'
 777 |       'mw9-l'
 778 |       'mw-none-l'
 779 |       'w1'
 780 |       'w2'
 781 |       'w3'
 782 |       'w4'
 783 |       'w5'
 784 |       'w-10'
 785 |       'w-20'
 786 |       'w-25'
 787 |       'w-33'
 788 |       'w-34'
 789 |       'w-40'
 790 |       'w-50'
 791 |       'w-60'
 792 |       'w-75'
 793 |       'w-80'
 794 |       'w-100'
 795 |       'w-auto'
 796 |       'w1-ns'
 797 |       'w2-ns'
 798 |       'w3-ns'
 799 |       'w4-ns'
 800 |       'w5-ns'
 801 |       'w-10-ns'
 802 |       'w-20-ns'
 803 |       'w-25-ns'
 804 |       'w-33-ns'
 805 |       'w-34-ns'
 806 |       'w-40-ns'
 807 |       'w-50-ns'
 808 |       'w-60-ns'
 809 |       'w-75-ns'
 810 |       'w-80-ns'
 811 |       'w-100-ns'
 812 |       'w-auto-ns'
 813 |       'w1-m'
 814 |       'w2-m'
 815 |       'w3-m'
 816 |       'w4-m'
 817 |       'w5-m'
 818 |       'w-10-m'
 819 |       'w-20-m'
 820 |       'w-25-m'
 821 |       'w-33-m'
 822 |       'w-34-m'
 823 |       'w-40-m'
 824 |       'w-50-m'
 825 |       'w-60-m'
 826 |       'w-75-m'
 827 |       'w-80-m'
 828 |       'w-100-m'
 829 |       'w-auto-m'
 830 |       'w1-l'
 831 |       'w2-l'
 832 |       'w3-l'
 833 |       'w4-l'
 834 |       'w5-l'
 835 |       'w-10-l'
 836 |       'w-20-l'
 837 |       'w-25-l'
 838 |       'w-33-l'
 839 |       'w-34-l'
 840 |       'w-40-l'
 841 |       'w-50-l'
 842 |       'w-60-l'
 843 |       'w-75-l'
 844 |       'w-80-l'
 845 |       'w-100-l'
 846 |       'w-auto-l'
 847 |       'overflow-visible'
 848 |       'overflow-hidden'
 849 |       'overflow-scroll'
 850 |       'overflow-auto'
 851 |       'overflow-x-visible'
 852 |       'overflow-x-hidden'
 853 |       'overflow-x-scroll'
 854 |       'overflow-x-auto'
 855 |       'overflow-y-visible'
 856 |       'overflow-y-hidden'
 857 |       'overflow-y-scroll'
 858 |       'overflow-y-auto'
 859 |       'overflow-visible-ns'
 860 |       'overflow-hidden-ns'
 861 |       'overflow-scroll-ns'
 862 |       'overflow-auto-ns'
 863 |       'overflow-x-visible-ns'
 864 |       'overflow-x-hidden-ns'
 865 |       'overflow-x-scroll-ns'
 866 |       'overflow-x-auto-ns'
 867 |       'overflow-y-visible-ns'
 868 |       'overflow-y-hidden-ns'
 869 |       'overflow-y-scroll-ns'
 870 |       'overflow-y-auto-ns'
 871 |       'overflow-visible-m'
 872 |       'overflow-hidden-m'
 873 |       'overflow-scroll-m'
 874 |       'overflow-auto-m'
 875 |       'overflow-x-visible-m'
 876 |       'overflow-x-hidden-m'
 877 |       'overflow-x-scroll-m'
 878 |       'overflow-x-auto-m'
 879 |       'overflow-y-visible-m'
 880 |       'overflow-y-hidden-m'
 881 |       'overflow-y-scroll-m'
 882 |       'overflow-y-auto-m'
 883 |       'overflow-visible-l'
 884 |       'overflow-hidden-l'
 885 |       'overflow-scroll-l'
 886 |       'overflow-auto-l'
 887 |       'overflow-x-visible-l'
 888 |       'overflow-x-hidden-l'
 889 |       'overflow-x-scroll-l'
 890 |       'overflow-x-auto-l'
 891 |       'overflow-y-visible-l'
 892 |       'overflow-y-hidden-l'
 893 |       'overflow-y-scroll-l'
 894 |       'overflow-y-auto-l'
 895 |       'static'
 896 |       'relative'
 897 |       'absolute'
 898 |       'fixed'
 899 |       'static-ns'
 900 |       'relative-ns'
 901 |       'absolute-ns'
 902 |       'fixed-ns'
 903 |       'static-m'
 904 |       'relative-m'
 905 |       'absolute-m'
 906 |       'fixed-m'
 907 |       'static-l'
 908 |       'relative-l'
 909 |       'absolute-l'
 910 |       'fixed-l'
 911 |       'o-100'
 912 |       'o-90'
 913 |       'o-80'
 914 |       'o-70'
 915 |       'o-60'
 916 |       'o-50'
 917 |       'o-40'
 918 |       'o-30'
 919 |       'o-20'
 920 |       'o-10'
 921 |       'o-05'
 922 |       'o-025'
 923 |       'o-0'
 924 |       'black-90'
 925 |       'black-80'
 926 |       'black-70'
 927 |       'black-60'
 928 |       'black-50'
 929 |       'black-40'
 930 |       'black-30'
 931 |       'black-20'
 932 |       'black-10'
 933 |       'black-05'
 934 |       'white-90'
 935 |       'white-80'
 936 |       'white-70'
 937 |       'white-60'
 938 |       'white-50'
 939 |       'white-40'
 940 |       'white-30'
 941 |       'white-20'
 942 |       'white-10'
 943 |       'black'
 944 |       'near-black'
 945 |       'dark-gray'
 946 |       'mid-gray'
 947 |       'gray'
 948 |       'silver'
 949 |       'light-silver'
 950 |       'moon-gray'
 951 |       'light-gray'
 952 |       'near-white'
 953 |       'white'
 954 |       'dark-red'
 955 |       'red'
 956 |       'orange'
 957 |       'gold'
 958 |       'yellow'
 959 |       'purple'
 960 |       'light-purple'
 961 |       'hot-pink'
 962 |       'dark-pink'
 963 |       'pink'
 964 |       'dark-green'
 965 |       'green'
 966 |       'navy'
 967 |       'dark-blue'
 968 |       'blue'
 969 |       'light-blue'
 970 |       'lightest-blue'
 971 |       'washed-blue'
 972 |       'washed-green'
 973 |       'washed-yellow'
 974 |       'light-pink'
 975 |       'light-yellow'
 976 |       'light-red'
 977 |       'bg-black-90'
 978 |       'bg-black-80'
 979 |       'bg-black-70'
 980 |       'bg-black-60'
 981 |       'bg-black-50'
 982 |       'bg-black-40'
 983 |       'bg-black-30'
 984 |       'bg-black-20'
 985 |       'bg-black-10'
 986 |       'bg-black-05'
 987 |       'bg-white-90'
 988 |       'bg-white-80'
 989 |       'bg-white-70'
 990 |       'bg-white-60'
 991 |       'bg-white-50'
 992 |       'bg-white-40'
 993 |       'bg-white-30'
 994 |       'bg-white-20'
 995 |       'bg-white-10'
 996 |       'bg-black'
 997 |       'bg-near-black'
 998 |       'bg-dark-gray'
 999 |       'bg-mid-gray'
1000 |       'bg-gray'
1001 |       'bg-silver'
1002 |       'bg-light-silver'
1003 |       'bg-moon-gray'
1004 |       'bg-light-gray'
1005 |       'bg-near-white'
1006 |       'bg-white'
1007 |       'bg-dark-red'
1008 |       'bg-red'
1009 |       'bg-orange'
1010 |       'bg-gold'
1011 |       'bg-yellow'
1012 |       'bg-purple'
1013 |       'bg-light-purple'
1014 |       'bg-hot-pink'
1015 |       'bg-dark-pink'
1016 |       'bg-pink'
1017 |       'bg-dark-green'
1018 |       'bg-green'
1019 |       'bg-navy'
1020 |       'bg-dark-blue'
1021 |       'bg-blue'
1022 |       'bg-light-blue'
1023 |       'bg-lightest-blue'
1024 |       'bg-washed-blue'
1025 |       'bg-washed-green'
1026 |       'bg-washed-yellow'
1027 |       'bg-light-pink'
1028 |       'bg-light-yellow'
1029 |       'bg-light-red'
1030 |       'hover-bg-black'
1031 |       'hover-bg-near-black'
1032 |       'hover-bg-dark-gray'
1033 |       'hover-bg-mid-gray'
1034 |       'hover-bg-gray'
1035 |       'hover-bg-silver'
1036 |       'hover-bg-light-silver'
1037 |       'hover-bg-moon-gray'
1038 |       'hover-bg-light-gray'
1039 |       'hover-bg-near-white'
1040 |       'hover-bg-white'
1041 |       'hover-bg-dark-red'
1042 |       'hover-bg-red'
1043 |       'hover-bg-orange'
1044 |       'hover-bg-gold'
1045 |       'hover-bg-yellow'
1046 |       'hover-bg-purple'
1047 |       'hover-bg-light-purple'
1048 |       'hover-bg-hot-pink'
1049 |       'hover-bg-dark-pink'
1050 |       'hover-bg-pink'
1051 |       'hover-bg-dark-green'
1052 |       'hover-bg-green'
1053 |       'hover-bg-navy'
1054 |       'hover-bg-dark-blue'
1055 |       'hover-bg-blue'
1056 |       'hover-bg-light-blue'
1057 |       'hover-bg-lightest-blue'
1058 |       'hover-bg-washed-blue'
1059 |       'hover-bg-washed-green'
1060 |       'hover-bg-washed-yellow'
1061 |       'hover-bg-light-pink'
1062 |       'hover-bg-light-yellow'
1063 |       'hover-bg-light-red'
1064 |       'pa0'
1065 |       'pa1'
1066 |       'pa2'
1067 |       'pa3'
1068 |       'pa4'
1069 |       'pa5'
1070 |       'pa6'
1071 |       'pa7'
1072 |       'p10'
1073 |       'p11'
1074 |       'p12'
1075 |       'p13'
1076 |       'p14'
1077 |       'p15'
1078 |       'p16'
1079 |       'p17'
1080 |       'pr0'
1081 |       'pr1'
1082 |       'pr2'
1083 |       'pr3'
1084 |       'pr4'
1085 |       'pr5'
1086 |       'pr6'
1087 |       'pr7'
1088 |       'pb0'
1089 |       'pb1'
1090 |       'pb2'
1091 |       'pb3'
1092 |       'pb4'
1093 |       'pb5'
1094 |       'pb6'
1095 |       'pb7'
1096 |       'pt0'
1097 |       'pt1'
1098 |       'pt2'
1099 |       'pt3'
1100 |       'pt4'
1101 |       'pt5'
1102 |       'pt6'
1103 |       'pt7'
1104 |       'pv0'
1105 |       'pv1'
1106 |       'pv2'
1107 |       'pv3'
1108 |       'pv4'
1109 |       'pv5'
1110 |       'pv6'
1111 |       'pv7'
1112 |       'ph0'
1113 |       'ph1'
1114 |       'ph2'
1115 |       'ph3'
1116 |       'ph4'
1117 |       'ph5'
1118 |       'ph6'
1119 |       'ph7'
1120 |       'ma0'
1121 |       'ma1'
1122 |       'ma2'
1123 |       'ma3'
1124 |       'ma4'
1125 |       'ma5'
1126 |       'ma6'
1127 |       'ma7'
1128 |       'm10'
1129 |       'm11'
1130 |       'm12'
1131 |       'm13'
1132 |       'm14'
1133 |       'm15'
1134 |       'm16'
1135 |       'm17'
1136 |       'mr0'
1137 |       'mr1'
1138 |       'mr2'
1139 |       'mr3'
1140 |       'mr4'
1141 |       'mr5'
1142 |       'mr6'
1143 |       'mr7'
1144 |       'mb0'
1145 |       'mb1'
1146 |       'mb2'
1147 |       'mb3'
1148 |       'mb4'
1149 |       'mb5'
1150 |       'mb6'
1151 |       'mb7'
1152 |       'mt0'
1153 |       'mt1'
1154 |       'mt2'
1155 |       'mt3'
1156 |       'mt4'
1157 |       'mt5'
1158 |       'mt6'
1159 |       'mt7'
1160 |       'mr0'
1161 |       'mv1'
1162 |       'mv2'
1163 |       'mv3'
1164 |       'mv4'
1165 |       'mv5'
1166 |       'mv6'
1167 |       'mv7'
1168 |       'mh0'
1169 |       'mh1'
1170 |       'mh2'
1171 |       'mh3'
1172 |       'mh4'
1173 |       'mh5'
1174 |       'mh6'
1175 |       'mh7'
1176 |       'pa0-ns'
1177 |       'pa1-ns'
1178 |       'pa2-ns'
1179 |       'pa3-ns'
1180 |       'pa4-ns'
1181 |       'pa5-ns'
1182 |       'pa6-ns'
1183 |       'pa7-ns'
1184 |       'p10-ns'
1185 |       'p11-ns'
1186 |       'p12-ns'
1187 |       'p13-ns'
1188 |       'p14-ns'
1189 |       'p15-ns'
1190 |       'p16-ns'
1191 |       'p17-ns'
1192 |       'pr0-ns'
1193 |       'pr1-ns'
1194 |       'pr2-ns'
1195 |       'pr3-ns'
1196 |       'pr4-ns'
1197 |       'pr5-ns'
1198 |       'pr6-ns'
1199 |       'pr7-ns'
1200 |       'pb0-ns'
1201 |       'pb1-ns'
1202 |       'pb2-ns'
1203 |       'pb3-ns'
1204 |       'pb4-ns'
1205 |       'pb5-ns'
1206 |       'pb6-ns'
1207 |       'pb7-ns'
1208 |       'pt0-ns'
1209 |       'pt1-ns'
1210 |       'pt2-ns'
1211 |       'pt3-ns'
1212 |       'pt4-ns'
1213 |       'pt5-ns'
1214 |       'pt6-ns'
1215 |       'pt7-ns'
1216 |       'pv0-ns'
1217 |       'pv1-ns'
1218 |       'pv2-ns'
1219 |       'pv3-ns'
1220 |       'pv4-ns'
1221 |       'pv5-ns'
1222 |       'pv6-ns'
1223 |       'pv7-ns'
1224 |       'ph0-ns'
1225 |       'ph1-ns'
1226 |       'ph2-ns'
1227 |       'ph3-ns'
1228 |       'ph4-ns'
1229 |       'ph5-ns'
1230 |       'ph6-ns'
1231 |       'ph7-ns'
1232 |       'ma0-ns'
1233 |       'ma1-ns'
1234 |       'ma2-ns'
1235 |       'ma3-ns'
1236 |       'ma4-ns'
1237 |       'ma5-ns'
1238 |       'ma6-ns'
1239 |       'ma7-ns'
1240 |       'm10-ns'
1241 |       'm11-ns'
1242 |       'm12-ns'
1243 |       'm13-ns'
1244 |       'm14-ns'
1245 |       'm15-ns'
1246 |       'm16-ns'
1247 |       'm17-ns'
1248 |       'mr0-ns'
1249 |       'mr1-ns'
1250 |       'mr2-ns'
1251 |       'mr3-ns'
1252 |       'mr4-ns'
1253 |       'mr5-ns'
1254 |       'mr6-ns'
1255 |       'mr7-ns'
1256 |       'mb0-ns'
1257 |       'mb1-ns'
1258 |       'mb2-ns'
1259 |       'mb3-ns'
1260 |       'mb4-ns'
1261 |       'mb5-ns'
1262 |       'mb6-ns'
1263 |       'mb7-ns'
1264 |       'mt0-ns'
1265 |       'mt1-ns'
1266 |       'mt2-ns'
1267 |       'mt3-ns'
1268 |       'mt4-ns'
1269 |       'mt5-ns'
1270 |       'mt6-ns'
1271 |       'mt7-ns'
1272 |       'mv0-ns'
1273 |       'mv1-ns'
1274 |       'mv2-ns'
1275 |       'mv3-ns'
1276 |       'mv4-ns'
1277 |       'mv5-ns'
1278 |       'mv6-ns'
1279 |       'mv7-ns'
1280 |       'mh0-ns'
1281 |       'mh1-ns'
1282 |       'mh2-ns'
1283 |       'mh3-ns'
1284 |       'mh4-ns'
1285 |       'mh5-ns'
1286 |       'mh6-ns'
1287 |       'mh7-ns'
1288 |       'pa0-m'
1289 |       'pa1-m'
1290 |       'pa2-m'
1291 |       'pa3-m'
1292 |       'pa4-m'
1293 |       'pa5-m'
1294 |       'pa6-m'
1295 |       'pa7-m'
1296 |       'p10-m'
1297 |       'p11-m'
1298 |       'p12-m'
1299 |       'p13-m'
1300 |       'p14-m'
1301 |       'p15-m'
1302 |       'p16-m'
1303 |       'p17-m'
1304 |       'pr0-m'
1305 |       'pr1-m'
1306 |       'pr2-m'
1307 |       'pr3-m'
1308 |       'pr4-m'
1309 |       'pr5-m'
1310 |       'pr6-m'
1311 |       'pr7-m'
1312 |       'pb0-m'
1313 |       'pb1-m'
1314 |       'pb2-m'
1315 |       'pb3-m'
1316 |       'pb4-m'
1317 |       'pb5-m'
1318 |       'pb6-m'
1319 |       'pb7-m'
1320 |       'pt0-m'
1321 |       'pt1-m'
1322 |       'pt2-m'
1323 |       'pt3-m'
1324 |       'pt4-m'
1325 |       'pt5-m'
1326 |       'pt6-m'
1327 |       'pt7-m'
1328 |       'pv0-m'
1329 |       'pv1-m'
1330 |       'pv2-m'
1331 |       'pv3-m'
1332 |       'pv4-m'
1333 |       'pv5-m'
1334 |       'pv6-m'
1335 |       'pv7-m'
1336 |       'ph0-m'
1337 |       'ph1-m'
1338 |       'ph2-m'
1339 |       'ph3-m'
1340 |       'ph4-m'
1341 |       'ph5-m'
1342 |       'ph6-m'
1343 |       'ph7-m'
1344 |       'ma0-m'
1345 |       'ma1-m'
1346 |       'ma2-m'
1347 |       'ma3-m'
1348 |       'ma4-m'
1349 |       'ma5-m'
1350 |       'ma6-m'
1351 |       'ma7-m'
1352 |       'm10-m'
1353 |       'm11-m'
1354 |       'm12-m'
1355 |       'm13-m'
1356 |       'm14-m'
1357 |       'm15-m'
1358 |       'm16-m'
1359 |       'm17-m'
1360 |       'mr0-m'
1361 |       'mr1-m'
1362 |       'mr2-m'
1363 |       'mr3-m'
1364 |       'mr4-m'
1365 |       'mr5-m'
1366 |       'mr6-m'
1367 |       'mr7-m'
1368 |       'mb0-m'
1369 |       'mb1-m'
1370 |       'mb2-m'
1371 |       'mb3-m'
1372 |       'mb4-m'
1373 |       'mb5-m'
1374 |       'mb6-m'
1375 |       'mb7-m'
1376 |       'mt0-m'
1377 |       'mt1-m'
1378 |       'mt2-m'
1379 |       'mt3-m'
1380 |       'mt4-m'
1381 |       'mt5-m'
1382 |       'mt6-m'
1383 |       'mt7-m'
1384 |       'mv0-m'
1385 |       'mv1-m'
1386 |       'mv2-m'
1387 |       'mv3-m'
1388 |       'mv4-m'
1389 |       'mv5-m'
1390 |       'mv6-m'
1391 |       'mv7-m'
1392 |       'mh0-m'
1393 |       'mh1-m'
1394 |       'mh2-m'
1395 |       'mh3-m'
1396 |       'mh4-m'
1397 |       'mh5-m'
1398 |       'mh6-m'
1399 |       'mh7-m'
1400 |       'pa0-l'
1401 |       'pa1-l'
1402 |       'pa2-l'
1403 |       'pa3-l'
1404 |       'pa4-l'
1405 |       'pa5-l'
1406 |       'pa6-l'
1407 |       'pa7-l'
1408 |       'p10-l'
1409 |       'p11-l'
1410 |       'p12-l'
1411 |       'p13-l'
1412 |       'p14-l'
1413 |       'p15-l'
1414 |       'p16-l'
1415 |       'p17-l'
1416 |       'pr0-l'
1417 |       'pr1-l'
1418 |       'pr2-l'
1419 |       'pr3-l'
1420 |       'pr4-l'
1421 |       'pr5-l'
1422 |       'pr6-l'
1423 |       'pr7-l'
1424 |       'pb0-l'
1425 |       'pb1-l'
1426 |       'pb2-l'
1427 |       'pb3-l'
1428 |       'pb4-l'
1429 |       'pb5-l'
1430 |       'pb6-l'
1431 |       'pb7-l'
1432 |       'pt0-l'
1433 |       'pt1-l'
1434 |       'pt2-l'
1435 |       'pt3-l'
1436 |       'pt4-l'
1437 |       'pt5-l'
1438 |       'pt6-l'
1439 |       'pt7-l'
1440 |       'pv0-l'
1441 |       'pv1-l'
1442 |       'pv2-l'
1443 |       'pv3-l'
1444 |       'pv4-l'
1445 |       'pv5-l'
1446 |       'pv6-l'
1447 |       'pv7-l'
1448 |       'ph0-l'
1449 |       'ph1-l'
1450 |       'ph2-l'
1451 |       'ph3-l'
1452 |       'ph4-l'
1453 |       'ph5-l'
1454 |       'ph6-l'
1455 |       'ph7-l'
1456 |       'ma0-l'
1457 |       'ma1-l'
1458 |       'ma2-l'
1459 |       'ma3-l'
1460 |       'ma4-l'
1461 |       'ma5-l'
1462 |       'ma6-l'
1463 |       'ma7-l'
1464 |       'm10-l'
1465 |       'm11-l'
1466 |       'm12-l'
1467 |       'm13-l'
1468 |       'm14-l'
1469 |       'm15-l'
1470 |       'm16-l'
1471 |       'm17-l'
1472 |       'mr0-l'
1473 |       'mr1-l'
1474 |       'mr2-l'
1475 |       'mr3-l'
1476 |       'mr4-l'
1477 |       'mr5-l'
1478 |       'mr6-l'
1479 |       'mr7-l'
1480 |       'mb0-l'
1481 |       'mb1-l'
1482 |       'mb2-l'
1483 |       'mb3-l'
1484 |       'mb4-l'
1485 |       'mb5-l'
1486 |       'mb6-l'
1487 |       'mb7-l'
1488 |       'mt0-l'
1489 |       'mt1-l'
1490 |       'mt2-l'
1491 |       'mt3-l'
1492 |       'mt4-l'
1493 |       'mt5-l'
1494 |       'mt6-l'
1495 |       'mt7-l'
1496 |       'mv0-l'
1497 |       'mv1-l'
1498 |       'mv2-l'
1499 |       'mv3-l'
1500 |       'mv4-l'
1501 |       'mv5-l'
1502 |       'mv6-l'
1503 |       'mv7-l'
1504 |       'mh0-l'
1505 |       'mh1-l'
1506 |       'mh2-l'
1507 |       'mh3-l'
1508 |       'mh4-l'
1509 |       'mh5-l'
1510 |       'mh6-l'
1511 |       'mh7-l'
1512 |       'collapse'
1513 |       'strike'
1514 |       'underline'
1515 |       'no-underline'
1516 |       'strike-ns'
1517 |       'underline-ns'
1518 |       'no-underline-ns'
1519 |       'strike-m'
1520 |       'underline-m'
1521 |       'no-underline-m'
1522 |       'strike-l'
1523 |       'underline-l'
1524 |       'no-underline-l'
1525 |       'tl'
1526 |       'tr'
1527 |       'tc'
1528 |       'tl-ns'
1529 |       'tr-ns'
1530 |       'tc-ns'
1531 |       'tl-m'
1532 |       'tr-m'
1533 |       'tc-m'
1534 |       'tl-l'
1535 |       'tr-l'
1536 |       'tc-l'
1537 |       'ttc'
1538 |       'ttl'
1539 |       'ttu'
1540 |       'ttn'
1541 |       'ttc-ns'
1542 |       'ttl-ns'
1543 |       'ttu-ns'
1544 |       'ttn-ns'
1545 |       'ttc-m'
1546 |       'ttl-m'
1547 |       'ttu-m'
1548 |       'ttn-m'
1549 |       'ttc-l'
1550 |       'ttl-l'
1551 |       'ttu-l'
1552 |       'ttn-l'
1553 |       'f-6'
1554 |       'f-headline'
1555 |       'f-5'
1556 |       'f-subheadline'
1557 |       'f1'
1558 |       'f2'
1559 |       'f3'
1560 |       'f4'
1561 |       'f5'
1562 |       'f6'
1563 |       'f-6-ns'
1564 |       'f-headline-ns'
1565 |       'f-5-ns'
1566 |       'f-subheadline-ns'
1567 |       'f1-ns'
1568 |       'f2-ns'
1569 |       'f3-ns'
1570 |       'f4-ns'
1571 |       'f5-ns'
1572 |       'f6-ns'
1573 |       'f-6-m'
1574 |       'f-headline-m'
1575 |       'f-5-m'
1576 |       'f-subheadline-m'
1577 |       'f1-m'
1578 |       'f2-m'
1579 |       'f3-m'
1580 |       'f4-m'
1581 |       'f5-m'
1582 |       'f6-m'
1583 |       'f-6-l'
1584 |       'f-headline-l'
1585 |       'f-5-l'
1586 |       'f-subheadline-l'
1587 |       'f1-l'
1588 |       'f2-l'
1589 |       'f3-l'
1590 |       'f4-l'
1591 |       'f5-l'
1592 |       'f6-l'
1593 |       'measure'
1594 |       'measure-wide'
1595 |       'measure-narrow'
1596 |       'indent'
1597 |       'small-caps'
1598 |       'truncate'
1599 |       'measure-ns'
1600 |       'measure-wide-ns'
1601 |       'measure-narrow-ns'
1602 |       'indent-ns'
1603 |       'small-caps-ns'
1604 |       'truncate-ns'
1605 |       'measure-m'
1606 |       'measure-wide-m'
1607 |       'measure-narrow-m'
1608 |       'indent-m'
1609 |       'small-caps-m'
1610 |       'truncate-m'
1611 |       'measure-l'
1612 |       'measure-wide-l'
1613 |       'measure-narrow-l'
1614 |       'indent-l'
1615 |       'small-caps-l'
1616 |       'truncate-l'
1617 |       'aspect-ratio'
1618 |       'aspect-ratio--16x9'
1619 |       'aspect-ratio--4x3'
1620 |       'aspect-ratio--8x5'
1621 |       'aspect-ratio--object'
1622 |       'overflow-container'
1623 |       'center'
1624 |       'clip'
1625 |       'clip-ns'
1626 |       'clip-m'
1627 |       'clip-l'
1628 |       'ws-normal'
1629 |       'nowrap'
1630 |       'pre'
1631 |       'ws-normal-ns'
1632 |       'nowrap-ns'
1633 |       'pre-ns'
1634 |       'ws-normal-m'
1635 |       'nowrap-m'
1636 |       'pre-m'
1637 |       'ws-normal-l'
1638 |       'nowrap-l'
1639 |       'pre-l'
1640 |       'v-base'
1641 |       'v-mid'
1642 |       'v-top'
1643 |       'v-btm'
1644 |       'v-base-ns'
1645 |       'v-mid-ns'
1646 |       'v-top-ns'
1647 |       'v-btm-ns'
1648 |       'v-base-m'
1649 |       'v-mid-m'
1650 |       'v-top-m'
1651 |       'v-btm-m'
1652 |       'v-base-l'
1653 |       'v-mid-l'
1654 |       'v-top-l'
1655 |       'v-btm-l'
1656 |       'dim'
1657 |       'hide-child'
1658 |       'child'
1659 |       'underline-hover'
1660 |       'grow'
1661 |       'grow-large'
1662 |       'pointer'
1663 |       'shadow-hover'
1664 |       'debug'
1665 |     ]
1666 | 


--------------------------------------------------------------------------------
/snippets/components.cson:
--------------------------------------------------------------------------------
   1 | ".text.html":
   2 | 
   3 |   'Banner Basic':
   4 |     'prefix': 'banner-basic'
   5 |     'body': """
   6 |     <article class="mw7 center ph3 ph5-ns tc br2 pv5 ${1:bg-washed-green} ${2:dark-green} mb5">
   7 |       <h1 class="fw6 f3 f2-ns lh-title mt0 mb3">
   8 |         This is a tagline. For x.
   9 |       </h1>
  10 |       <h2 class="fw2 f4 lh-copy mt0 mb3">
  11 |         This will change things. And we want you to be involved. This text needs to
  12 |         be longer for testing sake.
  13 |       </h2>
  14 |       <p class="fw1 f5 mt0 mb3">
  15 |         Sign up for beta access or learn more about x.
  16 |       </p>
  17 |       <div>
  18 |         <a class="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3"
  19 |           href="#">
  20 |           Sign Up
  21 |         </a>
  22 |         <a class="f6 br-pill dark-green no-underline ba grow pv2 ph3 dib"
  23 |           href="#">
  24 |           Learn More
  25 |         </a>
  26 |       </div>
  27 |     </article>
  28 |     """
  29 | 
  30 |   'Button Solid':
  31 |     'prefix': 'btn-solid'
  32 |     'body': """
  33 |     <a class="f6 link dim br2 ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Text}</a>
  34 |     """
  35 |   'Button Thin':
  36 |     'prefix': 'btn-thin'
  37 |     'body': """
  38 |     <a class="f6 link dim br2 ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  39 |     """
  40 |   'Button Normal':
  41 |     'prefix': 'btn-normal'
  42 |     'body': """
  43 |     <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  44 |     """
  45 |   'Button Thick':
  46 |     'prefix': 'btn-thick'
  47 |     'body': """
  48 |     <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  49 |     """
  50 | 
  51 |   'Button Pill Solid':
  52 |     'prefix': 'btn-pill-solid'
  53 |     'body': """
  54 |     <a class="f6 link dim br-pill ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Pill Text}</a>
  55 |     """
  56 |   'Button Pill Thin':
  57 |     'prefix': 'btn-pill-thin'
  58 |     'body': """
  59 |     <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  60 |     """
  61 |   'Button Pill Normal':
  62 |     'prefix': 'btn-pill-normal'
  63 |     'body': """
  64 |     <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  65 |     """
  66 |   'Button Pill Thick':
  67 |     'prefix': 'btn-pill-thick'
  68 |     'body': """
  69 |     <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  70 |     """
  71 | 
  72 |   'Button Pill Grow Solid':
  73 |     'prefix': 'btn-pill-grow-solid'
  74 |     'body': """
  75 |     <a class="f6 grow link dim br-pill ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Pill Grow Text}</a>
  76 |     """
  77 |   'Button Pill Grow Thin':
  78 |     'prefix': 'btn-pill-grow-thin'
  79 |     'body': """
  80 |     <a class="f6 grow link dim br-pill ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  81 |     """
  82 |   'Button Pill Grow Normal':
  83 |     'prefix': 'btn-pill-grow-normal'
  84 |     'body': """
  85 |     <a class="f6 grow link dim br-pill ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  86 |     """
  87 |   'Button Pill Grow Thick':
  88 |     'prefix': 'btn-pill-grow-thick'
  89 |     'body': """
  90 |     <a class="f6 grow link dim br-pill ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  91 |     """
  92 | 
  93 |   'Album Centered':
  94 |     'prefix': 'album-centered'
  95 |     'body': """
  96 |     <a class="dib mw5 tc black link dim"
  97 |        title="Frank Ocean's Blonde on Apple Music"
  98 |        href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
  99 | 
 100 |       <img class="db ba b--black-10"/
 101 |            alt="Frank Ocean Blonde Album Cover"
 102 |            src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
 103 |       >
 104 | 
 105 |       <dl class="mt2 f6 lh-copy">
 106 |         <dt class="clip">Title</dt>
 107 |         <dd class="ml0">Blonde</dd>
 108 |         <dt class="clip">Artist</dt>
 109 |         <dd class="ml0 gray">Frank Ocean</dd>
 110 |       </dl>
 111 |     </a>
 112 |     """
 113 | 
 114 |   'Album Left':
 115 |     'prefix': 'album-left'
 116 |     'body': """
 117 |     <a class="dib mw5 black link dim"
 118 |        title="Frank Ocean's Blonde on Apple Music"
 119 |        href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
 120 | 
 121 |       <img class="db ba b--black-10"/
 122 |            alt="Frank Ocean Blonde Album Cover"
 123 |            src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
 124 |       >
 125 | 
 126 |       <dl class="mt2 f6 lh-copy">
 127 |         <dt class="clip">Title</dt>
 128 |         <dd class="ml0 fw9">Blonde</dd>
 129 |         <dt class="clip">Artist</dt>
 130 |         <dd class="ml0 gray">Frank Ocean</dd>
 131 |       </dl>
 132 |     </a>
 133 |     """
 134 | 
 135 |   'News Card':
 136 |     'prefix': 'news-card'
 137 |     'body': """
 138 |     <article class="bg-white center mw5 ba b--black-10 mv4">
 139 |       <div class="pv2 ph3">
 140 |          <h1 class="f6 ttu tracked">$1</h1>
 141 |       </div>
 142 |       <img src="${2:http://lorempixel.com/400/200/animals/}" class="w-100 db" alt="$3">
 143 |       <div class="pa3">
 144 |         <a href="#" class="link dim lh-title">$4</a>
 145 |         <small class="gray db pv2">${5: AMP - <time>6 hours ago</time>}</small>
 146 |       </div>
 147 |     </article>
 148 |     """
 149 | 
 150 |   'Product Card':
 151 |     'prefix': 'product-card'
 152 |     'body': """
 153 |     <article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
 154 |       <img src="${1:http://placekitten.com/g/600/300}" class="db w-100 br2 br--top" alt="$2">
 155 |       <div class="pa2 ph3-ns pb3-ns">
 156 |         <div class="dt w-100 mt1">
 157 |           <div class="dtc">
 158 |             <h1 class="f5 f4-ns mv0">${3:Cat}</h1>
 159 |           </div>
 160 |           <div class="dtc tr">
 161 |             <h2 class="f5 mv0">${4:$1000.00}</h2>
 162 |           </div>
 163 |         </div>
 164 |         <p class="f6 lh-copy measure mt2 mid-gray">
 165 |           $5
 166 |         </p>
 167 |       </div>
 168 |     </article>
 169 |     """
 170 | 
 171 |   'Profile Card Title Subtitle':
 172 |     'prefix': 'profile-card-title'
 173 |     'body': """
 174 |     <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
 175 |       <div class="tc">
 176 |         <img src="${1:http://placekitten.com/g/600/300}" class="br-100 h4 w4 dib ba b--black-05 pa2" title="${2:Kitty}">
 177 |         <h1 class="f3 mb2">${3:Title}</h1>
 178 |         <h2 class="f5 fw4 gray mt0">${4:Subtitle}</h2>
 179 |       </div>
 180 |     </article>
 181 |     """
 182 | 
 183 |   'Profile Card':
 184 |     'prefix': 'profile-card'
 185 |     'body': """
 186 |     <article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
 187 |       <div class="tc">
 188 |         <img src="${1:http://placekitten.com/g/600/300}" class="br-100 h3 w3 dib" title="${2:Kitty}">
 189 |         <h1 class="f4">${3:Title}</h1>
 190 |         <hr class="mw3 bb bw1 b--black-10">
 191 |       </div>
 192 |       <p class="lh-copy measure center f6 black-70">
 193 |         $4
 194 |       </p>
 195 |     </article>
 196 |     """
 197 | 
 198 |   'Text Card':
 199 |     'prefix': 'text-card'
 200 |     'body': """
 201 |     <article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
 202 |       <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">$1</h1>
 203 |       <div class="pa3 bt b--black-10">
 204 |         <p class="f6 f5-ns lh-copy measure">
 205 |           $2
 206 |         </p>
 207 |       </div>
 208 |     </article>
 209 |     """
 210 | 
 211 |   'Feature':
 212 |     'prefix': 'feature'
 213 |     'body': """
 214 |     <article class="athelas">
 215 |       <div class="vh-100 dt w-100 tc bg-dark-gray white cover" style="background:url(https://hd.unsplash.com/uploads/1413152676137eccd463c/61606b7b) no-repeat center;">
 216 |         <div class="dtc v-mid">
 217 |           <header class="white-70">
 218 |             <h2 class="f6 fw1 ttu tracked mb2 lh-title">Issue Six</h2>
 219 |             <h3 class="f6 fw1 lh-title">Summer MMXVI</h3>
 220 |           </header>
 221 |           <h1 class="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
 222 |           <blockquote class="ph0 mh0 measure f4 lh-copy center">
 223 |             <p class="fw1 white-70">
 224 |               It's the space you put between the notes that make the music.
 225 |             </p>
 226 |             <cite class="f6 ttu tracked fs-normal">Massimo Vignelli</cite>
 227 |           </blockquote>
 228 |         </div>
 229 |       </div>
 230 |       <div class="center measure-wide f5 pv5 lh-copy ph2">
 231 |         <h1 class="f1 lh-title">The repercussion of ugliness is endless</h1>
 232 |         <p>
 233 |           The choice of paper size is one of the  rst of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
 234 |         </p>
 235 |         <p>
 236 |           The international Standard paper sizes, called the A series, is based
 237 |           on a golden rectangle, the divine proportion. It is extremely handsome
 238 |           and practical as well. It is adopted by many countries around the world
 239 |           and is based on the German DIN metric Standards. The United States uses
 240 |           a basic letter size (8 1/2 x 11”) of ugly proportions, and results in
 241 |           complete chaos with an endless amount of paper sizes. It is a
 242 |           by-product of the culture of free enterprise, competition and waste.
 243 |           Just another example of the misinterpretations of freedom.
 244 |         </p>
 245 |         <p>
 246 |           These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 -
 247 |           A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 -
 248 |           A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.
 249 |         </p>
 250 |         <p>
 251 |           The A4 is the basic size for stationary. Two thirds of it is a square,
 252 |           a nice economical happenstance resulting from the golden rectangle.
 253 |           It is one of the reasons we tend to use as much
 254 |           as possible the DIN sizes: proportions are always leading to other nice proportions.
 255 |         </p>
 256 |         <p>
 257 |           This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!
 258 |           The repercussion of ugliness is endless.
 259 |         </p>
 260 |       </div>
 261 |     </article>
 262 |     """
 263 | 
 264 |   'Full Bleed Background':
 265 |     'prefix': 'full-bleed-background'
 266 |     'body': """
 267 |     <article data-name="article-full-bleed-background">
 268 |       <div class="cf" style="background: url(http://mrmrs.io/photos/12.jpg) no-repeat center center fixed; background-size: cover;">
 269 |         <div class="fl pa3 pa4-ns bg-white black-70 measure-narrow f3 times">
 270 |           <header class="bb b--black-70 pv4">
 271 |             <h3 class="f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Prasat Suor Prat</h3>
 272 |             <h4 class="f3 fw4 i lh-title mt0">Siem Reap, Cambodia</h4>
 273 |           </header>
 274 |           <section class="pt5 pb4">
 275 |             <p class="times lh-copy measure f4 mt0">
 276 |               Prasat Suor Prat (Khmer: ប្រាសាទសួព្រ័ត) is a series of twelve towers spanne
 277 |               north to south lining the eastern side of royal square in Angkor Thom,
 278 |               near the town of Siem Reap, Cambodia. The towers are made from rugged
 279 |               laterite and sandstone. The towers are located right in front of
 280 |               Terrace of the Elephants and Terrace of the Leper King, flanking the
 281 |               start of the road leading east to the Victory Gate, on either side of
 282 |               which they are symmetrically arranged. Their function remains unknown.
 283 |             </p>
 284 |           </section>
 285 |         </div>
 286 |       </div>
 287 |     </article>
 288 |     """
 289 | 
 290 |   'Large Title Text':
 291 |     'prefix': 'large-title-text'
 292 |     'body': """
 293 |     <article class="pa3 pa5-ns">
 294 |       <h1 class="f2 f-subheadline-ns mb4">$1</h1>
 295 |       <p class="gray f6 mb4 ttu tracked">$2</p>
 296 |       <p class="f4 f3-ns measure lh-copy">
 297 |         $3
 298 |       </p>
 299 |     </article>
 300 |     """
 301 | 
 302 |   'Left Title Top Border':
 303 |     'prefix': 'left-title-top'
 304 |     'body': """
 305 |     <article class="cf ph3 ph5-ns pv5">
 306 |       <header class="fn fl-ns w-50-ns pr4-ns">
 307 |         <h1 class="f2 lh-title fw9 mb3 mt0 pt3 bt bw2">
 308 |           $1
 309 |         </h1>
 310 |         <h2 class="f3 mid-gray lh-title">
 311 |           $2
 312 |         </h2>
 313 |         <time class="f6 ttu tracked gray">${3:Time ago}</time>
 314 |       </header>
 315 |       <div class="fn fl-ns w-50-ns">
 316 |         <p class="f5 lh-copy measure mt0-ns">
 317 |           $4
 318 |         </p>
 319 |       </div>
 320 |     </article>
 321 |     """
 322 | 
 323 |   'Left Title':
 324 |     'prefix': 'left-title'
 325 |     'body': """
 326 |     <article class="cf ph3 ph5-ns pv5">
 327 |       <header class="fn fl-ns w-50-ns pr4-ns">
 328 |         <h1 class="mb3 mt0 lh-title">$1</h1>
 329 |         <time class="f6 ttu tracked gray">${2:Time ago}</time>
 330 |       </header>
 331 |       <div class="fn fl-ns w-50-ns">
 332 |         <p class="lh-copy measure mt4 mt0-ns">
 333 |           $3
 334 |         </p>
 335 |       </div>
 336 |     </article>
 337 |     """
 338 | 
 339 |   'Photo Essay':
 340 |     'prefix': 'photo-essay'
 341 |     'body': """
 342 |     <article class="helvetica pb5">
 343 |       <header class="vh-100 bg-light-pink dt w-100">
 344 |         <div
 345 |           style="background:url(http://mrmrs.io/photos/display.jpg) no-repeat center right;background-size: cover;"
 346 |           class="dtc v-mid cover ph3 ph4-m ph5-l">
 347 |           <h1 class="f2 f-subheadline-l measure lh-title fw9">A Night Taking Photos at San Francisco’s Spooky Ruins of the Sutro Baths</h1>
 348 |           <h2 class="f6 fw6 black">A story by Nancy Drew</h2>
 349 |         </div>
 350 |       </header>
 351 |       <div class="serif ph3 ph4-m ph5-l">
 352 |         <p class="lh-copy f5 f3-m f1-l measure center pv4">
 353 |           On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
 354 |         <div class="f5 f3-m lh-copy">
 355 |           <div class="cf dt-l w-100 bt b--black-10 pv4">
 356 |             <div class="dtc-l v-mid mw6 pr3-l">
 357 |               <img class="w-100" src="http://mrmrs.io/photos/009.jpg" alt=""/>
 358 |             </div>
 359 |             <div class="dtc-l v-mid f6 f5-m f4-l measure-l">
 360 |               <p class="measure pv4-l center">
 361 |                 <span class="fw9 fw4-ns">
 362 |                   Before it burned to the ground, the structure</span> filled a small beach
 363 |                 inlet below the Cliff House, also owned by Adolph Sutro at the time.
 364 |                 Shortly after closing, a fire in 1966 destroyed the building
 365 |                 while it was in the process of being demolished. All that remains
 366 |                 of the site are concrete walls, blocked off stairs and
 367 |                 passageways, and a tunnel with a deep crevice in the middle. The
 368 |                 cause of the fire was arson. Shortly afterwards, the developer
 369 |                 left San Francisco and claimed insurance money.
 370 |               </p>
 371 |             </div>
 372 |           </div>
 373 |           <div class="cf dn">
 374 |             <div class="fl w-100 w-50-l">
 375 |               <p class="f5 pv4">
 376 |                 During high tides, water would flow directly into the pools from the
 377 |                 nearby ocean, recycling the <span class="db f4 f3-m f1-l fw6 measure lh-title">two million US gallons of water in about an hour. </span>
 378 |               </p>
 379 |             </div>
 380 |             <div class="fl w-100 w-50-l">
 381 |               <p class="f5">
 382 |                 During low tides, a powerful turbine water pump,
 383 |                 built inside a cave at sea level, could be switched on from a control
 384 |                 room and could fill the tanks at a rate of 6,000 US gallons a minute,
 385 |                 recycling all the water in five hours.
 386 |               </p>
 387 |             </div>
 388 |           </div>
 389 |           <div class="cf">
 390 |             <div class="fl w-100 w-50-l pr2-l pb3">
 391 |               <img class="db w-100" src="http://mrmrs.io/photos/010.jpg">
 392 |             </div>
 393 |             <div class="fl w-50 w-50-l pr1 pr0-l pl2-l pb3">
 394 |               <img class="db w-100" src="http://mrmrs.io/photos/011.jpg">
 395 |             </div>
 396 |             <div class="fl w-50 w-50-l pl2 pl0-l pr2-l pb3">
 397 |               <img class="db w-100" src="http://mrmrs.io/photos/012.jpg">
 398 |             </div>
 399 |             <div class="fl w-100 w-50-l pl2-l">
 400 |               <img class="db w-100" src="http://mrmrs.io/photos/013.jpg">
 401 |             </div>
 402 |           </div>
 403 |         </div>
 404 |       </div>
 405 |     </article>
 406 |     """
 407 | 
 408 |   'Single Column Large Title':
 409 |     'prefix': 'single-column-large-title'
 410 |     'body': """
 411 |     <article class="baskerville pb5">
 412 |       <header class="avenir tc-l ph3 ph4-ns pt4 pt5-ns">
 413 |         <h1 class="f3 f2-m f-subheadline-l measure lh-title fw1 mt0">A Night of Taking Photos at the Spooky Ruins of the Sutro Baths</h1>
 414 |         <time class="f5 f4-l db fw1 baskerville mb4"> March 19th, 2015</time>
 415 |         <img class="w-100 dib measure f3" src="http://mrmrs.io/photos/009.jpg" alt="A photo of sutro baths by Adam Morse"/>
 416 |       </header>
 417 |       <div class="ph3 ph4-m ph5-l">
 418 |         <p class="f4 mb4 center measure lh-copy">
 419 |           On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
 420 |         <div class="measure db center f5 f4-ns lh-copy">
 421 |           <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/013.jpg">
 422 |           <p>
 423 |             Before it burned to the ground, the structure filled a small beach
 424 |             inlet below the Cliff House, also owned by Adolph Sutro at the time.
 425 |             Shortly after closing, a fire in 1966 destroyed the building
 426 |             while it was in the process of being demolished.
 427 |           </p>
 428 |           <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/012.jpg">
 429 |           <p>
 430 |             During high tides, water would flow directly into the pools from the
 431 |             nearby ocean, recycling the two million US gallons of water in about an hour.
 432 |           </p>
 433 |           <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/010.jpg">
 434 |           <p>
 435 |             All that remains
 436 |             of the site are concrete walls, blocked off stairs and
 437 |             passageways, and a tunnel with a deep crevice in the middle. The
 438 |             cause of the fire was arson. Shortly afterwards, the developer
 439 |             left San Francisco and claimed insurance money.
 440 |           </p>
 441 |           <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/011.jpg">
 442 |           <p>
 443 |             During low tides, a powerful turbine water pump,
 444 |             built inside a cave at sea level, could be switched on from a control
 445 |             room and could fill the tanks at a rate of 6,000 US gallons a minute,
 446 |             recycling all the water in five hours.
 447 |           </p>
 448 |         </div>
 449 |       </div>
 450 |     </article>
 451 |     """
 452 | 
 453 |   'Title Text Image':
 454 |     'prefix': 'title-text-image'
 455 |     'body': """
 456 |     <article class="pa3 pa5-ns">
 457 |       <h1 class="f2">$1</h1>
 458 |       <img src="$2" class="w-100 f5 measure" alt="outer space">
 459 |       <p class="measure lh-copy">
 460 |         $3
 461 |       </p>
 462 |     </article>
 463 |     """
 464 | 
 465 |   'Title Text':
 466 |     'prefix': 'title-text'
 467 |     'body': """
 468 |     <article class="pa3 pa5-ns">
 469 |       <h1 class="">$1</h1>
 470 |       <p class="measure lh-copy">
 471 |         $2
 472 |       </p>
 473 |     </article>
 474 |     """
 475 | 
 476 |   'Simple Large Type':
 477 |     'prefix': 'simple-large-type'
 478 |     'body': """
 479 |     <footer class="ph3 ph4-ns pv6 bt b--black-10 black-70">
 480 |       <a href="mailto:$1" class="link b f3 f2-ns dim black-70 lh-solid">${2:hello@email.com}</a>
 481 |       <p class="f6 db b ttu lh-solid">${3:© 2016 COMPANY Inc.}</p>
 482 |       <div class="mt5">
 483 |         <a href="${4:/language/}" title="${5:Language}" class="f6 dib pr2 mid-gray dim">${6:Language}</a>
 484 |         <a href="${7:/terms/}"    title="${8:Terms}" class="f6 dib ph2 mid-gray dim">${9:Terms of Use}</a>
 485 |         <a href="${10:/privacy/}"  title="${11:Privacy}" class="f6 dib pl2 mid-gray dim">${12:Privacy}</a>
 486 |       </div>
 487 |     </footer>
 488 |     """
 489 | 
 490 |   'Simple Large Type':
 491 |     'prefix': 'simple-large-type'
 492 |     'body': """
 493 |     <footer class="ph3 ph4-ns pv6 bt b--black-10 black-70">
 494 |       <a href="mailto:$1" class="link b f3 f2-ns dim black-70 lh-solid">${2:hello@email.com}</a>
 495 |       <p class="f6 db b ttu lh-solid">${3:© 2016 COMPANY Inc.}</p>
 496 |       <div class="mt5">
 497 |         <a href="${4:/language/}" title="${5:Language}" class="f6 dib pr2 mid-gray dim">${6:Language}</a>
 498 |         <a href="${7:/terms/}"    title="${8:Terms}" class="f6 dib ph2 mid-gray dim">${9:Terms of Use}</a>
 499 |         <a href="${10:/privacy/}"  title="${11:Privacy}" class="f6 dib pl2 mid-gray dim">${12:Privacy}</a>
 500 |       </div>
 501 |     </footer>
 502 |     """
 503 | 
 504 |   'Small Print':
 505 |     'prefix': 'small-print'
 506 |     'body': """
 507 |     <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
 508 |       <small class="f6 db tc">${1:© 2016 <b class="ttu">SOME COMPANY Inc</b>., All Rights Reserved}</small>
 509 |       <div class="tc mt3">
 510 |         <a href="${2:/language/}" title="${3:Language}" class="f6 dib ph2 link mid-gray dim">${4:Language}</a>
 511 |         <a href="${5:/terms/}"    title="${6:Terms}" class="f6 dib ph2 link mid-gray dim">${7:Terms of Use}</a>
 512 |         <a href="${8:/privacy/}"  title="${9:Privacy}" class="f6 dib ph2 link mid-gray dim">${10:Privacy}</a>
 513 |       </div>
 514 |     </footer>
 515 |     """
 516 | 
 517 |   'Social Circles':
 518 |     'prefix': 'social-circles'
 519 |     'body': """
 520 |     <footer class="pv4 ph3 ph5-ns tc">
 521 |       <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="$1" title="">
 522 |         <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
 523 |           <title>facebook icon</title>
 524 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 525 |         </svg>
 526 |       </a>
 527 |       <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="$2" title="">
 528 |         <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
 529 |           <title>twitter icon</title>
 530 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 531 |         </svg>
 532 |       </a>
 533 |       <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="$3" title="">
 534 |         <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
 535 |           <title>github icon</title>
 536 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 537 |         </svg>
 538 |       </a>
 539 |       <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="$4" title="">
 540 |         <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
 541 |           <title>dribbble icon</title>
 542 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 543 |         </svg>
 544 |       </a>
 545 |     </footer>
 546 |     """
 547 | 
 548 |   'Social Text':
 549 |     'prefix': 'social-text'
 550 |     'body': """
 551 |     <footer class="pv4 ph3 ph5-ns tc">
 552 |       <a class="link dim gray dib h2 w3 br-100 mr3 " href="$1" title="">
 553 |         <svg class="w2" data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
 554 |           <title>facebook icon</title>
 555 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 556 |         </svg>
 557 |         <small class="db tc">Facebook</small>
 558 |       </a>
 559 |       <a class="link dim gray dib h2 w3 br-100 mr3 " href="$2" title="">
 560 |         <svg class="w2" data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
 561 |           <title>twitter icon</title>
 562 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 563 |         </svg>
 564 |         <small class="db tc">Twitter</small>
 565 |       </a>
 566 |       <a class="link dim gray dib br-100 h2 w3 mr3 " href="$3" title="">
 567 |         <svg class="w2" data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
 568 |           <title>github icon</title>
 569 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 570 |         </svg>
 571 |         <small class="db tc">GitHub</small>
 572 |       </a>
 573 |       <a class="link dim gray dib br-100 h2 w3 mr3 " href="$4" title="">
 574 |         <svg class="w2" data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
 575 |           <title>dribbble icon</title>
 576 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 577 |         </svg>
 578 |           <small class="db tc">Dribbble</small>
 579 |       </a>
 580 |     </footer>
 581 |     """
 582 | 
 583 |   'Social':
 584 |     'prefix': 'social'
 585 |     'body': """
 586 |     <footer class="pv4 ph3 ph5-ns tc">
 587 |       <a class="link dim gray dib h2 w2 br-100 mr3 " href="$1" title="">
 588 |         <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
 589 |           <title>facebook icon</title>
 590 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 591 |         </svg>
 592 |       </a>
 593 |       <a class="link dim gray dib h2 w2 br-100 mr3 " href="$2" title="">
 594 |         <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
 595 |           <title>twitter icon</title>
 596 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 597 |         </svg>
 598 |       </a>
 599 |       <a class="link dim gray dib br-100 h2 w2 mr3 " href="$3" title="">
 600 |         <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
 601 |           <title>github icon</title>
 602 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 603 |         </svg>
 604 |       </a>
 605 |       <a class="link dim gray dib br-100 h2 w2 mr3 " href="$4" title="">
 606 |         <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
 607 |           <title>dribbble icon</title>
 608 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 609 |         </svg>
 610 |       </a>
 611 |       <div class="mt4">
 612 |         <a href="$5" class="f6 link dim gray dib mr3 mr4-ns">${6:Help}</a>
 613 |         <a href="$7" class="f6 link dim gray dib mr3 mr4-ns">${8:Send feedback}</a>
 614 |         <a href="$9" class="f6 link dim gray dib mr3 mr4-ns">${10:Privacy}</a>
 615 |         <a href="$11" class="f6 link dim gray dib">${12:Terms}</a>
 616 |       </div>
 617 |     </footer>
 618 |     """
 619 | 
 620 |   'Circle Avatar Title':
 621 |     'prefix': 'circle-avatar-title'
 622 |     'body': """
 623 |     <header class="tc pv4 pv5-ns">
 624 |       <img src="${1:http://www.fillmurray.com/200/200}" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
 625 |       <h1 class="f5 f4-ns fw6 mid-gray">${2:Bill Murray}</h1>
 626 |       <h2 class="f6 gray fw2 ttu tracked">${3:Charleston, SC}</h2>
 627 |     </header>
 628 |     """
 629 | 
 630 |   'Fixed Semi Transparent':
 631 |     'prefix': 'fixed-semi-transparent'
 632 |     'body': """
 633 |     <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
 634 |       <nav class="f6 fw6 ttu tracked">
 635 |         <a class="link dim white dib mr3" href="#" title="$1">$2</a>
 636 |         <a class="link dim white dib mr3" href="#" title="$2">$3</a>
 637 |         <a class="link dim white dib mr3" href="#" title="$4">$5</a>
 638 |         <a class="link dim white dib" href="#" title="$6">$7</a>
 639 |       </nav>
 640 |     </header>
 641 |     """
 642 | 
 643 |   'Rounded Avatar Title Subtitle':
 644 |     'prefix': 'rounded-avatar-title'
 645 |     'body': """
 646 |     <header class="tc pv4 pv5-ns">
 647 |       <img src="${1:http://www.fillmurray.com/300/300}" class="br3 ba b--black-10 h3 w3" alt="avatar">
 648 |       <h1 class="f5 f4-ns fw6 black-70">${2:Jasper Whitehouse}</h1>
 649 |       <h2 class="f6 black-70 fw2 ttu tracked">${3:Charleston, SC}</h2>
 650 |     </header>
 651 |     """
 652 | 
 653 |   'Centered Container':
 654 |     'prefix': 'centered-container'
 655 |     'body': """
 656 |     <section class="mw5 mw7-ns center bg-light-gray pa3 ph5-ns">
 657 |       <h1 class="mt0">Centered Container</h1>
 658 |       <p class="lh-copy measure">
 659 |         Combine width or max-width values with the center class to create a centered
 660 |         container for your content.
 661 |       </p>
 662 |     </section>
 663 |     """
 664 | 
 665 |   'Flag Object Collapse':
 666 |     'prefix': 'flag-object-collapse'
 667 |     'body': """
 668 |     <div class="dt mw6 center pt0 pb5 pv5-m pv6-ns">
 669 |       <div class="db dtc-ns v-mid-ns">
 670 |         <img src="http://lorempixel.com/400/200/technics" alt="A bright blue sky" class="w-100 mw7 w5-ns" />
 671 |       </div>
 672 |       <div class="db dtc-ns v-mid ph2 pr0-ns pl3-ns">
 673 |         <p class="lh-copy">
 674 |           For desktop, this text is vertically aligned middle, no matter what the height of the image is.
 675 |           On mobile, this is a paragraph below an image.
 676 |         </p>
 677 |       </div>
 678 |     </div>
 679 |     """
 680 | 
 681 |   'Flag Object':
 682 |     'prefix': 'flag-object'
 683 |     'body': """
 684 |     <div class="dt mw6 center pv4 pv5-m pv6-ns">
 685 |       <div class="dtc v-mid">
 686 |         <img src="http://lorempixel.com/400/200/sports/" alt="A bright blue sky" class="mw5" />
 687 |       </div>
 688 |       <div class="dtc v-mid pl3">
 689 |         <p class="lh-copy">
 690 |           This text is vertically aligned middle, no matter what the height of the image is.
 691 |         </p>
 692 |       </div>
 693 |     </div>
 694 |     """
 695 | 
 696 |   'Four Column Collapse Two':
 697 |     'prefix': 'four-column-collapse-two'
 698 |     'body': """
 699 |     <section class="cf">
 700 |       <div class="fl w-50 w-25-ns"><img class="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over house"></div>
 701 |       <div class="fl w-50 w-25-ns"><img class="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over water"></div>
 702 |       <div class="fl w-50 w-25-ns"><img class="db w-100" src="http://lorempixel.com/400/200/animals" alt="bay bridge at night"></div>
 703 |       <div class="fl w-50 w-25-ns"><img class="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over land"></div>
 704 |     </section>
 705 |     """
 706 | 
 707 |   'Four Column':
 708 |     'prefix': 'four-column'
 709 |     'body': """
 710 |     <div class="cf">
 711 |       <div class="fl w-25 tc pv5 bg-black-05">
 712 |         1
 713 |       </div>
 714 |       <div class="fl w-25 tc pv5 bg-black-025">
 715 |         2
 716 |       </div>
 717 |       <div class="fl w-25 tc pv5 bg-black-05">
 718 |         3
 719 |       </div>
 720 |       <div class="fl w-25 tc pv5 bg-black-025">
 721 |         4
 722 |       </div>
 723 |     </div>
 724 |     """
 725 | 
 726 |   'Two Column Collapse One':
 727 |     'prefix': 'two-column-collapse-one'
 728 |     'body': """
 729 |     <article class="cf">
 730 |       <div class="fl w-100 w-50-ns bg-near-white tc">
 731 |         <h1>Column One</h1>
 732 |       </div>
 733 |       <div class="fl w-100 w-50-ns bg-light-gray tc">
 734 |         <h1>Column Two</h1>
 735 |       </div>
 736 |     </article>
 737 |     """
 738 | 
 739 |   'Two Column':
 740 |     'prefix': 'two-column'
 741 |     'body': """
 742 |     <article class="cf">
 743 |       <div class="fl w-50 bg-near-white tc">
 744 |         <h1>Column One</h1>
 745 |       </div>
 746 |       <div class="fl w-50 bg-light-gray tc">
 747 |         <h1>Column Two</h1>
 748 |       </div>
 749 |     </article>
 750 |     """
 751 | 
 752 |   'Border Spaced':
 753 |     'prefix': 'border-spaced'
 754 |     'body': """
 755 |     <article class="pa3 pa5-ns">
 756 |       <h1 class="f4 bold center mw6">Cats</h1>
 757 |       <ul class="list pl0 ml0 center mw6 ba b--light-silver br2">
 758 |         <li class="ph3 pv3 bb b--light-silver">Mackeral Tabby</li>
 759 |         <li class="ph3 pv3 bb b--light-silver">Burmese</li>
 760 |         <li class="ph3 pv3 bb b--light-silver">Orange Tabby</li>
 761 |         <li class="ph3 pv3 bb b--light-silver">Maine Coon</li>
 762 |         <li class="ph3 pv3 bb b--light-silver">Siamese</li>
 763 |         <li class="ph3 pv3 bb b--light-silver">Scottish Fold</li>
 764 |         <li class="ph3 pv3">American Bobtail</li>
 765 |       </ul>
 766 |     </article>
 767 |     """
 768 | 
 769 |   'Border Tight':
 770 |     'prefix': 'border-tight'
 771 |     'body': """
 772 |     <h1 class="f4 bold center mw5">Cats</h1>
 773 |     <ul class="list pl0 ml0 center mw5 ba b--light-silver br3">
 774 |       <li class="ph3 pv2 bb b--light-silver">Mackeral Tabby</li>
 775 |       <li class="ph3 pv2 bb b--light-silver">Burmese</li>
 776 |       <li class="ph3 pv2 bb b--light-silver">Maine Coon</li>
 777 |       <li class="ph3 pv2 bb b--light-silver">Orange Tabby</li>
 778 |       <li class="ph3 pv2 bb b--light-silver">Siamese</li>
 779 |       <li class="ph3 pv2 bb b--light-silver">Scottish Fold</li>
 780 |       <li class="ph3 pv2">American Bobtail</li>
 781 |     </ul>
 782 |     """
 783 | 
 784 |   'Large Links Inline':
 785 |     'prefix': 'large-links-inline'
 786 |     'body': """
 787 |     <ul class="list pa3 pa5-ns">
 788 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
 789 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Aegean</a></li>
 790 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Arabian</a></li>
 791 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Australian</a></li>
 792 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Asian</a></li>
 793 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Balinese</a></li>
 794 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bambino</a></li>
 795 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bengal</a></li>
 796 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Birman</a></li>
 797 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Bombay</a></li>
 798 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Brazilian</a></li>
 799 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 800 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 801 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 802 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Burmese</a></li>
 803 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Burmilla</a></li>
 804 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">California</a></li>
 805 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chantilly</a></li>
 806 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chartreux</a></li>
 807 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Chausie</a></li>
 808 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
 809 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
 810 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cornish</a></li>
 811 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cymric</a></li>
 812 |       <li class="dib mr2"><a href="#" class="f4 f2-ns b db pa2 link dim mid-gray">Cyprus</a></li>
 813 |     </ul>
 814 |     """
 815 | 
 816 |   'Links Inline':
 817 |     'prefix': 'links-inline'
 818 |     'body': """
 819 |     <ul class="list ph3 ph5-ns pv4">
 820 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
 821 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Aegean</a></li>
 822 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Arabian</a></li>
 823 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Australian</a></li>
 824 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Asian</a></li>
 825 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Balinese</a></li>
 826 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bambino</a></li>
 827 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bengal</a></li>
 828 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Birman</a></li>
 829 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Bombay</a></li>
 830 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Brazilian</a></li>
 831 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 832 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 833 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 834 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Burmese</a></li>
 835 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Burmilla</a></li>
 836 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">California</a></li>
 837 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chantilly</a></li>
 838 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chartreux</a></li>
 839 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Chausie</a></li>
 840 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
 841 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
 842 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cornish</a></li>
 843 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cymric</a></li>
 844 |       <li class="dib mr2"><a href="#" class="f6 f5-ns b db pa2 link dim mid-gray">Cyprus</a></li>
 845 |     </ul>
 846 |     """
 847 | 
 848 |   'Links With Borders Inline':
 849 |     'prefix': 'links-borders-inline'
 850 |     'body': """
 851 |     <ul class="list ph3 ph5-ns pv4">
 852 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Abyssinian</a></li>
 853 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Aegean</a></li>
 854 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Arabian</a></li>
 855 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Australian</a></li>
 856 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Asian</a></li>
 857 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Balinese</a></li>
 858 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bambino</a></li>
 859 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bengal</a></li>
 860 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Birman</a></li>
 861 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bombay</a></li>
 862 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Brazilian</a></li>
 863 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 864 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 865 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 866 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmese</a></li>
 867 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmilla</a></li>
 868 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">California</a></li>
 869 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chantilly</a></li>
 870 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chartreux</a></li>
 871 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chausie</a></li>
 872 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cheetoh</a></li>
 873 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Colorpoint</a></li>
 874 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cornish</a></li>
 875 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cymric</a></li>
 876 |       <li class="dib mr1 mb2"><a href="#" class="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cyprus</a></li>
 877 |     </ul>
 878 |     """
 879 | 
 880 |   'Slab Stat Large':
 881 |     'prefix': 'slab-stat-large'
 882 |     'body': """
 883 |     <article class="pa3 pa5-ns" data-name="slab-stat-large">
 884 |       <h3 class="f6 ttu tracked">Today</h3>
 885 |       <div class="cf">
 886 |         <dl class="db dib-l w-auto-l lh-title mr6-l">
 887 |           <dd class="f6 fw4 ml0">Closed Issues</dd>
 888 |           <dd class="f2 f-subheadline-l fw6 ml0">1,024</dd>
 889 |         </dl>
 890 |         <dl class="db dib-l w-auto-l lh-title mr6-l">
 891 |           <dd class="f6 fw4 ml0">Open Issues</dd>
 892 |           <dd class="f2 f-subheadline-l fw6 ml0">993</dd>
 893 |         </dl>
 894 |         <dl class="db dib-l w-auto-l lh-title mr6-l">
 895 |           <dd class="f6 fw4 ml0">Next Release</dd>
 896 |           <dd class="f2 f-subheadline-l fw6 ml0">10-22</dd>
 897 |         </dl>
 898 |         <dl class="db dib-l w-auto-l lh-title mr6-l">
 899 |           <dd class="f6 fw4 ml0">Days Left</dd>
 900 |           <dd class="f2 f-subheadline-l fw6 ml0">4</dd>
 901 |         </dl>
 902 |         <dl class="db dib-l w-auto-l lh-title mr6-l">
 903 |           <dd class="f6 fw4 ml0">Favorite Cat</dd>
 904 |           <dd class="f2 f-subheadline-l fw6 ml0">All of Them</dd>
 905 |         </dl>
 906 |         <dl class="db dib-l w-auto-l lh-title">
 907 |           <dd class="f6 fw4 ml0">App Downloads</dd>
 908 |           <dd class="f2 f-subheadline-l fw6 ml0">1,200</dd>
 909 |         </dl>
 910 |       </div>
 911 |     </article>
 912 |     """
 913 | 
 914 |   'Slab Stat Small':
 915 |     'prefix': 'slab-stat-small'
 916 |     'body': """
 917 |     <article class="pa3 pa5-ns" data-name="slab-stat-small">
 918 |       <h3 class="f6 ttu tracked">Today</h3>
 919 |       <div class="cf">
 920 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 921 |           <dd class="f6 fw4 ml0">Closed Issues</dd>
 922 |           <dd class="f3 fw6 ml0">1,024</dd>
 923 |         </dl>
 924 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 925 |           <dd class="f6 fw4 ml0">Open Issues</dd>
 926 |           <dd class="f3 fw6 ml0">993</dd>
 927 |         </dl>
 928 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 929 |           <dd class="f6 fw4 ml0">Next Release</dd>
 930 |           <dd class="f3 fw6 ml0">10-22</dd>
 931 |         </dl>
 932 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 933 |           <dd class="f6 fw4 ml0">Days Left</dd>
 934 |           <dd class="f3 fw6 ml0">4</dd>
 935 |         </dl>
 936 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 937 |           <dd class="f6 fw4 ml0">Favorite Cat</dd>
 938 |           <dd class="f3 fw6 ml0">All of Them</dd>
 939 |         </dl>
 940 |         <dl class="fl fn-l w-50 dib-l w-auto-l lh-title">
 941 |           <dd class="f6 fw4 ml0">App Downloads</dd>
 942 |           <dd class="f3 fw6 ml0">1,200</dd>
 943 |         </dl>
 944 |       </div>
 945 |     </article>
 946 |     """
 947 | 
 948 |   'Slab Stat':
 949 |     'prefix': 'slab-stat'
 950 |     'body': """
 951 |     <article class="pa3 pa5-ns" data-name="slab-stat">
 952 |       <h1>Today</h1>
 953 |       <dl class="dib mr5">
 954 |         <dd class="f6 f5-ns b ml0">Closed Issues</dd>
 955 |         <dd class="f3 f2-ns b ml0">1,024</dd>
 956 |       </dl>
 957 |       <dl class="dib mr5">
 958 |         <dd class="f6 f5-ns b ml0">Open Issues</dd>
 959 |         <dd class="f3 f2-ns b ml0">993</dd>
 960 |       </dl>
 961 |       <dl class="dib mr5">
 962 |         <dd class="f6 f5-ns b ml0">Next Release</dd>
 963 |         <dd class="f3 f2-ns b ml0">10-22</dd>
 964 |       </dl>
 965 |       <dl class="dib mr5">
 966 |         <dd class="f6 f5-ns b ml0">Days Left</dd>
 967 |         <dd class="f3 f2-ns b ml0">4</dd>
 968 |       </dl>
 969 |       <dl class="dib mr5">
 970 |         <dd class="f6 f5-ns b ml0">Favorite Cat</dd>
 971 |         <dd class="f3 f2-ns b ml0">All of Them</dd>
 972 |       </dl>
 973 |       <dl class="dib">
 974 |         <dd class="f6 f5-ns b ml0">App Downloads</dd>
 975 |         <dd class="f3 f2-ns b ml0">1,200</dd>
 976 |       </dl>
 977 |     </article>
 978 |     """
 979 | 
 980 |   'Title Text List':
 981 |     'prefix': 'title-text-list'
 982 |     'body': """
 983 |     <ul class="list pl0">
 984 |       <li class="pa3 pa4-ns bb b--black-10">
 985 |         <b class="db f3 mb1">alignment</b>
 986 |         <span class="f5 db lh-copy measure">
 987 |           The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified.</span>
 988 |       </li>
 989 |       <li class="pa3 pa4-ns bb b--black-10">
 990 |         <b class="db f3 mb1">
 991 |           ascender
 992 |         </b>
 993 |         <span class="f5 db lh-copy measure">
 994 |           The part of lowercase letters (such as k, b, and d) that ascends above the
 995 |           x-height of the other lowercase letters in a face.
 996 |         </span>
 997 |       </li>
 998 |       <li class="pa3 pa4-ns bb b--black-10">
 999 |         <b class="db f3 mb1">
1000 |           baseline
1001 |         </b>
1002 |         <span class="f5 db lh-copy measure">
1003 |           The imaginary line on which the majority of the characters in a typeface rest.
1004 |         </span>
1005 |       </li>
1006 |     </ul>
1007 |     """
1008 | 
1009 |   'Large Title Link List':
1010 |     'prefix': 'large-title-link-list'
1011 |     'body': """
1012 |     <nav class="pa3 pa4-ns">
1013 |       <a class="link dim black b f1 f-headline-ns tc db mb3 mb4-ns" href="#" title="Home">Site Name</a>
1014 |       <div class="tc pb3">
1015 |         <a class="link dim gray f6 f5-ns dib mr3" href="#" title="Home">Home</a>
1016 |         <a class="link dim gray f6 f5-ns dib mr3" href="#" title="About">About</a>
1017 |         <a class="link dim gray f6 f5-ns dib mr3" href="#" title="Store">Store</a>
1018 |         <a class="link dim gray f6 f5-ns dib" href="#" title="Contact">Contact</a>
1019 |       </div>
1020 |     </nav>
1021 |     """
1022 | 
1023 |   'List Overflow':
1024 |     'prefix': 'list-overflow'
1025 |     'body': """
1026 |     <nav class="ph3 ph5-ns pv4">
1027 |       <div class="nowrap overflow-x-auto">
1028 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 1">Link 1</a>
1029 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 2">Link 2</a>
1030 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 3">Link 3</a>
1031 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 4">Link 4</a>
1032 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 5">Link 5</a>
1033 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 6">Link 6</a>
1034 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 7">Link 7</a>
1035 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 8">Link 8</a>
1036 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 9">Link 9</a>
1037 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 10">Link 10</a>
1038 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 11">Link 11</a>
1039 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 12">Link 12</a>
1040 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 13">Link 13</a>
1041 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 14">Link 14</a>
1042 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 15">Link 15</a>
1043 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 16">Link 16</a>
1044 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 17">Link 17</a>
1045 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 18">Link 18</a>
1046 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 19">Link 19</a>
1047 |         <a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 20">Link 20</a>
1048 |       </div>
1049 |     </nav>
1050 |     """
1051 | 
1052 |   'Logo Links Inline Collapse':
1053 |     'prefix': 'logo-links-inline-collapse'
1054 |     'body': """
1055 |     <nav class="db dt-l w-100 border-box pa3 ph5-l">
1056 |       <a class="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb2 mb0-l" href="#" title="Home">
1057 |         <img src="http://lorempixel.com/400/200/abstract" class="dib w2 h2 br-100" alt="Site Name">
1058 |       </a>
1059 |       <div class="db dtc-l v-mid w-100 w-75-l tc tr-l">
1060 |         <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Home">Home</a>
1061 |         <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="How it Works">How it Works</a>
1062 |         <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Blog">Blog</a>
1063 |         <a class="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Press">Press</a>
1064 |         <a class="link dim dark-gray f6 f5-l dib" href="#" title="Contact">Contact</a>
1065 |       </div>
1066 |     </nav>
1067 |     """
1068 | 
1069 |   'Logo Links Inline':
1070 |     'prefix': 'logo-links'
1071 |     'body': """
1072 |     <nav class="dt w-100 border-box pa3 ph5-ns">
1073 |       <a class="dtc v-mid mid-gray link dim w-25" href="#" title="Home">
1074 |         <img src="http://lorempixel.com/400/200/abstract" class="dib w2 h2 br-100" alt="Site Name">
1075 |       </a>
1076 |       <div class="dtc v-mid w-75 tr">
1077 |         <a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="About">Services</a>
1078 |         <a class="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="Store">Blog</a>
1079 |         <a class="link dim dark-gray f6 f5-ns dib" href="#" title="Contact">Join Us</a>
1080 |       </div>
1081 |     </nav>
1082 |     """
1083 | 
1084 |   'Title Link List':
1085 |     'prefix': 'title-link-list'
1086 |     'body': """
1087 |     <nav class="pa3 pa4-ns">
1088 |       <a class="link dim black b f6 f5-ns dib mr3" href="#" title="Home">Site Name</a>
1089 |       <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="Home">Home</a>
1090 |       <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="About">About</a>
1091 |       <a class="link dim gray    f6 f5-ns dib mr3" href="#" title="Store">Store</a>
1092 |       <a class="link dim gray    f6 f5-ns dib" href="#" title="Contact">Contact</a>
1093 |     </nav>
1094 |     """
1095 | 


--------------------------------------------------------------------------------
/snippets/components-react.cson:
--------------------------------------------------------------------------------
   1 | ".source.js, .source.jsx":
   2 | 
   3 |   'Banner Basic':
   4 |     'prefix': 'banner-basic'
   5 |     'body': """
   6 |     <article className="mw7 center ph3 ph5-ns tc br2 pv5 ${1:bg-washed-green} ${2:dark-green} mb5">
   7 |       <h1 className="fw6 f3 f2-ns lh-title mt0 mb3">
   8 |         This is a tagline. For x.
   9 |       </h1>
  10 |       <h2 className="fw2 f4 lh-copy mt0 mb3">
  11 |         This will change things. And we want you to be involved. This text needs to
  12 |         be longer for testing sake.
  13 |       </h2>
  14 |       <p className="fw1 f5 mt0 mb3">
  15 |         Sign up for beta access or learn more about x.
  16 |       </p>
  17 |       <div>
  18 |         <a className="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3"
  19 |           href="#">
  20 |           Sign Up
  21 |         </a>
  22 |         <a className="f6 br-pill dark-green no-underline ba grow pv2 ph3 dib"
  23 |           href="#">
  24 |           Learn More
  25 |         </a>
  26 |       </div>
  27 |     </article>
  28 |     """
  29 | 
  30 |   'Button Solid':
  31 |     'prefix': 'btn-solid'
  32 |     'body': """
  33 |     <a className="f6 link dim br2 ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Text}</a>
  34 |     """
  35 |   'Button Thin':
  36 |     'prefix': 'btn-thin'
  37 |     'body': """
  38 |     <a className="f6 link dim br2 ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  39 |     """
  40 |   'Button Normal':
  41 |     'prefix': 'btn-normal'
  42 |     'body': """
  43 |     <a className="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  44 |     """
  45 |   'Button Thick':
  46 |     'prefix': 'btn-thick'
  47 |     'body': """
  48 |     <a className="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Text}</a>
  49 |     """
  50 | 
  51 |   'Button Pill Solid':
  52 |     'prefix': 'btn-pill-solid'
  53 |     'body': """
  54 |     <a className="f6 link dim br-pill ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Pill Text}</a>
  55 |     """
  56 |   'Button Pill Thin':
  57 |     'prefix': 'btn-pill-thin'
  58 |     'body': """
  59 |     <a className="f6 link dim br-pill ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  60 |     """
  61 |   'Button Pill Normal':
  62 |     'prefix': 'btn-pill-normal'
  63 |     'body': """
  64 |     <a className="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  65 |     """
  66 |   'Button Pill Thick':
  67 |     'prefix': 'btn-pill-thick'
  68 |     'body': """
  69 |     <a className="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Text}</a>
  70 |     """
  71 | 
  72 |   'Button Pill Grow Solid':
  73 |     'prefix': 'btn-pill-grow-solid'
  74 |     'body': """
  75 |     <a className="f6 grow link dim br-pill ph3 pv2 mb2 dib white ${1:bg-black}" href="#0">${2:Button Pill Grow Text}</a>
  76 |     """
  77 |   'Button Pill Grow Thin':
  78 |     'prefix': 'btn-pill-grow-thin'
  79 |     'body': """
  80 |     <a className="f6 grow link dim br-pill ba ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  81 |     """
  82 |   'Button Pill Grow Normal':
  83 |     'prefix': 'btn-pill-grow-normal'
  84 |     'body': """
  85 |     <a className="f6 grow link dim br-pill ba bw1 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  86 |     """
  87 |   'Button Pill Grow Thick':
  88 |     'prefix': 'btn-pill-grow-thick'
  89 |     'body': """
  90 |     <a className="f6 grow link dim br-pill ba bw2 ph3 pv2 mb2 dib ${1:black}" href="#0">${2:Button Pill Grow Text}</a>
  91 |     """
  92 | 
  93 |   'Album Centered':
  94 |     'prefix': 'album-centered'
  95 |     'body': """
  96 |     <a className="dib mw5 tc black link dim"
  97 |        title="Frank Ocean's Blonde on Apple Music"
  98 |        href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
  99 | 
 100 |       <img className="db ba b--black-10"/
 101 |            alt="Frank Ocean Blonde Album Cover"
 102 |            src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
 103 |       />
 104 | 
 105 |       <dl className="mt2 f6 lh-copy">
 106 |         <dt className="clip">Title</dt>
 107 |         <dd className="ml0">Blonde</dd>
 108 |         <dt className="clip">Artist</dt>
 109 |         <dd className="ml0 gray">Frank Ocean</dd>
 110 |       </dl>
 111 |     </a>
 112 |     """
 113 | 
 114 |   'Album Left':
 115 |     'prefix': 'album-left'
 116 |     'body': """
 117 |     <a className="dib mw5 black link dim"
 118 |        title="Frank Ocean's Blonde on Apple Music"
 119 |        href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
 120 | 
 121 |       <img className="db ba b--black-10"/
 122 |            alt="Frank Ocean Blonde Album Cover"
 123 |            src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
 124 |       />
 125 | 
 126 |       <dl className="mt2 f6 lh-copy">
 127 |         <dt className="clip">Title</dt>
 128 |         <dd className="ml0 fw9">Blonde</dd>
 129 |         <dt className="clip">Artist</dt>
 130 |         <dd className="ml0 gray">Frank Ocean</dd>
 131 |       </dl>
 132 |     </a>
 133 |     """
 134 | 
 135 |   'News Card':
 136 |     'prefix': 'news-card'
 137 |     'body': """
 138 |     <article className="bg-white center mw5 ba b--black-10 mv4">
 139 |       <div className="pv2 ph3">
 140 |          <h1 className="f6 ttu tracked">$1</h1>
 141 |       </div>
 142 |       <img src="${2:http://lorempixel.com/400/200/animals/}" className="w-100 db" alt="$3" />
 143 |       <div className="pa3">
 144 |         <a href="#" className="link dim lh-title">$4</a>
 145 |         <small className="gray db pv2">${5: AMP - <time>6 hours ago</time>}</small>
 146 |       </div>
 147 |     </article>
 148 |     """
 149 | 
 150 |   'Product Card':
 151 |     'prefix': 'product-card'
 152 |     'body': """
 153 |     <article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
 154 |       <img src="${1:http://placekitten.com/g/600/300}" className="db w-100 br2 br--top" alt="$2" />
 155 |       <div className="pa2 ph3-ns pb3-ns">
 156 |         <div className="dt w-100 mt1">
 157 |           <div className="dtc">
 158 |             <h1 className="f5 f4-ns mv0">${3:Cat}</h1>
 159 |           </div>
 160 |           <div className="dtc tr">
 161 |             <h2 className="f5 mv0">${4:$1000.00}</h2>
 162 |           </div>
 163 |         </div>
 164 |         <p className="f6 lh-copy measure mt2 mid-gray">
 165 |           $5
 166 |         </p>
 167 |       </div>
 168 |     </article>
 169 |     """
 170 | 
 171 |   'Profile Card Title Subtitle':
 172 |     'prefix': 'profile-card-title'
 173 |     'body': """
 174 |     <article className="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
 175 |       <div className="tc">
 176 |         <img src="${1:http://placekitten.com/g/600/300}" className="br-100 h4 w4 dib ba b--black-05 pa2" title="${2:Kitty}" />
 177 |         <h1 className="f3 mb2">${3:Title}</h1>
 178 |         <h2 className="f5 fw4 gray mt0">${4:Subtitle}</h2>
 179 |       </div>
 180 |     </article>
 181 |     """
 182 | 
 183 |   'Profile Card':
 184 |     'prefix': 'profile-card'
 185 |     'body': """
 186 |     <article className="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
 187 |       <div className="tc">
 188 |         <img src="${1:http://placekitten.com/g/600/300}" className="br-100 h3 w3 dib" title="${2:Kitty}" />
 189 |         <h1 className="f4">${3:Title}</h1>
 190 |         <hr className="mw3 bb bw1 b--black-10">
 191 |       </div>
 192 |       <p className="lh-copy measure center f6 black-70">
 193 |         $4
 194 |       </p>
 195 |     </article>
 196 |     """
 197 | 
 198 |   'Text Card':
 199 |     'prefix': 'text-card'
 200 |     'body': """
 201 |     <article className="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
 202 |       <h1 className="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">$1</h1>
 203 |       <div className="pa3 bt b--black-10">
 204 |         <p className="f6 f5-ns lh-copy measure">
 205 |           $2
 206 |         </p>
 207 |       </div>
 208 |     </article>
 209 |     """
 210 | 
 211 |   'Feature':
 212 |     'prefix': 'feature'
 213 |     'body': """
 214 |     <article className="athelas">
 215 |       <div className="vh-100 dt w-100 tc bg-dark-gray white cover" style={{background:"url(https://hd.unsplash.com/uploads/1413152676137eccd463c/61606b7b) no-repeat center;"}}>
 216 |         <div className="dtc v-mid">
 217 |           <header className="white-70">
 218 |             <h2 className="f6 fw1 ttu tracked mb2 lh-title">Issue Six</h2>
 219 |             <h3 className="f6 fw1 lh-title">Summer MMXVI</h3>
 220 |           </header>
 221 |           <h1 className="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
 222 |           <blockquote className="ph0 mh0 measure f4 lh-copy center">
 223 |             <p className="fw1 white-70">
 224 |               It's the space you put between the notes that make the music.
 225 |             </p>
 226 |             <cite className="f6 ttu tracked fs-normal">Massimo Vignelli</cite>
 227 |           </blockquote>
 228 |         </div>
 229 |       </div>
 230 |       <div className="center measure-wide f5 pv5 lh-copy ph2">
 231 |         <h1 className="f1 lh-title">The repercussion of ugliness is endless</h1>
 232 |         <p>
 233 |           The choice of paper size is one of the  rst of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
 234 |         </p>
 235 |         <p>
 236 |           The international Standard paper sizes, called the A series, is based
 237 |           on a golden rectangle, the divine proportion. It is extremely handsome
 238 |           and practical as well. It is adopted by many countries around the world
 239 |           and is based on the German DIN metric Standards. The United States uses
 240 |           a basic letter size (8 1/2 x 11”) of ugly proportions, and results in
 241 |           complete chaos with an endless amount of paper sizes. It is a
 242 |           by-product of the culture of free enterprise, competition and waste.
 243 |           Just another example of the misinterpretations of freedom.
 244 |         </p>
 245 |         <p>
 246 |           These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 -
 247 |           A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 -
 248 |           A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.
 249 |         </p>
 250 |         <p>
 251 |           The A4 is the basic size for stationary. Two thirds of it is a square,
 252 |           a nice economical happenstance resulting from the golden rectangle.
 253 |           It is one of the reasons we tend to use as much
 254 |           as possible the DIN sizes: proportions are always leading to other nice proportions.
 255 |         </p>
 256 |         <p>
 257 |           This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!
 258 |           The repercussion of ugliness is endless.
 259 |         </p>
 260 |       </div>
 261 |     </article>
 262 |     """
 263 | 
 264 |   'Full Bleed Background':
 265 |     'prefix': 'full-bleed-background'
 266 |     'body': """
 267 |     <article data-name="article-full-bleed-background">
 268 |       <div className="cf" style={{background: "url(http://mrmrs.io/photos/12.jpg) no-repeat center center fixed;", backgroundSize: "cover;"}}>
 269 |         <div className="fl pa3 pa4-ns bg-white black-70 measure-narrow f3 times">
 270 |           <header className="bb b--black-70 pv4">
 271 |             <h3 className="f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Prasat Suor Prat</h3>
 272 |             <h4 className="f3 fw4 i lh-title mt0">Siem Reap, Cambodia</h4>
 273 |           </header>
 274 |           <section className="pt5 pb4">
 275 |             <p className="times lh-copy measure f4 mt0">
 276 |               Prasat Suor Prat (Khmer: ប្រាសាទសួព្រ័ត) is a series of twelve towers spanne
 277 |               north to south lining the eastern side of royal square in Angkor Thom,
 278 |               near the town of Siem Reap, Cambodia. The towers are made from rugged
 279 |               laterite and sandstone. The towers are located right in front of
 280 |               Terrace of the Elephants and Terrace of the Leper King, flanking the
 281 |               start of the road leading east to the Victory Gate, on either side of
 282 |               which they are symmetrically arranged. Their function remains unknown.
 283 |             </p>
 284 |           </section>
 285 |         </div>
 286 |       </div>
 287 |     </article>
 288 |     """
 289 | 
 290 |   'Large Title Text':
 291 |     'prefix': 'large-title-text'
 292 |     'body': """
 293 |     <article className="pa3 pa5-ns">
 294 |       <h1 className="f2 f-subheadline-ns mb4">$1</h1>
 295 |       <p className="gray f6 mb4 ttu tracked">$2</p>
 296 |       <p className="f4 f3-ns measure lh-copy">
 297 |         $3
 298 |       </p>
 299 |     </article>
 300 |     """
 301 | 
 302 |   'Left Title Top Border':
 303 |     'prefix': 'left-title-top'
 304 |     'body': """
 305 |     <article className="cf ph3 ph5-ns pv5">
 306 |       <header className="fn fl-ns w-50-ns pr4-ns">
 307 |         <h1 className="f2 lh-title fw9 mb3 mt0 pt3 bt bw2">
 308 |           $1
 309 |         </h1>
 310 |         <h2 className="f3 mid-gray lh-title">
 311 |           $2
 312 |         </h2>
 313 |         <time className="f6 ttu tracked gray">${3:Time ago}</time>
 314 |       </header>
 315 |       <div className="fn fl-ns w-50-ns">
 316 |         <p className="f5 lh-copy measure mt0-ns">
 317 |           $4
 318 |         </p>
 319 |       </div>
 320 |     </article>
 321 |     """
 322 | 
 323 |   'Left Title':
 324 |     'prefix': 'left-title'
 325 |     'body': """
 326 |     <article className="cf ph3 ph5-ns pv5">
 327 |       <header className="fn fl-ns w-50-ns pr4-ns">
 328 |         <h1 className="mb3 mt0 lh-title">$1</h1>
 329 |         <time className="f6 ttu tracked gray">${2:Time ago}</time>
 330 |       </header>
 331 |       <div className="fn fl-ns w-50-ns">
 332 |         <p className="lh-copy measure mt4 mt0-ns">
 333 |           $3
 334 |         </p>
 335 |       </div>
 336 |     </article>
 337 |     """
 338 | 
 339 |   'Photo Essay':
 340 |     'prefix': 'photo-essay'
 341 |     'body': """
 342 |     <article className="helvetica pb5">
 343 |       <header className="vh-100 bg-light-pink dt w-100">
 344 |         <div
 345 |           style={{background: "url(http://mrmrs.io/photos/display.jpg) no-repeat center right;",backgroundSize: "cover;"}}
 346 |           className="dtc v-mid cover ph3 ph4-m ph5-l">
 347 |           <h1 className="f2 f-subheadline-l measure lh-title fw9">A Night Taking Photos at San Francisco’s Spooky Ruins of the Sutro Baths</h1>
 348 |           <h2 className="f6 fw6 black">A story by Nancy Drew</h2>
 349 |         </div>
 350 |       </header>
 351 |       <div className="serif ph3 ph4-m ph5-l">
 352 |         <p className="lh-copy f5 f3-m f1-l measure center pv4">
 353 |           On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
 354 |         <div className="f5 f3-m lh-copy">
 355 |           <div className="cf dt-l w-100 bt b--black-10 pv4">
 356 |             <div className="dtc-l v-mid mw6 pr3-l">
 357 |               <img className="w-100" src="http://mrmrs.io/photos/009.jpg" alt="" />
 358 |             </div>
 359 |             <div className="dtc-l v-mid f6 f5-m f4-l measure-l">
 360 |               <p className="measure pv4-l center">
 361 |                 <span className="fw9 fw4-ns">
 362 |                   Before it burned to the ground, the structure</span> filled a small beach
 363 |                 inlet below the Cliff House, also owned by Adolph Sutro at the time.
 364 |                 Shortly after closing, a fire in 1966 destroyed the building
 365 |                 while it was in the process of being demolished. All that remains
 366 |                 of the site are concrete walls, blocked off stairs and
 367 |                 passageways, and a tunnel with a deep crevice in the middle. The
 368 |                 cause of the fire was arson. Shortly afterwards, the developer
 369 |                 left San Francisco and claimed insurance money.
 370 |               </p>
 371 |             </div>
 372 |           </div>
 373 |           <div className="cf dn">
 374 |             <div className="fl w-100 w-50-l">
 375 |               <p className="f5 pv4">
 376 |                 During high tides, water would flow directly into the pools from the
 377 |                 nearby ocean, recycling the <span className="db f4 f3-m f1-l fw6 measure lh-title">two million US gallons of water in about an hour. </span>
 378 |               </p>
 379 |             </div>
 380 |             <div className="fl w-100 w-50-l">
 381 |               <p className="f5">
 382 |                 During low tides, a powerful turbine water pump,
 383 |                 built inside a cave at sea level, could be switched on from a control
 384 |                 room and could fill the tanks at a rate of 6,000 US gallons a minute,
 385 |                 recycling all the water in five hours.
 386 |               </p>
 387 |             </div>
 388 |           </div>
 389 |           <div className="cf">
 390 |             <div className="fl w-100 w-50-l pr2-l pb3">
 391 |               <img className="db w-100" src="http://mrmrs.io/photos/010.jpg" />
 392 |             </div>
 393 |             <div className="fl w-50 w-50-l pr1 pr0-l pl2-l pb3">
 394 |               <img className="db w-100" src="http://mrmrs.io/photos/011.jpg" />
 395 |             </div>
 396 |             <div className="fl w-50 w-50-l pl2 pl0-l pr2-l pb3">
 397 |               <img className="db w-100" src="http://mrmrs.io/photos/012.jpg" />
 398 |             </div>
 399 |             <div className="fl w-100 w-50-l pl2-l">
 400 |               <img className="db w-100" src="http://mrmrs.io/photos/013.jpg" />
 401 |             </div>
 402 |           </div>
 403 |         </div>
 404 |       </div>
 405 |     </article>
 406 |     """
 407 | 
 408 |   'Single Column Large Title':
 409 |     'prefix': 'single-column-large-title'
 410 |     'body': """
 411 |     <article className="baskerville pb5">
 412 |       <header className="avenir tc-l ph3 ph4-ns pt4 pt5-ns">
 413 |         <h1 className="f3 f2-m f-subheadline-l measure lh-title fw1 mt0">A Night of Taking Photos at the Spooky Ruins of the Sutro Baths</h1>
 414 |         <time className="f5 f4-l db fw1 baskerville mb4"> March 19th, 2015</time>
 415 |         <img className="w-100 dib measure f3" src="http://mrmrs.io/photos/009.jpg" alt="A photo of sutro baths by Adam Morse"/>
 416 |       </header>
 417 |       <div className="ph3 ph4-m ph5-l">
 418 |         <p className="f4 mb4 center measure lh-copy">
 419 |           On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
 420 |         <div className="measure db center f5 f4-ns lh-copy">
 421 |           <img className="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/013.jpg" />
 422 |           <p>
 423 |             Before it burned to the ground, the structure filled a small beach
 424 |             inlet below the Cliff House, also owned by Adolph Sutro at the time.
 425 |             Shortly after closing, a fire in 1966 destroyed the building
 426 |             while it was in the process of being demolished.
 427 |           </p>
 428 |           <img className="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/012.jpg" />
 429 |           <p>
 430 |             During high tides, water would flow directly into the pools from the
 431 |             nearby ocean, recycling the two million US gallons of water in about an hour.
 432 |           </p>
 433 |           <img className="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/010.jpg" />
 434 |           <p>
 435 |             All that remains
 436 |             of the site are concrete walls, blocked off stairs and
 437 |             passageways, and a tunnel with a deep crevice in the middle. The
 438 |             cause of the fire was arson. Shortly afterwards, the developer
 439 |             left San Francisco and claimed insurance money.
 440 |           </p>
 441 |           <img className="db w-100 mt4 mt5-ns" src="http://mrmrs.io/photos/011.jpg" />
 442 |           <p>
 443 |             During low tides, a powerful turbine water pump,
 444 |             built inside a cave at sea level, could be switched on from a control
 445 |             room and could fill the tanks at a rate of 6,000 US gallons a minute,
 446 |             recycling all the water in five hours.
 447 |           </p>
 448 |         </div>
 449 |       </div>
 450 |     </article>
 451 |     """
 452 | 
 453 |   'Title Text Image':
 454 |     'prefix': 'title-text-image'
 455 |     'body': """
 456 |     <article className="pa3 pa5-ns">
 457 |       <h1 className="f2">$1</h1>
 458 |       <img src="$2" className="w-100 f5 measure" alt="outer space" />
 459 |       <p className="measure lh-copy">
 460 |         $3
 461 |       </p>
 462 |     </article>
 463 |     """
 464 | 
 465 |   'Title Text':
 466 |     'prefix': 'title-text'
 467 |     'body': """
 468 |     <article className="pa3 pa5-ns">
 469 |       <h1 className="">$1</h1>
 470 |       <p className="measure lh-copy">
 471 |         $2
 472 |       </p>
 473 |     </article>
 474 |     """
 475 | 
 476 |   'Simple Large Type':
 477 |     'prefix': 'simple-large-type'
 478 |     'body': """
 479 |     <footer className="ph3 ph4-ns pv6 bt b--black-10 black-70">
 480 |       <a href="mailto:$1" className="link b f3 f2-ns dim black-70 lh-solid">${2:hello@email.com}</a>
 481 |       <p className="f6 db b ttu lh-solid">${3:© 2016 COMPANY Inc.}</p>
 482 |       <div className="mt5">
 483 |         <a href="${4:/language/}" title="${5:Language}" className="f6 dib pr2 mid-gray dim">${6:Language}</a>
 484 |         <a href="${7:/terms/}"    title="${8:Terms}" className="f6 dib ph2 mid-gray dim">${9:Terms of Use}</a>
 485 |         <a href="${10:/privacy/}"  title="${11:Privacy}" className="f6 dib pl2 mid-gray dim">${12:Privacy}</a>
 486 |       </div>
 487 |     </footer>
 488 |     """
 489 | 
 490 |   'Simple Large Type':
 491 |     'prefix': 'simple-large-type'
 492 |     'body': """
 493 |     <footer className="ph3 ph4-ns pv6 bt b--black-10 black-70">
 494 |       <a href="mailto:$1" className="link b f3 f2-ns dim black-70 lh-solid">${2:hello@email.com}</a>
 495 |       <p className="f6 db b ttu lh-solid">${3:© 2016 COMPANY Inc.}</p>
 496 |       <div className="mt5">
 497 |         <a href="${4:/language/}" title="${5:Language}" className="f6 dib pr2 mid-gray dim">${6:Language}</a>
 498 |         <a href="${7:/terms/}"    title="${8:Terms}" className="f6 dib ph2 mid-gray dim">${9:Terms of Use}</a>
 499 |         <a href="${10:/privacy/}"  title="${11:Privacy}" className="f6 dib pl2 mid-gray dim">${12:Privacy}</a>
 500 |       </div>
 501 |     </footer>
 502 |     """
 503 | 
 504 |   'Small Print':
 505 |     'prefix': 'small-print'
 506 |     'body': """
 507 |     <footer className="pv4 ph3 ph5-m ph6-l mid-gray">
 508 |       <small className="f6 db tc">${1:© 2016 <b className="ttu">SOME COMPANY Inc</b>., All Rights Reserved}</small>
 509 |       <div className="tc mt3">
 510 |         <a href="${2:/language/}" title="${3:Language}" className="f6 dib ph2 link mid-gray dim">${4:Language}</a>
 511 |         <a href="${5:/terms/}"    title="${6:Terms}" className="f6 dib ph2 link mid-gray dim">${7:Terms of Use}</a>
 512 |         <a href="${8:/privacy/}"  title="${9:Privacy}" className="f6 dib ph2 link mid-gray dim">${10:Privacy}</a>
 513 |       </div>
 514 |     </footer>
 515 |     """
 516 | 
 517 |   'Social Circles':
 518 |     'prefix': 'social-circles'
 519 |     'body': """
 520 |     <footer className="pv4 ph3 ph5-ns tc">
 521 |       <a className="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="$1" title="">
 522 |         <svg data-icon="facebook" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 523 |           <title>facebook icon</title>
 524 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 525 |         </svg>
 526 |       </a>
 527 |       <a className="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="$2" title="">
 528 |         <svg data-icon="twitter" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 529 |           <title>twitter icon</title>
 530 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 531 |         </svg>
 532 |       </a>
 533 |       <a className="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="$3" title="">
 534 |         <svg data-icon="github" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 535 |           <title>github icon</title>
 536 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 537 |         </svg>
 538 |       </a>
 539 |       <a className="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="$4" title="">
 540 |         <svg data-icon="dribbble" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 541 |           <title>dribbble icon</title>
 542 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 543 |         </svg>
 544 |       </a>
 545 |     </footer>
 546 |     """
 547 | 
 548 |   'Social Text':
 549 |     'prefix': 'social-text'
 550 |     'body': """
 551 |     <footer className="pv4 ph3 ph5-ns tc">
 552 |       <a className="link dim gray dib h2 w3 br-100 mr3 " href="$1" title="">
 553 |         <svg className="w2" data-icon="facebook" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 554 |           <title>facebook icon</title>
 555 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 556 |         </svg>
 557 |         <small className="db tc">Facebook</small>
 558 |       </a>
 559 |       <a className="link dim gray dib h2 w3 br-100 mr3 " href="$2" title="">
 560 |         <svg className="w2" data-icon="twitter" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 561 |           <title>twitter icon</title>
 562 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 563 |         </svg>
 564 |         <small className="db tc">Twitter</small>
 565 |       </a>
 566 |       <a className="link dim gray dib br-100 h2 w3 mr3 " href="$3" title="">
 567 |         <svg className="w2" data-icon="github" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 568 |           <title>github icon</title>
 569 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 570 |         </svg>
 571 |         <small className="db tc">GitHub</small>
 572 |       </a>
 573 |       <a className="link dim gray dib br-100 h2 w3 mr3 " href="$4" title="">
 574 |         <svg className="w2" data-icon="dribbble" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 575 |           <title>dribbble icon</title>
 576 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 577 |         </svg>
 578 |           <small className="db tc">Dribbble</small>
 579 |       </a>
 580 |     </footer>
 581 |     """
 582 | 
 583 |   'Social':
 584 |     'prefix': 'social'
 585 |     'body': """
 586 |     <footer className="pv4 ph3 ph5-ns tc">
 587 |       <a className="link dim gray dib h2 w2 br-100 mr3 " href="$1" title="">
 588 |         <svg data-icon="facebook" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 589 |           <title>facebook icon</title>
 590 |           <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
 591 |         </svg>
 592 |       </a>
 593 |       <a className="link dim gray dib h2 w2 br-100 mr3 " href="$2" title="">
 594 |         <svg data-icon="twitter" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 595 |           <title>twitter icon</title>
 596 |           <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
 597 |         </svg>
 598 |       </a>
 599 |       <a className="link dim gray dib br-100 h2 w2 mr3 " href="$3" title="">
 600 |         <svg data-icon="github" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 601 |           <title>github icon</title>
 602 |           <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
 603 |         </svg>
 604 |       </a>
 605 |       <a className="link dim gray dib br-100 h2 w2 mr3 " href="$4" title="">
 606 |         <svg data-icon="dribbble" viewBox="0 0 32 32" style={{fill:'currentcolor'}}>
 607 |           <title>dribbble icon</title>
 608 |           <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
 609 |         </svg>
 610 |       </a>
 611 |       <div className="mt4">
 612 |         <a href="$5" className="f6 link dim gray dib mr3 mr4-ns">${6:Help}</a>
 613 |         <a href="$7" className="f6 link dim gray dib mr3 mr4-ns">${8:Send feedback}</a>
 614 |         <a href="$9" className="f6 link dim gray dib mr3 mr4-ns">${10:Privacy}</a>
 615 |         <a href="$11" className="f6 link dim gray dib">${12:Terms}</a>
 616 |       </div>
 617 |     </footer>
 618 |     """
 619 | 
 620 |   'Circle Avatar Title':
 621 |     'prefix': 'circle-avatar-title'
 622 |     'body': """
 623 |     <header className="tc pv4 pv5-ns">
 624 |       <img src="${1:http://www.fillmurray.com/200/200}" className="br-100 pa1 ba b--black-10 h3 w3" alt="avatar" />
 625 |       <h1 className="f5 f4-ns fw6 mid-gray">${2:Bill Murray}</h1>
 626 |       <h2 className="f6 gray fw2 ttu tracked">${3:Charleston, SC}</h2>
 627 |     </header>
 628 |     """
 629 | 
 630 |   'Fixed Semi Transparent':
 631 |     'prefix': 'fixed-semi-transparent'
 632 |     'body': """
 633 |     <header className="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
 634 |       <nav className="f6 fw6 ttu tracked">
 635 |         <a className="link dim white dib mr3" href="#" title="$1">$2</a>
 636 |         <a className="link dim white dib mr3" href="#" title="$2">$3</a>
 637 |         <a className="link dim white dib mr3" href="#" title="$4">$5</a>
 638 |         <a className="link dim white dib" href="#" title="$6">$7</a>
 639 |       </nav>
 640 |     </header>
 641 |     """
 642 | 
 643 |   'Rounded Avatar Title Subtitle':
 644 |     'prefix': 'rounded-avatar-title'
 645 |     'body': """
 646 |     <header className="tc pv4 pv5-ns">
 647 |       <img src="${1:http://www.fillmurray.com/300/300}" className="br3 ba b--black-10 h3 w3" alt="avatar" />
 648 |       <h1 className="f5 f4-ns fw6 black-70">${2:Jasper Whitehouse}</h1>
 649 |       <h2 className="f6 black-70 fw2 ttu tracked">${3:Charleston, SC}</h2>
 650 |     </header>
 651 |     """
 652 | 
 653 |   'Centered Container':
 654 |     'prefix': 'centered-container'
 655 |     'body': """
 656 |     <section className="mw5 mw7-ns center bg-light-gray pa3 ph5-ns">
 657 |       <h1 className="mt0">Centered Container</h1>
 658 |       <p className="lh-copy measure">
 659 |         Combine width or max-width values with the center className to create a centered
 660 |         container for your content.
 661 |       </p>
 662 |     </section>
 663 |     """
 664 | 
 665 |   'Flag Object Collapse':
 666 |     'prefix': 'flag-object-collapse'
 667 |     'body': """
 668 |     <div className="dt mw6 center pt0 pb5 pv5-m pv6-ns">
 669 |       <div className="db dtc-ns v-mid-ns">
 670 |         <img src="http://lorempixel.com/400/200/technics" alt="A bright blue sky" className="w-100 mw7 w5-ns" />
 671 |       </div>
 672 |       <div className="db dtc-ns v-mid ph2 pr0-ns pl3-ns">
 673 |         <p className="lh-copy">
 674 |           For desktop, this text is vertically aligned middle, no matter what the height of the image is.
 675 |           On mobile, this is a paragraph below an image.
 676 |         </p>
 677 |       </div>
 678 |     </div>
 679 |     """
 680 | 
 681 |   'Flag Object':
 682 |     'prefix': 'flag-object'
 683 |     'body': """
 684 |     <div className="dt mw6 center pv4 pv5-m pv6-ns">
 685 |       <div className="dtc v-mid">
 686 |         <img src="http://lorempixel.com/400/200/sports/" alt="A bright blue sky" className="mw5" />
 687 |       </div>
 688 |       <div className="dtc v-mid pl3">
 689 |         <p className="lh-copy">
 690 |           This text is vertically aligned middle, no matter what the height of the image is.
 691 |         </p>
 692 |       </div>
 693 |     </div>
 694 |     """
 695 | 
 696 |   'Four Column Collapse Two':
 697 |     'prefix': 'four-column-collapse-two'
 698 |     'body': """
 699 |     <section className="cf">
 700 |       <div className="fl w-50 w-25-ns"><img className="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over house" /></div>
 701 |       <div className="fl w-50 w-25-ns"><img className="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over water" /></div>
 702 |       <div className="fl w-50 w-25-ns"><img className="db w-100" src="http://lorempixel.com/400/200/animals" alt="bay bridge at night" /></div>
 703 |       <div className="fl w-50 w-25-ns"><img className="db w-100" src="http://lorempixel.com/400/200/animals" alt="night sky over land" /></div>
 704 |     </section>
 705 |     """
 706 | 
 707 |   'Four Column':
 708 |     'prefix': 'four-column'
 709 |     'body': """
 710 |     <div className="cf">
 711 |       <div className="fl w-25 tc pv5 bg-black-05">
 712 |         1
 713 |       </div>
 714 |       <div className="fl w-25 tc pv5 bg-black-025">
 715 |         2
 716 |       </div>
 717 |       <div className="fl w-25 tc pv5 bg-black-05">
 718 |         3
 719 |       </div>
 720 |       <div className="fl w-25 tc pv5 bg-black-025">
 721 |         4
 722 |       </div>
 723 |     </div>
 724 |     """
 725 | 
 726 |   'Two Column Collapse One':
 727 |     'prefix': 'two-column-collapse-one'
 728 |     'body': """
 729 |     <article className="cf">
 730 |       <div className="fl w-100 w-50-ns bg-near-white tc">
 731 |         <h1>Column One</h1>
 732 |       </div>
 733 |       <div className="fl w-100 w-50-ns bg-light-gray tc">
 734 |         <h1>Column Two</h1>
 735 |       </div>
 736 |     </article>
 737 |     """
 738 | 
 739 |   'Two Column':
 740 |     'prefix': 'two-column'
 741 |     'body': """
 742 |     <article className="cf">
 743 |       <div className="fl w-50 bg-near-white tc">
 744 |         <h1>Column One</h1>
 745 |       </div>
 746 |       <div className="fl w-50 bg-light-gray tc">
 747 |         <h1>Column Two</h1>
 748 |       </div>
 749 |     </article>
 750 |     """
 751 | 
 752 |   'Border Spaced':
 753 |     'prefix': 'border-spaced'
 754 |     'body': """
 755 |     <article className="pa3 pa5-ns">
 756 |       <h1 className="f4 bold center mw6">Cats</h1>
 757 |       <ul className="list pl0 ml0 center mw6 ba b--light-silver br2">
 758 |         <li className="ph3 pv3 bb b--light-silver">Mackeral Tabby</li>
 759 |         <li className="ph3 pv3 bb b--light-silver">Burmese</li>
 760 |         <li className="ph3 pv3 bb b--light-silver">Orange Tabby</li>
 761 |         <li className="ph3 pv3 bb b--light-silver">Maine Coon</li>
 762 |         <li className="ph3 pv3 bb b--light-silver">Siamese</li>
 763 |         <li className="ph3 pv3 bb b--light-silver">Scottish Fold</li>
 764 |         <li className="ph3 pv3">American Bobtail</li>
 765 |       </ul>
 766 |     </article>
 767 |     """
 768 | 
 769 |   'Border Tight':
 770 |     'prefix': 'border-tight'
 771 |     'body': """
 772 |     <h1 className="f4 bold center mw5">Cats</h1>
 773 |     <ul className="list pl0 ml0 center mw5 ba b--light-silver br3">
 774 |       <li className="ph3 pv2 bb b--light-silver">Mackeral Tabby</li>
 775 |       <li className="ph3 pv2 bb b--light-silver">Burmese</li>
 776 |       <li className="ph3 pv2 bb b--light-silver">Maine Coon</li>
 777 |       <li className="ph3 pv2 bb b--light-silver">Orange Tabby</li>
 778 |       <li className="ph3 pv2 bb b--light-silver">Siamese</li>
 779 |       <li className="ph3 pv2 bb b--light-silver">Scottish Fold</li>
 780 |       <li className="ph3 pv2">American Bobtail</li>
 781 |     </ul>
 782 |     """
 783 | 
 784 |   'Large Links Inline':
 785 |     'prefix': 'large-links-inline'
 786 |     'body': """
 787 |     <ul className="list pa3 pa5-ns">
 788 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
 789 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Aegean</a></li>
 790 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Arabian</a></li>
 791 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Australian</a></li>
 792 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Asian</a></li>
 793 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Balinese</a></li>
 794 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Bambino</a></li>
 795 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Bengal</a></li>
 796 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Birman</a></li>
 797 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Bombay</a></li>
 798 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Brazilian</a></li>
 799 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 800 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 801 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">British</a></li>
 802 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Burmese</a></li>
 803 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Burmilla</a></li>
 804 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">California</a></li>
 805 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Chantilly</a></li>
 806 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Chartreux</a></li>
 807 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Chausie</a></li>
 808 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
 809 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
 810 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Cornish</a></li>
 811 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Cymric</a></li>
 812 |       <li className="dib mr2"><a href="#" className="f4 f2-ns b db pa2 link dim mid-gray">Cyprus</a></li>
 813 |     </ul>
 814 |     """
 815 | 
 816 |   'Links Inline':
 817 |     'prefix': 'links-inline'
 818 |     'body': """
 819 |     <ul className="list ph3 ph5-ns pv4">
 820 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Abyssinian</a></li>
 821 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Aegean</a></li>
 822 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Arabian</a></li>
 823 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Australian</a></li>
 824 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Asian</a></li>
 825 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Balinese</a></li>
 826 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Bambino</a></li>
 827 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Bengal</a></li>
 828 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Birman</a></li>
 829 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Bombay</a></li>
 830 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Brazilian</a></li>
 831 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 832 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 833 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">British</a></li>
 834 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Burmese</a></li>
 835 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Burmilla</a></li>
 836 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">California</a></li>
 837 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Chantilly</a></li>
 838 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Chartreux</a></li>
 839 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Chausie</a></li>
 840 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Cheetoh</a></li>
 841 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Colorpoint</a></li>
 842 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Cornish</a></li>
 843 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Cymric</a></li>
 844 |       <li className="dib mr2"><a href="#" className="f6 f5-ns b db pa2 link dim mid-gray">Cyprus</a></li>
 845 |     </ul>
 846 |     """
 847 | 
 848 |   'Links With Borders Inline':
 849 |     'prefix': 'links-borders-inline'
 850 |     'body': """
 851 |     <ul className="list ph3 ph5-ns pv4">
 852 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Abyssinian</a></li>
 853 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Aegean</a></li>
 854 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Arabian</a></li>
 855 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Australian</a></li>
 856 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Asian</a></li>
 857 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Balinese</a></li>
 858 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bambino</a></li>
 859 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bengal</a></li>
 860 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Birman</a></li>
 861 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Bombay</a></li>
 862 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Brazilian</a></li>
 863 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 864 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 865 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">British</a></li>
 866 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmese</a></li>
 867 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Burmilla</a></li>
 868 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">California</a></li>
 869 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chantilly</a></li>
 870 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chartreux</a></li>
 871 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Chausie</a></li>
 872 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cheetoh</a></li>
 873 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Colorpoint</a></li>
 874 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cornish</a></li>
 875 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cymric</a></li>
 876 |       <li className="dib mr1 mb2"><a href="#" className="f6 f5-ns b db pa2 link dim dark-gray ba b--black-20">Cyprus</a></li>
 877 |     </ul>
 878 |     """
 879 | 
 880 |   'Slab Stat Large':
 881 |     'prefix': 'slab-stat-large'
 882 |     'body': """
 883 |     <article className="pa3 pa5-ns" data-name="slab-stat-large">
 884 |       <h3 className="f6 ttu tracked">Today</h3>
 885 |       <div className="cf">
 886 |         <dl className="db dib-l w-auto-l lh-title mr6-l">
 887 |           <dd className="f6 fw4 ml0">Closed Issues</dd>
 888 |           <dd className="f2 f-subheadline-l fw6 ml0">1,024</dd>
 889 |         </dl>
 890 |         <dl className="db dib-l w-auto-l lh-title mr6-l">
 891 |           <dd className="f6 fw4 ml0">Open Issues</dd>
 892 |           <dd className="f2 f-subheadline-l fw6 ml0">993</dd>
 893 |         </dl>
 894 |         <dl className="db dib-l w-auto-l lh-title mr6-l">
 895 |           <dd className="f6 fw4 ml0">Next Release</dd>
 896 |           <dd className="f2 f-subheadline-l fw6 ml0">10-22</dd>
 897 |         </dl>
 898 |         <dl className="db dib-l w-auto-l lh-title mr6-l">
 899 |           <dd className="f6 fw4 ml0">Days Left</dd>
 900 |           <dd className="f2 f-subheadline-l fw6 ml0">4</dd>
 901 |         </dl>
 902 |         <dl className="db dib-l w-auto-l lh-title mr6-l">
 903 |           <dd className="f6 fw4 ml0">Favorite Cat</dd>
 904 |           <dd className="f2 f-subheadline-l fw6 ml0">All of Them</dd>
 905 |         </dl>
 906 |         <dl className="db dib-l w-auto-l lh-title">
 907 |           <dd className="f6 fw4 ml0">App Downloads</dd>
 908 |           <dd className="f2 f-subheadline-l fw6 ml0">1,200</dd>
 909 |         </dl>
 910 |       </div>
 911 |     </article>
 912 |     """
 913 | 
 914 |   'Slab Stat Small':
 915 |     'prefix': 'slab-stat-small'
 916 |     'body': """
 917 |     <article className="pa3 pa5-ns" data-name="slab-stat-small">
 918 |       <h3 className="f6 ttu tracked">Today</h3>
 919 |       <div className="cf">
 920 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 921 |           <dd className="f6 fw4 ml0">Closed Issues</dd>
 922 |           <dd className="f3 fw6 ml0">1,024</dd>
 923 |         </dl>
 924 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 925 |           <dd className="f6 fw4 ml0">Open Issues</dd>
 926 |           <dd className="f3 fw6 ml0">993</dd>
 927 |         </dl>
 928 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 929 |           <dd className="f6 fw4 ml0">Next Release</dd>
 930 |           <dd className="f3 fw6 ml0">10-22</dd>
 931 |         </dl>
 932 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 933 |           <dd className="f6 fw4 ml0">Days Left</dd>
 934 |           <dd className="f3 fw6 ml0">4</dd>
 935 |         </dl>
 936 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
 937 |           <dd className="f6 fw4 ml0">Favorite Cat</dd>
 938 |           <dd className="f3 fw6 ml0">All of Them</dd>
 939 |         </dl>
 940 |         <dl className="fl fn-l w-50 dib-l w-auto-l lh-title">
 941 |           <dd className="f6 fw4 ml0">App Downloads</dd>
 942 |           <dd className="f3 fw6 ml0">1,200</dd>
 943 |         </dl>
 944 |       </div>
 945 |     </article>
 946 |     """
 947 | 
 948 |   'Slab Stat':
 949 |     'prefix': 'slab-stat'
 950 |     'body': """
 951 |     <article className="pa3 pa5-ns" data-name="slab-stat">
 952 |       <h1>Today</h1>
 953 |       <dl className="dib mr5">
 954 |         <dd className="f6 f5-ns b ml0">Closed Issues</dd>
 955 |         <dd className="f3 f2-ns b ml0">1,024</dd>
 956 |       </dl>
 957 |       <dl className="dib mr5">
 958 |         <dd className="f6 f5-ns b ml0">Open Issues</dd>
 959 |         <dd className="f3 f2-ns b ml0">993</dd>
 960 |       </dl>
 961 |       <dl className="dib mr5">
 962 |         <dd className="f6 f5-ns b ml0">Next Release</dd>
 963 |         <dd className="f3 f2-ns b ml0">10-22</dd>
 964 |       </dl>
 965 |       <dl className="dib mr5">
 966 |         <dd className="f6 f5-ns b ml0">Days Left</dd>
 967 |         <dd className="f3 f2-ns b ml0">4</dd>
 968 |       </dl>
 969 |       <dl className="dib mr5">
 970 |         <dd className="f6 f5-ns b ml0">Favorite Cat</dd>
 971 |         <dd className="f3 f2-ns b ml0">All of Them</dd>
 972 |       </dl>
 973 |       <dl className="dib">
 974 |         <dd className="f6 f5-ns b ml0">App Downloads</dd>
 975 |         <dd className="f3 f2-ns b ml0">1,200</dd>
 976 |       </dl>
 977 |     </article>
 978 |     """
 979 | 
 980 |   'Title Text List':
 981 |     'prefix': 'title-text-list'
 982 |     'body': """
 983 |     <ul className="list pl0">
 984 |       <li className="pa3 pa4-ns bb b--black-10">
 985 |         <b className="db f3 mb1">alignment</b>
 986 |         <span className="f5 db lh-copy measure">
 987 |           The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified.</span>
 988 |       </li>
 989 |       <li className="pa3 pa4-ns bb b--black-10">
 990 |         <b className="db f3 mb1">
 991 |           ascender
 992 |         </b>
 993 |         <span className="f5 db lh-copy measure">
 994 |           The part of lowercase letters (such as k, b, and d) that ascends above the
 995 |           x-height of the other lowercase letters in a face.
 996 |         </span>
 997 |       </li>
 998 |       <li className="pa3 pa4-ns bb b--black-10">
 999 |         <b className="db f3 mb1">
1000 |           baseline
1001 |         </b>
1002 |         <span className="f5 db lh-copy measure">
1003 |           The imaginary line on which the majority of the characters in a typeface rest.
1004 |         </span>
1005 |       </li>
1006 |     </ul>
1007 |     """
1008 | 
1009 |   'Large Title Link List':
1010 |     'prefix': 'large-title-link-list'
1011 |     'body': """
1012 |     <nav className="pa3 pa4-ns">
1013 |       <a className="link dim black b f1 f-headline-ns tc db mb3 mb4-ns" href="#" title="Home">Site Name</a>
1014 |       <div className="tc pb3">
1015 |         <a className="link dim gray f6 f5-ns dib mr3" href="#" title="Home">Home</a>
1016 |         <a className="link dim gray f6 f5-ns dib mr3" href="#" title="About">About</a>
1017 |         <a className="link dim gray f6 f5-ns dib mr3" href="#" title="Store">Store</a>
1018 |         <a className="link dim gray f6 f5-ns dib" href="#" title="Contact">Contact</a>
1019 |       </div>
1020 |     </nav>
1021 |     """
1022 | 
1023 |   'List Overflow':
1024 |     'prefix': 'list-overflow'
1025 |     'body': """
1026 |     <nav className="ph3 ph5-ns pv4">
1027 |       <div className="nowrap overflow-x-auto">
1028 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 1">Link 1</a>
1029 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 2">Link 2</a>
1030 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 3">Link 3</a>
1031 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 4">Link 4</a>
1032 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 5">Link 5</a>
1033 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 6">Link 6</a>
1034 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 7">Link 7</a>
1035 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 8">Link 8</a>
1036 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 9">Link 9</a>
1037 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 10">Link 10</a>
1038 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 11">Link 11</a>
1039 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 12">Link 12</a>
1040 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 13">Link 13</a>
1041 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 14">Link 14</a>
1042 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 15">Link 15</a>
1043 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 16">Link 16</a>
1044 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 17">Link 17</a>
1045 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 18">Link 18</a>
1046 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 19">Link 19</a>
1047 |         <a className="link dim gray f5 f4-ns dib mr3" href="#" title="Link 20">Link 20</a>
1048 |       </div>
1049 |     </nav>
1050 |     """
1051 | 
1052 |   'Logo Links Inline Collapse':
1053 |     'prefix': 'logo-links-inline-collapse'
1054 |     'body': """
1055 |     <nav className="db dt-l w-100 border-box pa3 ph5-l">
1056 |       <a className="db dtc-l v-mid mid-gray link dim w-100 w-25-l tc tl-l mb2 mb0-l" href="#" title="Home">
1057 |         <img src="http://lorempixel.com/400/200/abstract" className="dib w2 h2 br-100" alt="Site Name" />
1058 |       </a>
1059 |       <div className="db dtc-l v-mid w-100 w-75-l tc tr-l">
1060 |         <a className="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Home">Home</a>
1061 |         <a className="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="How it Works">How it Works</a>
1062 |         <a className="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Blog">Blog</a>
1063 |         <a className="link dim dark-gray f6 f5-l dib mr3 mr4-l" href="#" title="Press">Press</a>
1064 |         <a className="link dim dark-gray f6 f5-l dib" href="#" title="Contact">Contact</a>
1065 |       </div>
1066 |     </nav>
1067 |     """
1068 | 
1069 |   'Logo Links Inline':
1070 |     'prefix': 'logo-links'
1071 |     'body': """
1072 |     <nav className="dt w-100 border-box pa3 ph5-ns">
1073 |       <a className="dtc v-mid mid-gray link dim w-25" href="#" title="Home">
1074 |         <img src="http://lorempixel.com/400/200/abstract" className="dib w2 h2 br-100" alt="Site Name" />
1075 |       </a>
1076 |       <div className="dtc v-mid w-75 tr">
1077 |         <a className="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="About">Services</a>
1078 |         <a className="link dim dark-gray f6 f5-ns dib mr3 mr4-ns" href="#" title="Store">Blog</a>
1079 |         <a className="link dim dark-gray f6 f5-ns dib" href="#" title="Contact">Join Us</a>
1080 |       </div>
1081 |     </nav>
1082 |     """
1083 | 
1084 |   'Title Link List':
1085 |     'prefix': 'title-link-list'
1086 |     'body': """
1087 |     <nav className="pa3 pa4-ns">
1088 |       <a className="link dim black b f6 f5-ns dib mr3" href="#" title="Home">Site Name</a>
1089 |       <a className="link dim gray    f6 f5-ns dib mr3" href="#" title="Home">Home</a>
1090 |       <a className="link dim gray    f6 f5-ns dib mr3" href="#" title="About">About</a>
1091 |       <a className="link dim gray    f6 f5-ns dib mr3" href="#" title="Store">Store</a>
1092 |       <a className="link dim gray    f6 f5-ns dib" href="#" title="Contact">Contact</a>
1093 |     </nav>
1094 |     """
1095 | 


--------------------------------------------------------------------------------