Travis build: 95 [cron]
|
Before Width: | Height: | Size: 255 KiB After Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
32
docs/js.e471b612.js
Normal file
1
docs/js.e471b612.map
Normal file
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 400 KiB |
1522
index.html
@ -18,6 +18,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"caniuse-db": "^1.0.30000813",
|
||||
|
||||
@ -7,9 +7,9 @@ Customizes the scrollbar style for the document and elements with scrollable ove
|
||||
```html
|
||||
<div class="custom-scrollbar">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br>
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br />
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br />
|
||||
Quisquam enim qui iure, consequatur velit sit?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -6,9 +6,7 @@ Vertically and horizontally centers a child element within its parent element us
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="center">
|
||||
<span>Centered content</span>
|
||||
</div>
|
||||
<div class="center"><span>Centered content</span></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@ Changes the fit and position of an image within its container while preserving i
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<img class="image image-contain" src="https://picsum.photos/600/200">
|
||||
<img class="image image-cover" src="https://picsum.photos/600/200">
|
||||
<img class="image image-contain" src="https://picsum.photos/600/200" />
|
||||
<img class="image image-cover" src="https://picsum.photos/600/200" />
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="flexbox-centering">
|
||||
<div class="child">Centered content.</div>
|
||||
</div>
|
||||
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="grid-centering">
|
||||
<div class="child">Centered content.</div>
|
||||
</div>
|
||||
<div class="grid-centering"><div class="child">Centered content.</div></div>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -7,9 +7,7 @@ A hover effect where the gradient follows the mouse cursor.
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<button class="mouse-cursor-gradient-tracking">
|
||||
<span>Hover me</span>
|
||||
</button>
|
||||
<button class="mouse-cursor-gradient-tracking"><span>Hover me</span></button>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -6,8 +6,7 @@ A bulletproof way to completely hide an element visually and positionally in the
|
||||
|
||||
```html
|
||||
<a class="button" href="http://pantswebsite.com">
|
||||
Learn More
|
||||
<span class="offscreen"> about pants</span>
|
||||
Learn More <span class="offscreen"> about pants</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
|
||||
@ -7,13 +7,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
|
||||
```html
|
||||
<div class="overflow-scroll-gradient">
|
||||
<div class="overflow-scroll-gradient__scroller">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br>
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br>
|
||||
Quisquam enim qui iure, consequatur velit sit? <br>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br>
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br />
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br />
|
||||
Quisquam enim qui iure, consequatur velit sit? <br />
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
|
||||
Iure id exercitationem nulla qui repellat laborum vitae, <br />
|
||||
molestias tempora velit natus. Quas, assumenda nisi. <br />
|
||||
Quisquam enim qui iure, consequatur velit sit?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,11 +5,7 @@ Reveals an interactive popout menu on hover and focus.
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="reference" tabindex="0">
|
||||
<div class="popout-menu">
|
||||
Popout menu
|
||||
</div>
|
||||
</div>
|
||||
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -7,7 +7,11 @@ Resets all styles to default values with one property. This will not affect `dir
|
||||
```html
|
||||
<div class="reset-all-styles">
|
||||
<h5>Title</h5>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
|
||||
repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
|
||||
iure, consequatur velit sit?
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -6,12 +6,8 @@ Fades out the siblings of a hovered item.
|
||||
|
||||
```html
|
||||
<div class="sibling-fade">
|
||||
<span>Item 1</span>
|
||||
<span>Item 2</span>
|
||||
<span>Item 3</span>
|
||||
<span>Item 4</span>
|
||||
<span>Item 5</span>
|
||||
<span>Item 6</span>
|
||||
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
|
||||
<span>Item 5</span> <span>Item 6</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@ -5,8 +5,7 @@ Creates a toggle switch with CSS only.
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<input type="checkbox" id="toggle" class="offscreen" />
|
||||
<label for="toggle" class="switch"></label>
|
||||
<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -5,9 +5,7 @@ Vertically and horizontally centers a child element within its parent element us
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="parent">
|
||||
<div class="child">Centered content</div>
|
||||
</div>
|
||||
<div class="parent"><div class="child">Centered content</div></div>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
@ -30,8 +30,8 @@ export const createEventHub = () => ({
|
||||
window.EventHub = createEventHub()
|
||||
|
||||
/*
|
||||
* Make iOS behave normally.
|
||||
*/
|
||||
* Make iOS behave normally.
|
||||
*/
|
||||
if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
|
||||
document.body.style.cursor = 'pointer'
|
||||
}
|
||||
@ -41,11 +41,11 @@ if (/Mac/.test(navigator.platform)) {
|
||||
}
|
||||
|
||||
/*
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
|
||||
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
|
||||
* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
|
||||
* Must be applied to all browsers for now.
|
||||
*/
|
||||
;(() => {
|
||||
const ua = navigator.userAgent
|
||||
|
||||
|
||||