SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 @charset "UTF-8";6/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */7/**8 * 1. Change the default font family in all browsers (opinionated).9 * 2. Correct the line height in all browsers.10 * 3. Prevent adjustments of font size after orientation changes in11 * IE on Windows Phone and in iOS.12 */13/* Document14 ========================================================================== */15html {16 font-family: sans-serif;17 /* 1 */18 line-height: 1.15;19 /* 2 */20 -ms-text-size-adjust: 100%;21 /* 3 */22 -webkit-text-size-adjust: 100%;23 /* 3 */ }24 25/* Sections26 ========================================================================== */27/**28 * Remove the margin in all browsers (opinionated).29 */30body {31 margin: 0; }32 33/**34 * Add the correct display in IE 9-.35 */36article,37aside,38footer,39header,40nav,41section {42 display: block; }43 44/**45 * Correct the font size and margin on `h1` elements within `section` and46 * `article` contexts in Chrome, Firefox, and Safari.47 */48h1 {49 font-size: 2em;50 margin: 0.67em 0; }51 52/* Grouping content53 ========================================================================== */54/**55 * Add the correct display in IE 9-.56 * 1. Add the correct display in IE.57 */58figcaption,59figure,60main {61 /* 1 */62 display: block; }63 64/**65 * Add the correct margin in IE 8.66 */67figure {68 margin: 1em 40px; }69 70/**71 * 1. Add the correct box sizing in Firefox.72 * 2. Show the overflow in Edge and IE.73 */74hr {75 box-sizing: content-box;76 /* 1 */77 height: 0;78 /* 1 */79 overflow: visible;80 /* 2 */ }81 82/**83 * 1. Correct the inheritance and scaling of font size in all browsers.84 * 2. Correct the odd `em` font sizing in all browsers.85 */86pre {87 font-family: monospace, monospace;88 /* 1 */89 font-size: 1em;90 /* 2 */ }91 92/* Text-level semantics93 ========================================================================== */94/**95 * 1. Remove the gray background on active links in IE 10.96 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.97 */98a {99 background-color: transparent;100 /* 1 */101 -webkit-text-decoration-skip: objects;102 /* 2 */ }103 104/**105 * Remove the outline on focused links when they are also active or hovered106 * in all browsers (opinionated).107 */108a:active,109a:hover {110 outline-width: 0; }111 112/**113 * 1. Remove the bottom border in Firefox 39-.114 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.115 */116abbr[title] {117 border-bottom: none;118 /* 1 */119 text-decoration: underline;120 /* 2 */121 text-decoration: underline dotted;122 /* 2 */ }123 124/**125 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.126 */127b,128strong {129 font-weight: inherit; }130 131/**132 * Add the correct font weight in Chrome, Edge, and Safari.133 */134b,135strong {136 font-weight: bolder; }137 138/**139 * 1. Correct the inheritance and scaling of font size in all browsers.140 * 2. Correct the odd `em` font sizing in all browsers.141 */142code,143kbd,144samp {145 font-family: monospace, monospace;146 /* 1 */147 font-size: 1em;148 /* 2 */ }149 150/**151 * Add the correct font style in Android 4.3-.152 */153dfn {154 font-style: italic; }155 156/**157 * Add the correct background and color in IE 9-.158 */159mark {160 background-color: #ff0;161 color: #000; }162 163/**164 * Add the correct font size in all browsers.165 */166small {167 font-size: 80%; }168 169/**170 * Prevent `sub` and `sup` elements from affecting the line height in171 * all browsers.172 */173sub,174sup {175 font-size: 75%;176 line-height: 0;177 position: relative;178 vertical-align: baseline; }179 180sub {181 bottom: -0.25em; }182 183sup {184 top: -0.5em; }185 186/* Embedded content187 ========================================================================== */188/**189 * Add the correct display in IE 9-.190 */191audio,192video {193 display: inline-block; }194 195/**196 * Add the correct display in iOS 4-7.197 */198audio:not([controls]) {199 display: none;200 height: 0; }201 202/**203 * Remove the border on images inside links in IE 10-.204 */205img {206 border-style: none; }207 208/**209 * Hide the overflow in IE.210 */211svg:not(:root) {212 overflow: hidden; }213 214/* Forms215 ========================================================================== */216/**217 * 1. Change the font styles in all browsers (opinionated).218 * 2. Remove the margin in Firefox and Safari.219 */220button,221input,222optgroup,223select,224textarea {225 font-family: sans-serif;226 /* 1 */227 font-size: 100%;228 /* 1 */229 line-height: 1.15;230 /* 1 */231 margin: 0;232 /* 2 */ }233 234/**235 * Show the overflow in IE.236 * 1. Show the overflow in Edge.237 */238button,239input {240 /* 1 */241 overflow: visible; }242 243/**244 * Remove the inheritance of text transform in Edge, Firefox, and IE.245 * 1. Remove the inheritance of text transform in Firefox.246 */247button,248select {249 /* 1 */250 text-transform: none; }251 252/**253 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`254 * controls in Android 4.255 * 2. Correct the inability to style clickable types in iOS and Safari.256 */257button,258html [type="button"],259[type="reset"],260[type="submit"] {261 -webkit-appearance: button;262 /* 2 */ }263 264/**265 * Remove the inner border and padding in Firefox.266 */267button::-moz-focus-inner,268[type="button"]::-moz-focus-inner,269[type="reset"]::-moz-focus-inner,270[type="submit"]::-moz-focus-inner {271 border-style: none;272 padding: 0; }273 274/**275 * Restore the focus styles unset by the previous rule.276 */277button:-moz-focusring,278[type="button"]:-moz-focusring,279[type="reset"]:-moz-focusring,280[type="submit"]:-moz-focusring {281 outline: 1px dotted ButtonText; }282 283/**284 * Change the border, margin, and padding in all browsers (opinionated).285 */286fieldset {287 border: 1px solid #c0c0c0;288 margin: 0 2px;289 padding: 0.35em 0.625em 0.75em; }290 291/**292 * 1. Correct the text wrapping in Edge and IE.293 * 2. Correct the color inheritance from `fieldset` elements in IE.294 * 3. Remove the padding so developers are not caught out when they zero out295 * `fieldset` elements in all browsers.296 */297legend {298 box-sizing: border-box;299 /* 1 */300 color: inherit;301 /* 2 */302 display: table;303 /* 1 */304 max-width: 100%;305 /* 1 */306 padding: 0;307 /* 3 */308 white-space: normal;309 /* 1 */ }310 311/**312 * 1. Add the correct display in IE 9-.313 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.314 */315progress {316 display: inline-block;317 /* 1 */318 vertical-align: baseline;319 /* 2 */ }320 321/**322 * Remove the default vertical scrollbar in IE.323 */324textarea {325 overflow: auto; }326 327/**328 * 1. Add the correct box sizing in IE 10-.329 * 2. Remove the padding in IE 10-.330 */331[type="checkbox"],332[type="radio"] {333 box-sizing: border-box;334 /* 1 */335 padding: 0;336 /* 2 */ }337 338/**339 * Correct the cursor style of increment and decrement buttons in Chrome.340 */341[type="number"]::-webkit-inner-spin-button,342[type="number"]::-webkit-outer-spin-button {343 height: auto; }344 345/**346 * 1. Correct the odd appearance in Chrome and Safari.347 * 2. Correct the outline style in Safari.348 */349[type="search"] {350 -webkit-appearance: textfield;351 /* 1 */352 outline-offset: -2px;353 /* 2 */ }354 355/**356 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.357 */358[type="search"]::-webkit-search-cancel-button,359[type="search"]::-webkit-search-decoration {360 -webkit-appearance: none; }361 362/**363 * 1. Correct the inability to style clickable types in iOS and Safari.364 * 2. Change font properties to `inherit` in Safari.365 */366::-webkit-file-upload-button {367 -webkit-appearance: button;368 /* 1 */369 font: inherit;370 /* 2 */ }371 372/* Interactive373 ========================================================================== */374/*375 * Add the correct display in IE 9-.376 * 1. Add the correct display in Edge, IE, and Firefox.377 */378details,379menu {380 display: block; }381 382/*383 * Add the correct display in all browsers.384 */385summary {386 display: list-item; }387 388/* Scripting389 ========================================================================== */390/**391 * Add the correct display in IE 9-.392 */393canvas {394 display: inline-block; }395 396/**397 * Add the correct display in IE.398 */399template {400 display: none; }401 402/* Hidden403 ========================================================================== */404/**405 * Add the correct display in IE 10-.406 */407[hidden] {408 display: none; }409 410/*411 412 Tachyons413 COLOR VARIABLES414 415 Grayscale416 - Solids417 - Transparencies418 Colors419 420*/421/*422 423 CUSTOM MEDIA QUERIES424 425 Media query values can be changed to fit your own content.426 There are no magic bullets when it comes to media query width values.427 They should be declared in em units - and they should be set to meet428 the needs of your content. You can also add additional media queries,429 or remove some of the existing ones.430 431 These media queries can be referenced like so:432 433 @media (--breakpoint-not-small) {434 .medium-and-larger-specific-style {435 background-color: red;436 }437 }438 439 @media (--breakpoint-medium) {440 .medium-screen-specific-style {441 background-color: red;442 }443 }444 445 @media (--breakpoint-large) {446 .large-and-larger-screen-specific-style {447 background-color: red;448 }449 }450 451*/452/* Media Queries */453/*454 455 DEBUG CHILDREN456 Docs: http://tachyons.io/docs/debug/457 458 Just add the debug class to any element to see outlines on its459 children.460 461*/462.debug * {463 outline: 1px solid gold; }464 465.debug-white * {466 outline: 1px solid white; }467 468.debug-black * {469 outline: 1px solid black; }470 471/*472 473 DEBUG GRID474 http://tachyons.io/docs/debug-grid/475 476 Can be useful for debugging layout issues477 or helping to make sure things line up perfectly.478 Just tack one of these classes onto a parent element.479 480*/481.debug-grid {482 background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; }483 484.debug-grid-16 {485 background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; }486 487.debug-grid-8-solid {488 background: white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; }489 490.debug-grid-16-solid {491 background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; }492 493/*494 495 BOX SIZING496 497*/498html,499body,500div,501article,502section,503main,504footer,505header,506form,507fieldset,508legend,509pre,510code,511a,512h1, h2, h3, h4, h5, h6,513p,514ul,515ol,516li,517dl,518dt,519dd,520textarea,521table,522td,523th,524tr,525input[type="email"],526input[type="number"],527input[type="password"],528input[type="tel"],529input[type="text"],530input[type="url"],531.border-box {532 box-sizing: border-box; }533 534/*535 536 ASPECT RATIOS537 538*/539/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.540 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e541 * Make sure there are no height and width attributes on the embedded media.542 * Adapted from: https://github.com/suitcss/components-flex-embed543 *544 * Example:545 *546 * <div class="aspect-ratio aspect-ratio--16x9">547 * 548 * </div>549 *550 * */551.aspect-ratio {552 height: 0;553 position: relative; }554 555.aspect-ratio--16x9 {556 padding-bottom: 56.25%; }557 558.aspect-ratio--9x16 {559 padding-bottom: 177.77%; }560 561.aspect-ratio--4x3 {562 padding-bottom: 75%; }563 564.aspect-ratio--3x4 {565 padding-bottom: 133.33%; }566 567.aspect-ratio--6x4 {568 padding-bottom: 66.6%; }569 570.aspect-ratio--4x6 {571 padding-bottom: 150%; }572 573.aspect-ratio--8x5 {574 padding-bottom: 62.5%; }575 576.aspect-ratio--5x8 {577 padding-bottom: 160%; }578 579.aspect-ratio--7x5 {580 padding-bottom: 71.42%; }581 582.aspect-ratio--5x7 {583 padding-bottom: 140%; }584 585.aspect-ratio--1x1 {586 padding-bottom: 100%; }587 588.aspect-ratio--object {589 position: absolute;590 top: 0;591 right: 0;592 bottom: 0;593 left: 0;594 width: 100%;595 height: 100%;596 z-index: 100; }597 598@media screen and (min-width: 30em) {599 .aspect-ratio-ns {600 height: 0;601 position: relative; }602 603 .aspect-ratio--16x9-ns {604 padding-bottom: 56.25%; }605 606 .aspect-ratio--9x16-ns {607 padding-bottom: 177.77%; }608 609 .aspect-ratio--4x3-ns {610 padding-bottom: 75%; }611 612 .aspect-ratio--3x4-ns {613 padding-bottom: 133.33%; }614 615 .aspect-ratio--6x4-ns {616 padding-bottom: 66.6%; }617 618 .aspect-ratio--4x6-ns {619 padding-bottom: 150%; }620 621 .aspect-ratio--8x5-ns {622 padding-bottom: 62.5%; }623 624 .aspect-ratio--5x8-ns {625 padding-bottom: 160%; }626 627 .aspect-ratio--7x5-ns {628 padding-bottom: 71.42%; }629 630 .aspect-ratio--5x7-ns {631 padding-bottom: 140%; }632 633 .aspect-ratio--1x1-ns {634 padding-bottom: 100%; }635 636 .aspect-ratio--object-ns {637 position: absolute;638 top: 0;639 right: 0;640 bottom: 0;641 left: 0;642 width: 100%;643 height: 100%;644 z-index: 100; } }645@media screen and (min-width: 30em) and (max-width: 60em) {646 .aspect-ratio-m {647 height: 0;648 position: relative; }649 650 .aspect-ratio--16x9-m {651 padding-bottom: 56.25%; }652 653 .aspect-ratio--9x16-m {654 padding-bottom: 177.77%; }655 656 .aspect-ratio--4x3-m {657 padding-bottom: 75%; }658 659 .aspect-ratio--3x4-m {660 padding-bottom: 133.33%; }661 662 .aspect-ratio--6x4-m {663 padding-bottom: 66.6%; }664 665 .aspect-ratio--4x6-m {666 padding-bottom: 150%; }667 668 .aspect-ratio--8x5-m {669 padding-bottom: 62.5%; }670 671 .aspect-ratio--5x8-m {672 padding-bottom: 160%; }673 674 .aspect-ratio--7x5-m {675 padding-bottom: 71.42%; }676 677 .aspect-ratio--5x7-m {678 padding-bottom: 140%; }679 680 .aspect-ratio--1x1-m {681 padding-bottom: 100%; }682 683 .aspect-ratio--object-m {684 position: absolute;685 top: 0;686 right: 0;687 bottom: 0;688 left: 0;689 width: 100%;690 height: 100%;691 z-index: 100; } }692@media screen and (min-width: 60em) {693 .aspect-ratio-l {694 height: 0;695 position: relative; }696 697 .aspect-ratio--16x9-l {698 padding-bottom: 56.25%; }699 700 .aspect-ratio--9x16-l {701 padding-bottom: 177.77%; }702 703 .aspect-ratio--4x3-l {704 padding-bottom: 75%; }705 706 .aspect-ratio--3x4-l {707 padding-bottom: 133.33%; }708 709 .aspect-ratio--6x4-l {710 padding-bottom: 66.6%; }711 712 .aspect-ratio--4x6-l {713 padding-bottom: 150%; }714 715 .aspect-ratio--8x5-l {716 padding-bottom: 62.5%; }717 718 .aspect-ratio--5x8-l {719 padding-bottom: 160%; }720 721 .aspect-ratio--7x5-l {722 padding-bottom: 71.42%; }723 724 .aspect-ratio--5x7-l {725 padding-bottom: 140%; }726 727 .aspect-ratio--1x1-l {728 padding-bottom: 100%; }729 730 .aspect-ratio--object-l {731 position: absolute;732 top: 0;733 right: 0;734 bottom: 0;735 left: 0;736 width: 100%;737 height: 100%;738 z-index: 100; } }739/*740 741 IMAGES742 Docs: http://tachyons.io/docs/elements/images/743 744*/745/* Responsive images! */746img {747 max-width: 100%; }748 749/*750 751 BACKGROUND SIZE752 Docs: http://tachyons.io/docs/themes/background-size/753 754 Media Query Extensions:755 -ns = not-small756 -m = medium757 -l = large758 759*/760/*761 Often used in combination with background image set as an inline style762 on an html element.763*/764.cover {765 background-size: cover !important; }766 767.contain {768 background-size: contain !important; }769 770@media screen and (min-width: 30em) {771 .cover-ns {772 background-size: cover !important; }773 774 .contain-ns {775 background-size: contain !important; } }776@media screen and (min-width: 30em) and (max-width: 60em) {777 .cover-m {778 background-size: cover !important; }779 780 .contain-m {781 background-size: contain !important; } }782@media screen and (min-width: 60em) {783 .cover-l {784 background-size: cover !important; }785 786 .contain-l {787 background-size: contain !important; } }788/*789 790 BACKGROUND POSITION791 792 Base:793 bg = background794 795 Modifiers:796 -center = center center797 -top = top center798 -right = center right799 -bottom = bottom center800 -left = center left801 802 Media Query Extensions:803 -ns = not-small804 -m = medium805 -l = large806 807 */808.bg-center {809 background-repeat: no-repeat;810 background-position: center center; }811 812.bg-top {813 background-repeat: no-repeat;814 background-position: top center; }815 816.bg-right {817 background-repeat: no-repeat;818 background-position: center right; }819 820.bg-bottom {821 background-repeat: no-repeat;822 background-position: bottom center; }823 824.bg-left {825 background-repeat: no-repeat;826 background-position: center left; }827 828@media screen and (min-width: 30em) {829 .bg-center-ns {830 background-repeat: no-repeat;831 background-position: center center; }832 833 .bg-top-ns {834 background-repeat: no-repeat;835 background-position: top center; }836 837 .bg-right-ns {838 background-repeat: no-repeat;839 background-position: center right; }840 841 .bg-bottom-ns {842 background-repeat: no-repeat;843 background-position: bottom center; }844 845 .bg-left-ns {846 background-repeat: no-repeat;847 background-position: center left; } }848@media screen and (min-width: 30em) and (max-width: 60em) {849 .bg-center-m {850 background-repeat: no-repeat;851 background-position: center center; }852 853 .bg-top-m {854 background-repeat: no-repeat;855 background-position: top center; }856 857 .bg-right-m {858 background-repeat: no-repeat;859 background-position: center right; }860 861 .bg-bottom-m {862 background-repeat: no-repeat;863 background-position: bottom center; }864 865 .bg-left-m {866 background-repeat: no-repeat;867 background-position: center left; } }868@media screen and (min-width: 60em) {869 .bg-center-l {870 background-repeat: no-repeat;871 background-position: center center; }872 873 .bg-top-l {874 background-repeat: no-repeat;875 background-position: top center; }876 877 .bg-right-l {878 background-repeat: no-repeat;879 background-position: center right; }880 881 .bg-bottom-l {882 background-repeat: no-repeat;883 background-position: bottom center; }884 885 .bg-left-l {886 background-repeat: no-repeat;887 background-position: center left; } }888/*889 890 OUTLINES891 892 Media Query Extensions:893 -ns = not-small894 -m = medium895 -l = large896 897*/898.outline {899 outline: 1px solid; }900 901.outline-transparent {902 outline: 1px solid transparent; }903 904.outline-0 {905 outline: 0; }906 907@media screen and (min-width: 30em) {908 .outline-ns {909 outline: 1px solid; }910 911 .outline-transparent-ns {912 outline: 1px solid transparent; }913 914 .outline-0-ns {915 outline: 0; } }916@media screen and (min-width: 30em) and (max-width: 60em) {917 .outline-m {918 outline: 1px solid; }919 920 .outline-transparent-m {921 outline: 1px solid transparent; }922 923 .outline-0-m {924 outline: 0; } }925@media screen and (min-width: 30em) and (max-width: 60em) {926 .outline-l {927 outline: 1px solid; }928 929 .outline-transparent-l {930 outline: 1px solid transparent; }931 932 .outline-0-l {933 outline: 0; } }934/*935 936 BORDERS937 Docs: http://tachyons.io/docs/themes/borders/938 939 Base:940 b = border941 942 Modifiers:943 a = all944 t = top945 r = right946 b = bottom947 l = left948 n = none949 950 Media Query Extensions:951 -ns = not-small952 -m = medium953 -l = large954 955*/956.ba, article .well {957 border-style: solid;958 border-width: 1px; }959 960.bt, footer {961 border-top-style: solid;962 border-top-width: 1px; }963 964.br {965 border-right-style: solid;966 border-right-width: 1px; }967 968.bb, article table thead tr th, article table tbody tr td {969 border-bottom-style: solid;970 border-bottom-width: 1px; }971 972.bl, article blockquote {973 border-left-style: solid;974 border-left-width: 1px; }975 976.bn {977 border-style: none;978 border-width: 0; }979 980@media screen and (min-width: 30em) {981 .ba-ns {982 border-style: solid;983 border-width: 1px; }984 985 .bt-ns {986 border-top-style: solid;987 border-top-width: 1px; }988 989 .br-ns {990 border-right-style: solid;991 border-right-width: 1px; }992 993 .bb-ns {994 border-bottom-style: solid;995 border-bottom-width: 1px; }996 997 .bl-ns {998 border-left-style: solid;999 border-left-width: 1px; }1000 1001 .bn-ns {1002 border-style: none;1003 border-width: 0; } }1004@media screen and (min-width: 30em) and (max-width: 60em) {1005 .ba-m {1006 border-style: solid;1007 border-width: 1px; }1008 1009 .bt-m {1010 border-top-style: solid;1011 border-top-width: 1px; }1012 1013 .br-m {1014 border-right-style: solid;1015 border-right-width: 1px; }1016 1017 .bb-m {1018 border-bottom-style: solid;1019 border-bottom-width: 1px; }1020 1021 .bl-m {1022 border-left-style: solid;1023 border-left-width: 1px; }1024 1025 .bn-m {1026 border-style: none;1027 border-width: 0; } }1028@media screen and (min-width: 60em) {1029 .ba-l {1030 border-style: solid;1031 border-width: 1px; }1032 1033 .bt-l {1034 border-top-style: solid;1035 border-top-width: 1px; }1036 1037 .br-l {1038 border-right-style: solid;1039 border-right-width: 1px; }1040 1041 .bb-l {1042 border-bottom-style: solid;1043 border-bottom-width: 1px; }1044 1045 .bl-l {1046 border-left-style: solid;1047 border-left-width: 1px; }1048 1049 .bn-l {1050 border-style: none;1051 border-width: 0; } }1052/*1053 1054 BORDER COLORS1055 Docs: http://tachyons.io/docs/themes/borders/1056 1057 Border colors can be used to extend the base1058 border classes ba,bt,bb,br,bl found in the _borders.css file.1059 1060 The base border class by default will set the color of the border1061 to that of the current text color. These classes are for the cases1062 where you desire for the text and border colors to be different.1063 1064 Base:1065 b = border1066 1067 Modifiers:1068 --color-name = each color variable name is also a border color name1069 1070*/1071.b--black {1072 border-color: #000; }1073 1074.b--near-black {1075 border-color: #111; }1076 1077.b--dark-gray {1078 border-color: #333; }1079 1080.b--mid-gray {1081 border-color: #555; }1082 1083.b--gray {1084 border-color: #777; }1085 1086.b--silver {1087 border-color: #999; }1088 1089.b--light-silver {1090 border-color: #aaa; }1091 1092.b--light-gray, article blockquote {1093 border-color: #eee; }1094 1095.b--near-white {1096 border-color: #f4f4f4; }1097 1098.b--white {1099 border-color: #fff; }1100 1101.b--white-90 {1102 border-color: rgba(255, 255, 255, 0.9); }1103 1104.b--white-80 {1105 border-color: rgba(255, 255, 255, 0.8); }1106 1107.b--white-70 {1108 border-color: rgba(255, 255, 255, 0.7); }1109 1110.b--white-60 {1111 border-color: rgba(255, 255, 255, 0.6); }1112 1113.b--white-50 {1114 border-color: rgba(255, 255, 255, 0.5); }1115 1116.b--white-40 {1117 border-color: rgba(255, 255, 255, 0.4); }1118 1119.b--white-30 {1120 border-color: rgba(255, 255, 255, 0.3); }1121 1122.b--white-20 {1123 border-color: rgba(255, 255, 255, 0.2); }1124 1125.b--white-10 {1126 border-color: rgba(255, 255, 255, 0.1); }1127 1128.b--white-05 {1129 border-color: rgba(255, 255, 255, 0.05); }1130 1131.b--white-025 {1132 border-color: rgba(255, 255, 255, 0.025); }1133 1134.b--white-0125 {1135 border-color: rgba(255, 255, 255, 0.0125); }1136 1137.b--black-90 {1138 border-color: rgba(0, 0, 0, 0.9); }1139 1140.b--black-80 {1141 border-color: rgba(0, 0, 0, 0.8); }1142 1143.b--black-70 {1144 border-color: rgba(0, 0, 0, 0.7); }1145 1146.b--black-60 {1147 border-color: rgba(0, 0, 0, 0.6); }1148 1149.b--black-50 {1150 border-color: rgba(0, 0, 0, 0.5); }1151 1152.b--black-40 {1153 border-color: rgba(0, 0, 0, 0.4); }1154 1155.b--black-30 {1156 border-color: rgba(0, 0, 0, 0.3); }1157 1158.b--black-20, article table thead tr th, article table tbody tr td {1159 border-color: rgba(0, 0, 0, 0.2); }1160 1161.b--black-10, article .well, footer {1162 border-color: rgba(0, 0, 0, 0.1); }1163 1164.b--black-05 {1165 border-color: rgba(0, 0, 0, 0.05); }1166 1167.b--black-025 {1168 border-color: rgba(0, 0, 0, 0.025); }1169 1170.b--black-0125 {1171 border-color: rgba(0, 0, 0, 0.0125); }1172 1173.b--dark-red {1174 border-color: #e7040f; }1175 1176.b--red {1177 border-color: #ff4136; }1178 1179.b--light-red {1180 border-color: #ff725c; }1181 1182.b--orange {1183 border-color: #ff6300; }1184 1185.b--gold {1186 border-color: #ffb700; }1187 1188.b--yellow {1189 border-color: #ffd700; }1190 1191.b--light-yellow {1192 border-color: #fbf1a9; }1193 1194.b--purple {1195 border-color: #5e2ca5; }1196 1197.b--light-purple {1198 border-color: #a463f2; }1199 1200.b--dark-pink {