Last active
December 18, 2019 08:45
-
-
Save jessejjohnson/63b44358d4ad5fadac1ea0d4b548032e to your computer and use it in GitHub Desktop.
jsfiddle boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| color: #666; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>jsfiddle gist integration</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: jsfiddle boilerplate | |
| description: boilerplate jsfiddle template | |
| authors: | |
| - Jesse Johnson | |
| resources: | |
| - https://gist.githubusercontent.com/jessejjohnson/63b44358d4ad5fadac1ea0d4b548032e/raw/global.css | |
| - https://gist.githubusercontent.com/jessejjohnson/63b44358d4ad5fadac1ea0d4b548032e/raw/typography.css | |
| normalize_css: no | |
| wrap: b | |
| panel_js: 1 | |
| panel_css: 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| font-smooth: always; | |
| -webkit-tap-highlight-color: transparent; | |
| -webkit-touch-callout: none; | |
| min-height: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| height: 100%; | |
| background: #111518; | |
| } | |
| input { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| font-smooth: always; | |
| -webkit-tap-highlight-color: transparent; | |
| -webkit-touch-callout: none; | |
| } | |
| .disable-hover, | |
| .disable-hover * { | |
| pointer-events: none !important; | |
| } | |
| iframe { | |
| margin-bottom: 0; | |
| } | |
| a { | |
| color: #40a9f3; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| main, | |
| menu, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; | |
| } | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| progress { | |
| vertical-align: baseline; | |
| } | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| a { | |
| background-color: transparent; | |
| -webkit-text-decoration-skip: objects; | |
| } | |
| a:active, | |
| a:hover { | |
| outline-width: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: none; | |
| text-decoration: underline; | |
| text-decoration: underline dotted; | |
| } | |
| b, | |
| strong { | |
| font-weight: inherit; | |
| font-weight: bolder; | |
| } | |
| dfn { | |
| font-style: italic; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| mark { | |
| background-color: #ff0; | |
| color: #000; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| img { | |
| border-style: none; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| hr { | |
| box-sizing: content-box; | |
| height: 0; | |
| overflow: visible; | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| font: inherit; | |
| margin: 0; | |
| } | |
| optgroup { | |
| font-weight: 700; | |
| } | |
| button, | |
| input { | |
| overflow: visible; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| [type='reset'], | |
| [type='submit'], | |
| button, | |
| html [type='button'] { | |
| -webkit-appearance: button; | |
| } | |
| [type='button']::-moz-focus-inner, | |
| [type='reset']::-moz-focus-inner, | |
| [type='submit']::-moz-focus-inner, | |
| button::-moz-focus-inner { | |
| border-style: none; | |
| padding: 0; | |
| } | |
| [type='button']:-moz-focusring, | |
| [type='reset']:-moz-focusring, | |
| [type='submit']:-moz-focusring, | |
| button:-moz-focusring { | |
| outline: 1px dotted ButtonText; | |
| } | |
| fieldset { | |
| border: 1px solid silver; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| legend { | |
| box-sizing: border-box; | |
| color: inherit; | |
| display: table; | |
| max-width: 100%; | |
| padding: 0; | |
| white-space: normal; | |
| } | |
| textarea { | |
| overflow: auto; | |
| } | |
| [type='checkbox'], | |
| [type='radio'] { | |
| box-sizing: border-box; | |
| padding: 0; | |
| } | |
| [type='number']::-webkit-inner-spin-button, | |
| [type='number']::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| [type='search'] { | |
| -webkit-appearance: textfield; | |
| outline-offset: -2px; | |
| } | |
| [type='search']::-webkit-search-cancel-button, | |
| [type='search']::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: inherit; | |
| opacity: 0.54; | |
| } | |
| ::-webkit-file-upload-button { | |
| -webkit-appearance: button; | |
| font: inherit; | |
| } | |
| html { | |
| font: 112.5%/1.45em 'Source Sans Pro'; | |
| box-sizing: border-box; | |
| overflow-y: scroll; | |
| } | |
| * { | |
| box-sizing: inherit; | |
| } | |
| *:before { | |
| box-sizing: inherit; | |
| } | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| color: hsla(0, 0%, 0%, 0.8); | |
| font-family: Source Sans Pro, Open Sans, Segoe UI, sans-serif; | |
| font-weight: normal; | |
| word-wrap: break-word; | |
| font-kerning: normal; | |
| -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; | |
| -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; | |
| -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt'; | |
| font-feature-settings: 'kern', 'liga', 'clig', 'calt'; | |
| } | |
| img { | |
| max-width: 100%; | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 0; | |
| } | |
| h1 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 2.15rem; | |
| line-height: 1.1; | |
| } | |
| h2 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.58293rem; | |
| line-height: 1.1; | |
| } | |
| h3 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.35824rem; | |
| line-height: 1.1; | |
| } | |
| h4 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 1rem; | |
| line-height: 1.1; | |
| } | |
| h5 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 0.85805rem; | |
| line-height: 1.1; | |
| } | |
| h6 { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| color: inherit; | |
| font-family: 'Source Sans Pro'; | |
| font-weight: bold; | |
| text-rendering: optimizeLegibility; | |
| font-size: 0.79482rem; | |
| line-height: 1.1; | |
| } | |
| hgroup { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| ul { | |
| margin-left: 1.45rem; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| list-style-position: outside; | |
| list-style-image: none; | |
| } | |
| ol { | |
| margin-left: 1.45rem; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| list-style-position: outside; | |
| list-style-image: none; | |
| } | |
| dl { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| dd { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| p { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| figure { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| pre { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| font-size: 0.85rem; | |
| line-height: 1.45rem; | |
| } | |
| table { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| font-size: 1rem; | |
| line-height: 1.45rem; | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| fieldset { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| blockquote { | |
| margin-left: 1.45rem; | |
| margin-right: 1.45rem; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| form { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| noscript { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| iframe { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| hr { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: calc(1.0875rem - 1px); | |
| background: hsla(0, 0%, 0%, 0.2); | |
| border: none; | |
| height: 1px; | |
| } | |
| address { | |
| margin-left: 0; | |
| margin-right: 0; | |
| margin-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0; | |
| padding-right: 0; | |
| padding-top: 0; | |
| margin-bottom: 1.0875rem; | |
| } | |
| b { | |
| font-weight: bold; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| dt { | |
| font-weight: bold; | |
| } | |
| th { | |
| font-weight: bold; | |
| } | |
| li { | |
| margin-bottom: calc(1.0875rem / 2); | |
| } | |
| ol li { | |
| padding-left: 0; | |
| } | |
| ul li { | |
| padding-left: 0; | |
| } | |
| li > ol { | |
| margin-left: 1.45rem; | |
| margin-bottom: calc(1.0875rem / 2); | |
| margin-top: calc(1.0875rem / 2); | |
| } | |
| li > ul { | |
| margin-left: 1.45rem; | |
| margin-bottom: calc(1.0875rem / 2); | |
| margin-top: calc(1.0875rem / 2); | |
| } | |
| blockquote *:last-child { | |
| margin-bottom: 0; | |
| } | |
| li *:last-child { | |
| margin-bottom: 0; | |
| } | |
| p *:last-child { | |
| margin-bottom: 0; | |
| } | |
| li > p { | |
| margin-bottom: calc(1.0875rem / 2); | |
| } | |
| code { | |
| font-size: 0.85rem; | |
| line-height: 1.45rem; | |
| } | |
| kbd { | |
| font-size: 0.85rem; | |
| line-height: 1.45rem; | |
| } | |
| samp { | |
| font-size: 0.85rem; | |
| line-height: 1.45rem; | |
| } | |
| abbr { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| } | |
| acronym { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| text-decoration: none; | |
| } | |
| thead { | |
| text-align: left; | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); | |
| font-feature-settings: 'tnum'; | |
| -moz-font-feature-settings: 'tnum'; | |
| -ms-font-feature-settings: 'tnum'; | |
| -webkit-font-feature-settings: 'tnum'; | |
| padding-left: 0.96667rem; | |
| padding-right: 0.96667rem; | |
| padding-top: 0.725rem; | |
| padding-bottom: calc(0.725rem - 1px); | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 0; | |
| } | |
| th:last-child, | |
| td:last-child { | |
| padding-right: 0; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4 { | |
| line-height: 1.2; | |
| } | |
| @media only screen and (max-width: 768px) { | |
| html { | |
| font-size: 106.25%; | |
| } | |
| } | |
| @media only screen and (max-width: 480px) { | |
| html { | |
| font-size: 100%; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment