Update and run prettier

This commit is contained in:
atomiks
2018-10-05 09:23:16 +10:00
parent 11eff23e47
commit a564514b74
35 changed files with 577 additions and 1105 deletions

View File

@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
Examples of behavior that contributes to creating a positive environment include: Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language - Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences - Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism - Gracefully accepting constructive criticism
* Focusing on what is best for the community - Focusing on what is best for the community
* Showing empathy towards other community members - Showing empathy towards other community members
Examples of unacceptable behavior by participants include: Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances - The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks - Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment - Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission - Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting - Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities ## Our Responsibilities

View File

@ -11,7 +11,6 @@ Brief description
#### CSS #### CSS
```css ```css
``` ```
#### Demo #### Demo
@ -31,6 +30,6 @@ Brief description
<!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed. <!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed.
If no link is provided, it defaults to 99+%. --> If no link is provided, it defaults to 99+%. -->
* https://caniuse.com/#feat=some-feature - https://caniuse.com/#feat=some-feature
<!-- tags: (separate each by a comma) --> <!-- tags: (separate each by a comma) -->

1582
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,7 @@
"nodemon": "^1.18.4", "nodemon": "^1.18.4",
"normalize.css": "^8.0.0", "normalize.css": "^8.0.0",
"parcel-bundler": "^1.9.7", "parcel-bundler": "^1.9.7",
"prettier": "^1.10.2", "prettier": "^1.14.3",
"pretty": "^2.0.0", "pretty": "^2.0.0",
"prismjs": "^1.11.0", "prismjs": "^1.11.0",
"rimraf": "^2.6.2" "rimraf": "^2.6.2"

View File

@ -71,6 +71,6 @@ Note: `1rem` is usually `16px`.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-animation - https://caniuse.com/#feat=css-animation
<!-- tags: animation --> <!-- tags: animation -->

View File

@ -32,7 +32,6 @@ html {
.content-box { .content-box {
box-sizing: content-box; box-sizing: content-box;
} }
``` ```
#### Demo #### Demo
@ -46,6 +45,6 @@ html {
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css3-boxsizing - https://caniuse.com/#feat=css3-boxsizing
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -32,6 +32,6 @@ values will create an ellipse.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=border-radius - https://caniuse.com/#feat=border-radius
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -52,6 +52,6 @@ You can create a ordered list using any type of HTML.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-counters - https://caniuse.com/#feat=css-counters
<!-- tags: visual, other --> <!-- tags: visual, other -->

View File

@ -54,6 +54,6 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
<span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span> <span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>
* https://caniuse.com/#feat=css-scrollbar - https://caniuse.com/#feat=css-scrollbar
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -32,6 +32,6 @@ Changes the styling of text selection.
<span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually <span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
in any specification.</span> in any specification.</span>
* https://caniuse.com/#feat=css-selection - https://caniuse.com/#feat=css-selection
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -41,6 +41,6 @@ Reuse variables throughout the document using the `var(--variable-name)` functio
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: other --> <!-- tags: other -->

View File

@ -28,6 +28,6 @@ Makes the content unselectable.
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span> <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
<span class="snippet__support-note">⚠️ This is not a secure method to prevent users from copying content.</span> <span class="snippet__support-note">⚠️ This is not a secure method to prevent users from copying content.</span>
* https://caniuse.com/#feat=user-select-none - https://caniuse.com/#feat=user-select-none
<!-- tags: interactivity --> <!-- tags: interactivity -->

View File

@ -50,6 +50,6 @@ The outer parent ('.container' in this case) must have a fixed height and width.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#search=display%3A%20table - https://caniuse.com/#search=display%3A%20table
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -41,7 +41,7 @@ serve as the loading indicator for the donut. Use `animation` to rotate the elem
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span> <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
* https://caniuse.com/#feat=css-animation - https://caniuse.com/#feat=css-animation
* https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
<!-- tags: animation --> <!-- tags: animation -->

View File

@ -50,6 +50,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span> <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
* https://caniuse.com/#feat=css-filters - https://caniuse.com/#feat=css-filters
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -63,6 +63,6 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: animation --> <!-- tags: animation -->

View File

@ -35,6 +35,6 @@ of the background.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-textshadow - https://caniuse.com/#feat=css-textshadow
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -34,6 +34,6 @@ Alternatively, use `justify-content: space-around` to distribute the children wi
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span> <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
* https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -33,6 +33,6 @@ Horizontally and vertically centers a child element within a parent element usin
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span> <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
* https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -31,6 +31,6 @@ Gives text a gradient color.
<span class="snippet__support-note">⚠️ Uses non-standard properties.</span> <span class="snippet__support-note">⚠️ Uses non-standard properties.</span>
* https://caniuse.com/#feat=text-stroke - https://caniuse.com/#feat=text-stroke
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -47,8 +47,8 @@ very sharp and crisp.
<span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span> <span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span>
* https://caniuse.com/#feat=css-boxshadow - https://caniuse.com/#feat=css-boxshadow
* https://caniuse.com/#feat=css-media-resolution - https://caniuse.com/#feat=css-media-resolution
<hr> <hr>

View File

@ -59,7 +59,7 @@ el.style.setProperty('--max-height', height + 'px')
beneath the element that is transitioning in height. beneath the element that is transitioning in height.
</span> </span>
* https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
* https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: animation --> <!-- tags: animation -->

View File

@ -59,7 +59,7 @@ Creates an animated underline effect when the text is hovered over.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
* https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: animation --> <!-- tags: animation -->

View File

@ -48,6 +48,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span> <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
* https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -72,6 +72,6 @@ _TODO_
<div class="snippet__requires-javascript">Requires JavaScript</div> <div class="snippet__requires-javascript">Requires JavaScript</div>
<span class="snippet__support-note">⚠️ Requires JavaScript.</span> <span class="snippet__support-note">⚠️ Requires JavaScript.</span>
* https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: visual, interactivity --> <!-- tags: visual, interactivity -->

View File

@ -47,6 +47,6 @@ the `:last-child`.
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-sel3 - https://caniuse.com/#feat=css-sel3
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -44,6 +44,6 @@ A bulletproof way to completely hide an element visually and positionally in the
(Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.) (Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.)
* https://caniuse.com/#search=clip - https://caniuse.com/#search=clip
<!-- tags: layout, visual --> <!-- tags: layout, visual -->

View File

@ -66,6 +66,6 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-gradients - https://caniuse.com/#feat=css-gradients
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -50,7 +50,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-textshadow - https://caniuse.com/#feat=css-textshadow
* https://caniuse.com/#feat=css-gradients - https://caniuse.com/#feat=css-gradients
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -29,6 +29,6 @@ The `all` property allows you to reset all styles (inherited or not) to default
<span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span> <span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span>
* https://caniuse.com/#feat=css-all - https://caniuse.com/#feat=css-all
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -42,6 +42,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=svg - https://caniuse.com/#feat=svg
<!-- tags: visual --> <!-- tags: visual -->

View File

@ -40,7 +40,7 @@ span {
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-sel3 - https://caniuse.com/#feat=css-sel3
* https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: interactivity --> <!-- tags: interactivity -->

View File

@ -66,6 +66,6 @@ This effect is styling only the `<label>` element to look like a toggle switch,
<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span> <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
* https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
<!-- tags: visual, interactivity --> <!-- tags: visual, interactivity -->

View File

@ -43,6 +43,6 @@ Note: Fixed height and width on parent element is for the demo only.
<span class="snippet__support-note">⚠️ Requires prefix for full support.</span> <span class="snippet__support-note">⚠️ Requires prefix for full support.</span>
* https://caniuse.com/#search=transform - https://caniuse.com/#search=transform
<!-- tags: layout --> <!-- tags: layout -->

View File

@ -34,6 +34,6 @@ If the text is longer than one line, it will be truncated and end with an ellips
<span class="snippet__support-note">⚠️ Only works for single line elements.</span> <span class="snippet__support-note">⚠️ Only works for single line elements.</span>
* https://caniuse.com/#feat=text-overflow - https://caniuse.com/#feat=text-overflow
<!-- tags: layout --> <!-- tags: layout -->