├── .gitignore ├── img ├── pw_maze_white.png ├── subtle_grunge.png └── white_paperboard.png ├── LICENSE.md ├── config.rb ├── README.md ├── js ├── style-tiles.js └── jquery-1.9.0.min.js ├── index.html ├── stylesheets └── style.css └── sass └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store -------------------------------------------------------------------------------- /img/pw_maze_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeradg/style-tiles-with-scss/HEAD/img/pw_maze_white.png -------------------------------------------------------------------------------- /img/subtle_grunge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeradg/style-tiles-with-scss/HEAD/img/subtle_grunge.png -------------------------------------------------------------------------------- /img/white_paperboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jeradg/style-tiles-with-scss/HEAD/img/white_paperboard.png -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | #Style Tiles with SCSS 2 | https://github.com/jeradg/style-tiles-with-scss 3 | 4 | Copyright (c) 2013, Jerad Gallinger 5 | http://jeradgallinger.ca - http://codepen.io/jeradg - http://github.com/jeradg 6 | 7 | Released under the WTFPL license - http://sam.zoy.org/wtfpl/ 8 | 9 | Based on Samantha Warren's Style Tiles: 10 | http://styletil.es/ - http://www.alistapart.com/articles/style-tiles-and-how-they-work/ -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "stylesheets" 6 | sass_dir = "sass" 7 | images_dir = "images" 8 | javascripts_dir = "javascripts" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | # line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Style Tiles with SCSS 2 | 3 | ##What's this, then? 4 | Design style tiles with SCSS! Unchain your design ideas from Photoshop and jump straight into code. Upload to your server and share tiles with clients. It's responsive, too. 5 | 6 | ###Originally designed for and in CodePen 7 | Fork this in CodePen and make your own tiles: http://codepen.io/jeradg/pen/rFqat. Share your tiles with clients with the Full Page link. Go 8 | CodePen Pro and update styles on the fly in Live View in a meeting with your client. Get your in-browser design on. 9 | 10 | ##A brief explanation 11 | Start at the top of the SCSS for the most basic options, and move down for more fine-grained styling. (For simplicity, the SCSS is all kept in a single file. If you'd prefer to use partials, that works too.) 12 | 13 | The SCSS is sectioned into (from top -> bottom): 14 | - Basic styling 15 | - Main colors, basic typography, textures, and button styling. 16 | - Advanced styling 17 | - Advanced options for the above items. If you want to make fancy buttons, do cool things with the texture boxes, or have fine-grained control over the typography samples and adjectives, do it here. 18 | - Settings 19 | - Below the settings, everything comes together in the proper order to be compiled. 20 | 21 | Play around! Use SCSS and Compass's colour functions to create colour schemes, try to do fancy stuff in the texture boxes, mess about with floats and margins to customize the layout -- make it your own. 22 | 23 | ##Compass 24 | Style Tiles with SCSS is set up for use with Compass (http://compass-style.org), but does not require it. 25 | 26 | ##What are Style Tiles? 27 | For more on Samantha Warren's awesome Style Tiles, check out http://styletil.es/ and http://www.alistapart.com/articles/style-tiles-and-how-they-work/. 28 | -------------------------------------------------------------------------------- /js/style-tiles.js: -------------------------------------------------------------------------------- 1 | $( function() { 2 | // setHeight() keeps the swatches as squares by setting each swatch's 3 | // height on document load, and updating it when the viewport is resized. 4 | var swatchGrids = $( ".swatchgrid" ); 5 | 6 | function setHeight( elements ) { 7 | $( elements ).each( function() { 8 | var $firstChild = $( this ).find( ":first-child" ); 9 | 10 | $( this ).children().each( function() { 11 | $( this ).height( $firstChild.width() ); 12 | } ); 13 | } ); 14 | } 15 | 16 | function getFontName( sample ) { 17 | // Get the first font-family from the font stack 18 | var fontName = sample.css( "font-family" ).split( "," )[ 0 ]; 19 | 20 | if ( fontName.charAt( 0 ) == "\'" | "\"" ) { 21 | // Remove quotation marks from around the font-family name, 22 | // if there are any 23 | return fontName.substring( 1, fontName.length - 1 ); 24 | } else { 25 | return fontName; 26 | } 27 | } 28 | 29 | // updateFontDetails() changes the HTML of each .font-details-* 30 | // on document load to reflect the styles of the immediately preceding 31 | // .typography-sample. This allows you to update the styles of the 32 | // typography samples on the fly without having to manually enter 33 | // these details into the HTML. 34 | function updateFontDetails() { 35 | $( ".typography-sample" ).each( function() { 36 | var fontName = getFontName( $( this ) ), 37 | fontColor = $( this ).css( "color" ), 38 | fontDetails = $( this ).next( "[class*=font-details-]" ); 39 | 40 | fontDetails.children( ".font-name" ).html( fontName ); 41 | fontDetails.children( ".font-color" ).html( fontColor ); 42 | } ); 43 | } 44 | 45 | updateFontDetails(); 46 | setHeight( swatchGrids ); 47 | 48 | $( window ).resize( function() { 49 | setHeight( swatchGrids ); 50 | } ); 51 | } ); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Style Tiles with SCSS 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Style Tile
Template

16 |
17 |

Project name

18 |

Style tile

19 |

Version 1

20 |
21 |
22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |

Colour swatches

30 |
    31 |
  • 32 |
  • 33 |
  • 34 |
  • 35 |
  • 36 |
37 |
38 | 39 |
40 |

Textures

41 |
    42 |
  • 43 |
  • 44 |
  • 45 |
46 |
47 | 48 |
49 |

Buttons

50 |
51 | Button 1 52 | Button 2 53 |
54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

A sample header

63 |

64 | Font Name, 65 | #color value 66 |

67 | 68 |

An example of a sub header

69 |

70 | Font Name, 71 | #color value 72 |

73 | 74 |

75 | This sample paragraph has strong parts and emphasized parts. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 76 |

77 |

78 | Font Name, 79 | #color value 80 |

81 | 82 | This is an example of a text link. 83 |

84 | Font Name, 85 | #color value 86 |

87 | 88 |
89 | 90 |
91 |

Adjectives

92 |
93 |

Lorem

94 |

Ipsum

95 |

Dolor

96 |
97 |
98 |

Magna

99 |

Amet

100 |

Sit

101 |
102 |
103 | 104 |
105 | 106 |
107 | 108 |
109 | 115 |
116 | 117 | -------------------------------------------------------------------------------- /stylesheets/style.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800); 2 | @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic); 3 | /* 4 | _____,-----------------------,_____ 5 | \ | STYLE TILES WITH SCSS | / 6 | /____|-----------------------|____\ 7 | ___________________________________ 8 | |,---------------------------------,| 9 | || +-------+ +-------+ +-------+ || 10 | || +-------+ | | | | || 11 | || | | | | || 12 | || +-------+ +-------+ +-------+ || 13 | || +-------+ +-------+ +-------+ || 14 | || | | | \ | | | || 15 | || | | | \ | | | || 16 | || +-------+ +-------+ +-------+ || 17 | ||_________________________________|| 18 | '-----------------------------------' 19 | 20 | Documentation at 21 | https://github.com/jeradg/style-tiles-with-scss 22 | 23 | By Jerad Gallinger 24 | http://jeradgallinger.ca 25 | http://twitter.com/jeradg 26 | http://codepen.io/jeradg 27 | http://github.com/jeradg 28 | 29 | Based on Samantha Warren's Style Tiles: 30 | http://styletil.es/ 31 | http://www.alistapart.com/articles/style-tiles-and-how-they-work/ 32 | 33 | */ 34 | /* Web fonts @import */ 35 | /* BASIC STYLING 36 | -------------------------------- */ 37 | /* Colours */ 38 | /* Basic typography */ 39 | /* font color in
*/ 40 | /* Basic button styling */ 41 | /* Basic texture swatch styling */ 42 | /* end basic styling */ 43 | /* ADVANCED STYLING 44 | -------------------------------- */ 45 | /* Main */ 46 | /* Header */ 47 | /* Colour swatches */ 48 | /* Texture swatches */ 49 | /* Buttons */ 50 | /* Typography samples */ 51 | /* Adjectives */ 52 | /* Footer */ 53 | /* end advanced styling */ 54 | /* SETTINGS 55 | -------------------------------- */ 56 | /* Typography samples settings */ 57 | /* Grid settings */ 58 | /* Swatch grid settings (for the boxes containing Possible Colors and Textures */ 59 | /* Footer */ 60 | /* end settings */ 61 | /* ================================================== */ 62 | /* Meyer Reset 63 | http://meyerweb.com/eric/tools/css/reset/ 64 | v2.0 | 20110126 65 | License: none (public domain) 66 | -------------------- */ 67 | /* line 324, ../sass/style.scss */ 68 | html, body, div, span, applet, object, iframe, 69 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 70 | a, abbr, acronym, address, big, cite, code, 71 | del, dfn, em, img, ins, kbd, q, s, samp, 72 | small, strike, strong, sub, sup, tt, var, 73 | b, u, i, center, 74 | dl, dt, dd, ol, ul, li, 75 | fieldset, form, label, legend, 76 | table, caption, tbody, tfoot, thead, tr, th, td, 77 | article, aside, canvas, details, embed, 78 | figure, figcaption, footer, header, hgroup, 79 | menu, nav, output, ruby, section, summary, 80 | time, mark, audio, video { 81 | margin: 0; 82 | padding: 0; 83 | border: 0; 84 | font-size: 100%; 85 | font: inherit; 86 | vertical-align: baseline; 87 | } 88 | 89 | /* HTML5 display-role reset for older browsers */ 90 | /* line 334, ../sass/style.scss */ 91 | article, aside, details, figcaption, figure, 92 | footer, header, hgroup, menu, nav, section { 93 | display: block; 94 | } 95 | 96 | /* line 337, ../sass/style.scss */ 97 | body { 98 | line-height: 1; 99 | } 100 | 101 | /* line 340, ../sass/style.scss */ 102 | ol, ul { 103 | list-style: none; 104 | } 105 | 106 | /* line 343, ../sass/style.scss */ 107 | blockquote, q { 108 | quotes: none; 109 | } 110 | 111 | /* line 347, ../sass/style.scss */ 112 | blockquote:before, blockquote:after, 113 | q:before, q:after { 114 | content: ''; 115 | content: none; 116 | } 117 | 118 | /* line 351, ../sass/style.scss */ 119 | table { 120 | border-collapse: collapse; 121 | border-spacing: 0; 122 | } 123 | 124 | /* Clearfix 125 | -------------------- */ 126 | /* line 359, ../sass/style.scss */ 127 | .group:after { 128 | visibility: hidden; 129 | display: block; 130 | content: ""; 131 | clear: both; 132 | height: 0; 133 | } 134 | 135 | /* line 366, ../sass/style.scss */ 136 | * html .group { 137 | zoom: 1; 138 | } 139 | 140 | /* IE6 */ 141 | /* line 367, ../sass/style.scss */ 142 | *:first-child + html .group { 143 | zoom: 1; 144 | } 145 | 146 | /* IE7 */ 147 | /* General styling 148 | -------------------- */ 149 | /* line 372, ../sass/style.scss */ 150 | *, *:after, *:before { 151 | -webkit-box-sizing: border-box; 152 | -moz-box-sizing: border-box; 153 | box-sizing: border-box; 154 | } 155 | 156 | /* line 378, ../sass/style.scss */ 157 | html { 158 | font-size: 62.5%; 159 | } 160 | 161 | /* line 382, ../sass/style.scss */ 162 | body { 163 | background: white; 164 | font: 1.6em "Droid Serif", serif; 165 | line-height: 1.5; 166 | } 167 | 168 | /* line 388, ../sass/style.scss */ 169 | header, .main, footer { 170 | max-width: 1300px; 171 | margin: 0 auto; 172 | } 173 | 174 | /* Header 175 | -------------------- */ 176 | /* line 396, ../sass/style.scss */ 177 | .header-wrapper { 178 | background: #9f1c19; 179 | } 180 | 181 | /* line 400, ../sass/style.scss */ 182 | header { 183 | padding: 20px; 184 | background: #9f1c19; 185 | } 186 | 187 | /* line 405, ../sass/style.scss */ 188 | header h1, header hgroup { 189 | position: relative; 190 | float: left; 191 | } 192 | 193 | /* line 410, ../sass/style.scss */ 194 | header h1 { 195 | font: bold 3em/1 "Open Sans", sans-serif; 196 | color: white; 197 | text-transform: uppercase; 198 | letter-spacing: -2px; 199 | padding-right: .75em; 200 | } 201 | 202 | /* line 414, ../sass/style.scss */ 203 | header h2 { 204 | font: bold 1.6em "Open Sans", sans-serif; 205 | color: rgba(255, 255, 255, 0.95); 206 | } 207 | 208 | /* line 418, ../sass/style.scss */ 209 | header h3 { 210 | font: italic 1.2em "Open Sans", sans-serif; 211 | color: rgba(255, 255, 255, 0.95); 212 | } 213 | 214 | /* line 422, ../sass/style.scss */ 215 | header h4 { 216 | font: 0.8em "Droid Serif", serif; 217 | color: rgba(255, 255, 255, 0.95); 218 | } 219 | 220 | /* line 426, ../sass/style.scss */ 221 | .project-title { 222 | position: relative; 223 | float: left; 224 | } 225 | 226 | /* Main 227 | -------------------- */ 228 | /* line 434, ../sass/style.scss */ 229 | .main { 230 | padding: 20px; 231 | background: white; 232 | } 233 | 234 | /* line 439, ../sass/style.scss */ 235 | .section-heading { 236 | /* e.g., h3's like "Possible colors", "Textures" */ 237 | font: italic 1.3em "Open Sans", sans-serif; 238 | color: #777; 239 | margin-bottom: .5em; 240 | } 241 | 242 | /* line 443, ../sass/style.scss */ 243 | .main p { 244 | margin-bottom: .5em; 245 | } 246 | 247 | /* line 447, ../sass/style.scss */ 248 | section { 249 | margin-bottom: 2em; 250 | } 251 | 252 | /* Swatches 253 | -------------------- */ 254 | /* line 454, ../sass/style.scss */ 255 | [class*="swatch-"] { 256 | height: 5em; 257 | border: 4px solid white; 258 | box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); 259 | } 260 | 261 | /* line 460, ../sass/style.scss */ 262 | .color-swatch-1 { 263 | background: #9f1c19; 264 | } 265 | 266 | /* line 464, ../sass/style.scss */ 267 | .color-swatch-2 { 268 | background: #65d1fb; 269 | } 270 | 271 | /* line 468, ../sass/style.scss */ 272 | .color-swatch-3 { 273 | background: #05abeb; 274 | } 275 | 276 | /* line 472, ../sass/style.scss */ 277 | .color-swatch-4 { 278 | background: #ff8500; 279 | } 280 | 281 | /* line 476, ../sass/style.scss */ 282 | .color-swatch-5 { 283 | background: #ff241f; 284 | } 285 | 286 | /* Texture swatches 287 | -------------------- */ 288 | /* line 483, ../sass/style.scss */ 289 | [class*="texture-swatch-"] { 290 | overflow: hidden; 291 | height: 8em; 292 | border: 4px solid white; 293 | box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25); 294 | } 295 | 296 | /* line 490, ../sass/style.scss */ 297 | .texture-swatch-1 { 298 | background: url("../img/pw_maze_white.png") top left repeat; 299 | } 300 | 301 | /* line 494, ../sass/style.scss */ 302 | .texture-swatch-2 { 303 | background: url("../img/white_paperboard.png") top left repeat; 304 | } 305 | 306 | /* line 498, ../sass/style.scss */ 307 | .texture-swatch-3 { 308 | background: url("../img/subtle_grunge.png") top left repeat; 309 | } 310 | 311 | /* Buttons 312 | --------------------- */ 313 | /* line 505, ../sass/style.scss */ 314 | [class*="button-"] { 315 | display: inline-block; 316 | position: relative; 317 | margin-right: 1em; 318 | margin-bottom: 1em; 319 | } 320 | 321 | /* line 512, ../sass/style.scss */ 322 | .button-1 { 323 | padding: 1em; 324 | border-radius: 4px; 325 | background: #05abeb; 326 | text-align: center; 327 | text-decoration: none; 328 | font: bold 1.25em/1 "Open Sans", sans-serif; 329 | letter-spacing: 1px; 330 | color: white; 331 | text-transform: uppercase; 332 | text-shadow: 0px -1px 0px #0374a0; 333 | transition: all .2s ease; 334 | } 335 | /* line 160, ../sass/style.scss */ 336 | .button-1:hover { 337 | background: #0374a0; 338 | } 339 | 340 | /* line 516, ../sass/style.scss */ 341 | .button-2 { 342 | padding: 1em; 343 | border-radius: 4px; 344 | background: #ff241f; 345 | text-align: center; 346 | text-decoration: none; 347 | font: bold 1.25em/1 "Open Sans", sans-serif; 348 | letter-spacing: 1px; 349 | color: white; 350 | text-transform: uppercase; 351 | text-shadow: 0px -1px 0px #d20500; 352 | transition: all .2s ease; 353 | } 354 | /* line 177, ../sass/style.scss */ 355 | .button-2:hover { 356 | background: #d20500; 357 | } 358 | 359 | /* Typography samples 360 | --------------------- */ 361 | /* line 523, ../sass/style.scss */ 362 | .typography-samples { 363 | background: white; 364 | padding: 0; 365 | } 366 | @media (min-width: 800px) { 367 | /* line 523, ../sass/style.scss */ 368 | .typography-samples { 369 | padding: 20px; 370 | } 371 | } 372 | 373 | /* line 527, ../sass/style.scss */ 374 | h3.typography-sample { 375 | font: bold 2.4em/1.25 "Open Sans", sans-serif; 376 | margin-bottom: .25em; 377 | color: #363636; 378 | } 379 | 380 | /* line 531, ../sass/style.scss */ 381 | h4.typography-sample { 382 | font: italic 1.5em/1.25 "Droid Serif", serif; 383 | margin-bottom: .25em; 384 | color: #363636; 385 | } 386 | 387 | /* line 535, ../sass/style.scss */ 388 | p.typography-sample { 389 | font: 1em/1.5 "Droid Serif", serif; 390 | color: #222222; 391 | } 392 | /* line 198, ../sass/style.scss */ 393 | p.typography-sample strong { 394 | font-weight: bold; 395 | } 396 | /* line 201, ../sass/style.scss */ 397 | p.typography-sample em { 398 | font-style: italic; 399 | } 400 | 401 | /* line 539, ../sass/style.scss */ 402 | a.typography-sample { 403 | font: bold 1em "Open Sans", sans-serif; 404 | color: #05abeb; 405 | text-decoration: none; 406 | } 407 | /* line 210, ../sass/style.scss */ 408 | a.typography-sample:hover { 409 | color: #0088bd; 410 | } 411 | 412 | /* line 543, ../sass/style.scss */ 413 | p[class*="font-details-"] { 414 | margin-top: .5em; 415 | margin-bottom: 2em; 416 | font: 0.75em/1 "Droid Serif", serif; 417 | color: #6f6f6f; 418 | } 419 | /* line 285, ../sass/style.scss */ 420 | p[class*="font-details-"] .font-color { 421 | font-style: italic; 422 | } 423 | 424 | /* Adjectives 425 | -------------------- */ 426 | /* line 549, ../sass/style.scss */ 427 | .adjective-1 { 428 | font: italic 1.6em/1 "Open Sans", sans-serif; 429 | color: #9f1c19; 430 | } 431 | 432 | /* line 553, ../sass/style.scss */ 433 | .adjective-2 { 434 | font: bold 1.25em/1.25 "Droid Serif", serif; 435 | color: #05abeb; 436 | } 437 | 438 | /* line 556, ../sass/style.scss */ 439 | .adjective-3 { 440 | font: 1.5em/1 "Open Sans", sans-serif; 441 | color: #ff8500; 442 | } 443 | 444 | /* line 560, ../sass/style.scss */ 445 | .adjective-4 { 446 | font: 1.6em/1.15 "Open Sans", sans-serif; 447 | color: #65d1fb; 448 | } 449 | 450 | /* line 564, ../sass/style.scss */ 451 | .adjective-5 { 452 | font: bold italic 3em/0.7 "Open Sans", sans-serif; 453 | color: #ff241f; 454 | } 455 | 456 | /* line 568, ../sass/style.scss */ 457 | .adjective-6 { 458 | font: bold italic 1.8em/1.1 "Droid Serif", serif; 459 | color: #05abeb; 460 | } 461 | 462 | /* Footer 463 | -------------------- */ 464 | /* line 574, ../sass/style.scss */ 465 | .footer-wrapper { 466 | background: white; 467 | } 468 | 469 | /* line 578, ../sass/style.scss */ 470 | footer { 471 | padding: 20px; 472 | font: italic 1em/1.5 "Open Sans", sans-serif; 473 | color: #222222; 474 | } 475 | /* line 265, ../sass/style.scss */ 476 | footer a { 477 | font-weight: bold; 478 | color: #05abeb; 479 | text-decoration: none; 480 | } 481 | 482 | /* Grids 483 | based on Chris Coyier's Dont Overthink It Grids 484 | http://css-tricks.com/dont-overthink-it-grids/ 485 | -------------------- */ 486 | /* line 587, ../sass/style.scss */ 487 | [class*='col-'] { 488 | float: left; 489 | } 490 | 491 | /* line 589, ../sass/style.scss */ 492 | .grid:after { 493 | content: ""; 494 | display: table; 495 | clear: both; 496 | } 497 | 498 | /* line 595, ../sass/style.scss */ 499 | .col-1-2 { 500 | width: 100%; 501 | /* Single-column by default */ 502 | } 503 | @media (min-width: 800px) { 504 | /* line 595, ../sass/style.scss */ 505 | .col-1-2 { 506 | /* 2-column if viewport is wide enough*/ 507 | width: 50%; 508 | } 509 | } 510 | 511 | /* line 602, ../sass/style.scss */ 512 | .col-1-3 { 513 | width: 100%; 514 | } 515 | @media (min-width: 800px) { 516 | /* line 602, ../sass/style.scss */ 517 | .col-1-3 { 518 | width: 33.3333%; 519 | } 520 | } 521 | 522 | /* line 609, ../sass/style.scss */ 523 | [class*="col-"] { 524 | padding: 0; 525 | } 526 | @media (min-width: 800px) { 527 | /* line 609, ../sass/style.scss */ 528 | [class*="col-"] { 529 | padding-right: 2em; 530 | } 531 | } 532 | 533 | /* line 616, ../sass/style.scss */ 534 | [class*="col-"]:last-of-type { 535 | padding-right: 0; 536 | } 537 | 538 | /* Swatch grids 539 | 540 | [Want to add more swatch column options? 541 | 542 | Formula for calculating swatch width: 543 | 544 | width: (100% - ($swatch-margin * (y - 1))) / y; 545 | 546 | where y = number of swatches in a grid row] 547 | 548 | */ 549 | /* line 630, ../sass/style.scss */ 550 | [class*='swatch-'] { 551 | float: left; 552 | } 553 | 554 | /* line 632, ../sass/style.scss */ 555 | .swatchgrid:after { 556 | content: ""; 557 | display: table; 558 | clear: both; 559 | } 560 | 561 | /* line 638, ../sass/style.scss */ 562 | .swatch-1-2 { 563 | width: 49%; 564 | } 565 | 566 | /* line 642, ../sass/style.scss */ 567 | .swatch-1-3 { 568 | width: 32%; 569 | } 570 | 571 | /* line 646, ../sass/style.scss */ 572 | .swatch-1-4 { 573 | width: 23.5%; 574 | } 575 | 576 | /* line 650, ../sass/style.scss */ 577 | .swatch-1-5 { 578 | width: 18.4%; 579 | } 580 | 581 | /* line 654, ../sass/style.scss */ 582 | [class*="swatch-"] { 583 | margin-right: 2%; 584 | } 585 | 586 | /* line 656, ../sass/style.scss */ 587 | [class*="swatch-"]:last-of-type { 588 | margin-right: 0; 589 | } 590 | -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | _____,-----------------------,_____ 3 | \ | STYLE TILES WITH SCSS | / 4 | /____|-----------------------|____\ 5 | ___________________________________ 6 | |,---------------------------------,| 7 | || +-------+ +-------+ +-------+ || 8 | || +-------+ | | | | || 9 | || | | | | || 10 | || +-------+ +-------+ +-------+ || 11 | || +-------+ +-------+ +-------+ || 12 | || | | | \ | | | || 13 | || | | | \ | | | || 14 | || +-------+ +-------+ +-------+ || 15 | ||_________________________________|| 16 | '-----------------------------------' 17 | 18 | Documentation at 19 | https://github.com/jeradg/style-tiles-with-scss 20 | 21 | By Jerad Gallinger 22 | http://jeradgallinger.ca 23 | http://twitter.com/jeradg 24 | http://codepen.io/jeradg 25 | http://github.com/jeradg 26 | 27 | Based on Samantha Warren's Style Tiles: 28 | http://styletil.es/ 29 | http://www.alistapart.com/articles/style-tiles-and-how-they-work/ 30 | 31 | */ 32 | 33 | /* Web fonts @import */ 34 | @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,800italic,400,800); 35 | @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic); 36 | 37 | 38 | /* BASIC STYLING 39 | -------------------------------- */ 40 | 41 | /* Colours */ 42 | $color-1: rgb(159,28,25); 43 | $color-2: rgb(101,209,251); 44 | $color-3: rgb(5,171,235); 45 | $color-4: rgb(255,133,0); 46 | $color-5: rgb(255,36,31); 47 | 48 | $header-background: $color-1; 49 | $body-background: lighten($color-1, 90%); 50 | $typography-samples-background: $body-background; 51 | $footer-background: $body-background; 52 | 53 | /* Basic typography */ 54 | $heading-font-family: 'Open Sans', sans-serif; 55 | $heading-color: desaturate(darken($color-1, 15%), 80%); 56 | 57 | $body-font-family: 'Droid Serif', serif; 58 | $body-font-size: 1.6em; 59 | $body-line-height: 1.5; 60 | $body-color: #222; 61 | 62 | $body-link-font-family: $heading-font-family; 63 | $body-link-color: $color-3; 64 | 65 | $header-color: white; /* font color in
*/ 66 | 67 | /* Basic button styling */ 68 | $button-1-background-color: $color-3; 69 | $button-1-border-radius: 4px; 70 | $button-1-padding: 1em; 71 | 72 | $button-2-background-color: $color-5; 73 | $button-2-border-radius: $button-1-border-radius; 74 | $button-2-padding: $button-1-padding; 75 | 76 | /* Basic texture swatch styling */ 77 | $texture-swatch-1-background: url("../img/pw_maze_white.png") top left repeat; 78 | $texture-swatch-2-background: url("../img/white_paperboard.png") top left repeat; 79 | $texture-swatch-3-background: url("../img/subtle_grunge.png") top left repeat; 80 | 81 | /* end basic styling */ 82 | 83 | 84 | /* ADVANCED STYLING 85 | -------------------------------- */ 86 | /* Main */ 87 | $main-background: $body-background; 88 | $main-padding: 20px; 89 | 90 | @mixin section-heading { /* e.g., h3's like "Possible colors", "Textures" */ 91 | font: italic 1.3em $heading-font-family; 92 | color: #777; 93 | margin-bottom: .5em; 94 | } 95 | 96 | /* Header */ 97 | $header-padding: $main-padding; 98 | 99 | @mixin header-h1 { 100 | //text-indent: -9999px; /*Uncomment this line if you're replacing the text with a logo. */ 101 | font: bold 3em/1 $heading-font-family; 102 | color: $header-color; 103 | text-transform: uppercase; 104 | letter-spacing: -2px; 105 | padding-right: .75em; 106 | } 107 | 108 | @mixin header-h2 { 109 | font: bold 1.6em $heading-font-family; 110 | color: rgba($header-color, .95); 111 | } 112 | 113 | @mixin header-h3 { 114 | font: italic 1.2em $heading-font-family; 115 | color: rgba($header-color, .95); 116 | } 117 | 118 | @mixin header-h4 { 119 | font: .8em $body-font-family; 120 | color: rgba($header-color, .95); 121 | } 122 | 123 | /* Colour swatches */ 124 | $color-swatch-1: $color-1; 125 | $color-swatch-2: $color-2; 126 | $color-swatch-3: $color-3; 127 | $color-swatch-4: $color-4; 128 | $color-swatch-5: $color-5; 129 | 130 | $color-swatch-height: 5em; 131 | 132 | /* Texture swatches */ 133 | @mixin texture-swatch-1 { 134 | background: $texture-swatch-1-background; 135 | } 136 | 137 | @mixin texture-swatch-2 { 138 | background: $texture-swatch-2-background; 139 | } 140 | 141 | @mixin texture-swatch-3 { 142 | background: $texture-swatch-3-background; 143 | } 144 | 145 | $texture-swatch-height: 8em; 146 | 147 | /* Buttons */ 148 | @mixin button-1 { 149 | padding: $button-1-padding; 150 | border-radius: $button-1-border-radius; 151 | background: $button-1-background-color; 152 | text-align: center; 153 | text-decoration: none; 154 | font: bold 1.25em/1 $heading-font-family; 155 | letter-spacing: 1px; 156 | color: lighten($button-1-background-color, 60%); 157 | text-transform: uppercase; 158 | text-shadow: 0px -1px 0px darken($button-1-background-color, 15%); 159 | transition: all .2s ease; 160 | &:hover { 161 | background: darken($button-1-background-color, 15%); 162 | } 163 | } 164 | 165 | @mixin button-2 { 166 | padding: $button-2-padding; 167 | border-radius: $button-2-border-radius; 168 | background: $button-2-background-color; 169 | text-align: center; 170 | text-decoration: none; 171 | font: bold 1.25em/1 $heading-font-family; 172 | letter-spacing: 1px; 173 | color: lighten($button-2-background-color, 60%); 174 | text-transform: uppercase; 175 | text-shadow: 0px -1px 0px darken($button-2-background-color, 15%); 176 | transition: all .2s ease; 177 | &:hover { 178 | background: darken($button-2-background-color, 15%); 179 | } 180 | } 181 | 182 | /* Typography samples */ 183 | @mixin typography-sample-h3 { 184 | font: bold 2.4em/1.25 $heading-font-family; 185 | margin-bottom: .25em; 186 | color: $heading-color; 187 | } 188 | 189 | @mixin typography-sample-h4 { 190 | font: italic 1.5em/1.25 $body-font-family; 191 | margin-bottom: .25em; 192 | color: $heading-color; 193 | } 194 | 195 | @mixin typography-sample-p { 196 | font: 1em/1.5 $body-font-family; 197 | color: $body-color; 198 | strong { 199 | font-weight: bold; 200 | } 201 | em { 202 | font-style: italic; 203 | } 204 | } 205 | 206 | @mixin typography-sample-a { 207 | font: bold 1em $body-link-font-family; 208 | color: $body-link-color; 209 | text-decoration: none; 210 | &:hover { 211 | color: darken(saturate($body-link-color, 50%), 10%); 212 | } 213 | } 214 | 215 | @mixin typography-samples { 216 | background: $typography-samples-background; 217 | padding: 0; 218 | @media (min-width: 800px) { 219 | padding: 20px; 220 | } 221 | } 222 | 223 | /* Adjectives */ 224 | 225 | @mixin adjective-1 { 226 | font: italic 1.6em/1 $heading-font-family; 227 | color: $color-1; 228 | } 229 | 230 | @mixin adjective-2 { 231 | font: bold 1.25em/1.25 $body-font-family; 232 | color: $color-3; 233 | } 234 | 235 | @mixin adjective-3 { 236 | font: 1.5em/1 $heading-font-family; 237 | color: $color-4; 238 | } 239 | 240 | @mixin adjective-4 { 241 | font: 1.6em/1.15 $heading-font-family; 242 | color: $color-2; 243 | } 244 | 245 | @mixin adjective-5 { 246 | font: bold italic 3em/.7 $heading-font-family; 247 | color: $color-5; 248 | } 249 | 250 | @mixin adjective-6 { 251 | font: bold italic 1.8em/1.1 $body-font-family; 252 | color: $color-3; 253 | } 254 | 255 | /* Footer */ 256 | $footer-padding: $main-padding; 257 | $footer-background: $main-background; 258 | 259 | $footer-color: white; 260 | 261 | @mixin footer { 262 | padding: $footer-padding; 263 | font: italic 1em/1.5 $heading-font-family; 264 | color: $body-color; 265 | a { 266 | font-weight: bold; 267 | color: $color-3; 268 | text-decoration: none; 269 | } 270 | } 271 | /* end advanced styling */ 272 | 273 | 274 | /* SETTINGS 275 | -------------------------------- */ 276 | 277 | /* Typography samples settings */ 278 | $font-details-font: .75em/1 $body-font-family; 279 | 280 | @mixin font-details { 281 | margin-top: .5em; 282 | margin-bottom: 2em; 283 | font: $font-details-font; 284 | color: lighten($body-color, 30%); 285 | .font-color { 286 | font-style: italic; 287 | } 288 | } 289 | 290 | /* Grid settings */ 291 | $grid-padding: 2em; 292 | 293 | /* Swatch grid settings (for the boxes containing Possible Colors and Textures */ 294 | $swatch-border: 4px solid white; 295 | $swatch-shadow: 0px 0px 6px 0px rgba(0,0,0,.25); 296 | $swatch-margin: 2%; 297 | 298 | /* Footer */ 299 | 300 | 301 | /* end settings */ 302 | 303 | 304 | 305 | /* ================================================== */ 306 | 307 | /* Meyer Reset 308 | http://meyerweb.com/eric/tools/css/reset/ 309 | v2.0 | 20110126 310 | License: none (public domain) 311 | -------------------- */ 312 | html, body, div, span, applet, object, iframe, 313 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 314 | a, abbr, acronym, address, big, cite, code, 315 | del, dfn, em, img, ins, kbd, q, s, samp, 316 | small, strike, strong, sub, sup, tt, var, 317 | b, u, i, center, 318 | dl, dt, dd, ol, ul, li, 319 | fieldset, form, label, legend, 320 | table, caption, tbody, tfoot, thead, tr, th, td, 321 | article, aside, canvas, details, embed, 322 | figure, figcaption, footer, header, hgroup, 323 | menu, nav, output, ruby, section, summary, 324 | time, mark, audio, video { 325 | margin: 0; 326 | padding: 0; 327 | border: 0; 328 | font-size: 100%; 329 | font: inherit; 330 | vertical-align: baseline; 331 | } 332 | /* HTML5 display-role reset for older browsers */ 333 | article, aside, details, figcaption, figure, 334 | footer, header, hgroup, menu, nav, section { 335 | display: block; 336 | } 337 | body { 338 | line-height: 1; 339 | } 340 | ol, ul { 341 | list-style: none; 342 | } 343 | blockquote, q { 344 | quotes: none; 345 | } 346 | blockquote:before, blockquote:after, 347 | q:before, q:after { 348 | content: ''; 349 | content: none; 350 | } 351 | table { 352 | border-collapse: collapse; 353 | border-spacing: 0; 354 | } 355 | 356 | /* Clearfix 357 | -------------------- */ 358 | 359 | .group:after { 360 | visibility: hidden; 361 | display: block; 362 | content: ""; 363 | clear: both; 364 | height: 0; 365 | } 366 | * html .group { zoom: 1; } /* IE6 */ 367 | *:first-child+html .group { zoom: 1; } /* IE7 */ 368 | 369 | /* General styling 370 | -------------------- */ 371 | 372 | *, *:after, *:before { 373 | -webkit-box-sizing: border-box; 374 | -moz-box-sizing: border-box; 375 | box-sizing: border-box; 376 | } 377 | 378 | html { 379 | font-size: 62.5%; 380 | } 381 | 382 | body { 383 | background: $body-background; 384 | font: $body-font-size $body-font-family; 385 | line-height: $body-line-height; 386 | } 387 | 388 | header, .main, footer { 389 | max-width: 1300px; 390 | margin: 0 auto; 391 | } 392 | 393 | /* Header 394 | -------------------- */ 395 | 396 | .header-wrapper { 397 | background: $header-background; 398 | } 399 | 400 | header { 401 | padding: $header-padding; 402 | background: $header-background; 403 | } 404 | 405 | header h1, header hgroup { 406 | position: relative; 407 | float: left; 408 | } 409 | 410 | header h1 { 411 | @include header-h1; 412 | } 413 | 414 | header h2 { 415 | @include header-h2; 416 | } 417 | 418 | header h3 { 419 | @include header-h3; 420 | } 421 | 422 | header h4 { 423 | @include header-h4; 424 | } 425 | 426 | .project-title { 427 | position: relative; 428 | float: left; 429 | } 430 | 431 | /* Main 432 | -------------------- */ 433 | 434 | .main { 435 | padding: $main-padding; 436 | background: $main-background; 437 | } 438 | 439 | .section-heading { 440 | @include section-heading; 441 | } 442 | 443 | .main p { 444 | margin-bottom: .5em; 445 | } 446 | 447 | section { 448 | margin-bottom: 2em; 449 | } 450 | 451 | /* Swatches 452 | -------------------- */ 453 | 454 | [class*="swatch-"] { 455 | height: $color-swatch-height; 456 | border: $swatch-border; 457 | box-shadow: $swatch-shadow; 458 | } 459 | 460 | .color-swatch-1 { 461 | background: $color-swatch-1; 462 | } 463 | 464 | .color-swatch-2 { 465 | background: $color-swatch-2; 466 | } 467 | 468 | .color-swatch-3 { 469 | background: $color-swatch-3; 470 | } 471 | 472 | .color-swatch-4 { 473 | background: $color-swatch-4; 474 | } 475 | 476 | .color-swatch-5 { 477 | background: $color-swatch-5; 478 | } 479 | 480 | /* Texture swatches 481 | -------------------- */ 482 | 483 | [class*="texture-swatch-"] { 484 | overflow: hidden; 485 | height: $texture-swatch-height; 486 | border: $swatch-border; 487 | box-shadow: $swatch-shadow; 488 | } 489 | 490 | .texture-swatch-1 { 491 | @include texture-swatch-1; 492 | } 493 | 494 | .texture-swatch-2 { 495 | @include texture-swatch-2; 496 | } 497 | 498 | .texture-swatch-3 { 499 | @include texture-swatch-3; 500 | } 501 | 502 | /* Buttons 503 | --------------------- */ 504 | 505 | [class*="button-"] { 506 | display: inline-block; 507 | position: relative; 508 | margin-right: 1em; 509 | margin-bottom: 1em; 510 | } 511 | 512 | .button-1 { 513 | @include button-1 514 | } 515 | 516 | .button-2 { 517 | @include button-2 518 | } 519 | 520 | /* Typography samples 521 | --------------------- */ 522 | 523 | .typography-samples { 524 | @include typography-samples 525 | } 526 | 527 | h3.typography-sample { 528 | @include typography-sample-h3; 529 | } 530 | 531 | h4.typography-sample { 532 | @include typography-sample-h4; 533 | } 534 | 535 | p.typography-sample { 536 | @include typography-sample-p; 537 | } 538 | 539 | a.typography-sample { 540 | @include typography-sample-a; 541 | } 542 | 543 | p[class*="font-details-"] { 544 | @include font-details; 545 | } 546 | 547 | /* Adjectives 548 | -------------------- */ 549 | .adjective-1 { 550 | @include adjective-1; 551 | } 552 | 553 | .adjective-2 { 554 | @include adjective-2; 555 | } 556 | .adjective-3 { 557 | @include adjective-3; 558 | } 559 | 560 | .adjective-4 { 561 | @include adjective-4; 562 | } 563 | 564 | .adjective-5 { 565 | @include adjective-5; 566 | } 567 | 568 | .adjective-6 { 569 | @include adjective-6; 570 | } 571 | 572 | /* Footer 573 | -------------------- */ 574 | .footer-wrapper { 575 | background: $footer-background; 576 | } 577 | 578 | footer { 579 | @include footer; 580 | } 581 | 582 | /* Grids 583 | based on Chris Coyier's Dont Overthink It Grids 584 | http://css-tricks.com/dont-overthink-it-grids/ 585 | -------------------- */ 586 | 587 | [class*='col-'] { float: left; } 588 | 589 | .grid:after { 590 | content: ""; 591 | display: table; 592 | clear: both; 593 | } 594 | 595 | .col-1-2 { 596 | width: 100%; /* Single-column by default */ 597 | @media ( min-width: 800px ) { /* 2-column if viewport is wide enough*/ 598 | width: 50%; 599 | } 600 | } 601 | 602 | .col-1-3 { 603 | width: 100%; 604 | @media ( min-width: 800px ) { 605 | width: 33.3333%; 606 | } 607 | } 608 | 609 | [class*="col-"] { 610 | padding: 0; 611 | @media ( min-width: 800px ) { 612 | padding-right: $grid-padding; 613 | } 614 | } 615 | 616 | [class*="col-"]:last-of-type { padding-right: 0; } 617 | 618 | /* Swatch grids 619 | 620 | [Want to add more swatch column options? 621 | 622 | Formula for calculating swatch width: 623 | 624 | width: (100% - ($swatch-margin * (y - 1))) / y; 625 | 626 | where y = number of swatches in a grid row] 627 | 628 | */ 629 | 630 | [class*='swatch-'] { float: left; } 631 | 632 | .swatchgrid:after { 633 | content: ""; 634 | display: table; 635 | clear: both; 636 | } 637 | 638 | .swatch-1-2 { 639 | width: ( 100% - ( $swatch-margin * ( 1 ) ) ) / 2; 640 | } 641 | 642 | .swatch-1-3 { 643 | width: ( 100% - ( $swatch-margin * ( 2 ) ) ) / 3; 644 | } 645 | 646 | .swatch-1-4 { 647 | width: ( 100% - ( $swatch-margin * ( 3 ) ) ) / 4; 648 | } 649 | 650 | .swatch-1-5 { 651 | width: ( 100% - ( $swatch-margin * ( 4 ) ) ) / 5; 652 | } 653 | 654 | [class*="swatch-"] { margin-right: $swatch-margin; } 655 | 656 | [class*="swatch-"]:last-of-type { margin-right: 0; } -------------------------------------------------------------------------------- /js/jquery-1.9.0.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("