diff --git a/docs/3df57813b7ec2de885ea6075ff46ed46.js b/docs/3df57813b7ec2de885ea6075ff46ed46.js
index cbb27f275..74d5516c4 100644
--- a/docs/3df57813b7ec2de885ea6075ff46ed46.js
+++ b/docs/3df57813b7ec2de885ea6075ff46ed46.js
@@ -19,12 +19,12 @@ var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iter
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var n=(0,s.select)(".hamburger"),a=(0,s.select)(".sidebar__links"),r=(0,s.selectAll)(".sidebar__section"),l="is-active",c=function(){window.innerWidth<=991&&([n,a].forEach(function(e){return e.classList.toggle(l)}),n.setAttribute("aria-expanded",n.classList.contains(l)?"true":"false"))};n.addEventListener("click",c),a.addEventListener("click",function(e){var i=e.target.closest(".sidebar__link");i&&(setTimeout(c,50),(0,t.default)(i.getAttribute("href"),{duration:500,easing:s.easeOutQuint,offset:window.innerWidth<=991?-64:-32}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!a.classList.contains(l)||c()}),EventHub.on("Tag.click",function(e){r.forEach(function(t){t.style.display="block",t.dataset.type!==e.type&&"all"!==e.type&&(t.style.display="none")})}),exports.default={toggle:c};
},{"../deps/jump":17,"../deps/utils":18}],13:[function(require,module,exports) {
"use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})};
-},{"../deps/jump":17,"../deps/utils":18}],14:[function(require,module,exports) {
+},{"../deps/jump":17,"../deps/utils":18}],15:[function(require,module,exports) {
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)("button.tags__tag"),i=function(){e.forEach(function(t){return t.classList.remove("is-active")}),this.classList.add("is-active"),EventHub.emit("Tag.click",{type:this.dataset.type})};e.forEach(function(e){return(0,t.on)(e,"click",i)});
-},{"../deps/utils":18}],16:[function(require,module,exports) {
+},{"../deps/utils":18}],14:[function(require,module,exports) {
"use strict";var t=require("../deps/utils"),e=(0,t.selectAll)(".snippet");EventHub.on("Tag.click",function(l){e.forEach(function(e){(e.style.display="block","all"!==l.type)&&((0,t.selectAll)(".tags__tag",e).some(function(t){return t.dataset.type===l.type})||(e.style.display="none"))})});
-},{"../deps/utils":18}],15:[function(require,module,exports) {
+},{"../deps/utils":18}],16:[function(require,module,exports) {
"use strict";var e=require("../deps/utils"),t=(0,e.selectAll)(".snippet");t.forEach(function(e){var t=document.createElement("form");t.action="https://codepen.io/pen/define",t.method="POST",t.target="_blank";var n=document.createElement("input");n.type="hidden",n.name="data";var r=document.createElement("button");r.classList="btn is-large codepen-btn",r.innerHTML='Edit on Codepen';var o=e.querySelector("pre code.lang-css"),a=e.querySelector("pre code.lang-html"),i=e.querySelector("pre code.lang-js"),l={css:o.textContent,title:e.querySelector("h3 > span").textContent,html:a?a.textContent:"",js:i?i.textContent:""};n.value=JSON.stringify(l),t.appendChild(n),t.appendChild(r),e.insertBefore(t,e.querySelector(".snippet-demo").nextSibling)});
},{"../deps/utils":18}],7:[function(require,module,exports) {
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
-},{"focus-visible":20,"normalize.css":21,"prismjs":19,"feather-icons":22,"../css/deps/prism.css":21,"../css/index.scss":21,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":14,"./components/Snippet":16,"./components/CodepenCopy":15}]},{},[7])
\ No newline at end of file
+},{"focus-visible":20,"normalize.css":21,"prismjs":19,"feather-icons":22,"../css/deps/prism.css":21,"../css/index.scss":21,"./deps/polyfills":11,"./components/Sidebar":12,"./components/BackToTopButton":13,"./components/Tag":15,"./components/Snippet":14,"./components/CodepenCopy":16}]},{},[7])
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index da9a8ff8b..b12431c7d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,7 +31,7 @@
.bouncing-loader > div:nth-of-type(3) {
animation-delay: 0.4s;
}
- Demo
Explanation
Note: 1rem is usually 16px.
-
@keyframes defines an animation that has two states, where the element changes opacity, and is translated up on the 2D plane using transform: translateY().
-
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the in the center.
-
Using .bouncing-loader > div, we target the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
-
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
-
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
-
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
Browser support
✅ No caveats.
Box-sizing resetlayout
Resets the box-model so that widths and heights are not affected by their borders or padding.
CSS
html {
+
Demo
Explanation
Note: 1rem is usually 16px.
-
@keyframes defines an animation that has two states, where the element changes opacity, and is translated up on the 2D plane using transform: translateY().
-
.bouncing-loader is the parent container of the bouncing circles and uses display: flex and justify-content: center to position them in the in the center.
-
Using .bouncing-loader > div, we target the three child divs of the parent to be styled. The divs are given a width and height of 1rem, using border-radius: 50% to turn them from squares to circles.
-
margin: 3rem 0.2rem specifies that each circle has a top/bottom margin of 3rem and left/right margin of 0.2rem so that they do not directly touch each other, giving them some breathing room.
-
animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.
-
animation-delay is used on the second and third div respectively, so that each element does not start the animation at the same time.
Browser support
✅ No caveats.
Box-sizing resetlayout
Resets the box-model so that widths and heights are not affected by their borders or padding.
CSS
html {
box-sizing: border-box;
}
*,
@@ -63,9 +63,19 @@
CSS
.constant-width-to-height-ratio {
background: #333;
width: 50%;
- padding-top: 50%;
}
-
Demo
Resize your browser window to see the proportion of the element remain the same.
Explanation
padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. 50% means the height will be 50% of the parent element's width, which means it acts the same as width. This allows its proportion to remain constant.
Browser support
⚠️ padding-top pushes any content within the element to the bottom.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
HTML
<div class="custom-scrollbar">
+.constant-width-to-height-ratio::before {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ float: left;
+}
+.constant-width-to-height-ratio::after {
+ content: '';
+ display: block;
+ clear: both;
+}
+
Demo
Resize your browser window to see the proportion of the element remain the same.
Explanation
padding-top on the ::before pseudo-element causes the height of the element to equal a percentage of its width. 100% therefore means the element's height will always be 100% of the width, creating a responsive square.
This method also allows content to be placed inside the element normally.
Browser support
✅ No caveats.
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
HTML
<div class="custom-scrollbar">
<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>
CSS
/* Document scrollbar */
diff --git a/index.html b/index.html
index f1c3fa0da..2df619863 100644
--- a/index.html
+++ b/index.html
@@ -354,7 +354,17 @@
CSS
.constant-width-to-height-ratio {
background: #333;
width: 50%;
- padding-top: 50%;
+}
+.constant-width-to-height-ratio::before {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ float: left;
+}
+.constant-width-to-height-ratio::after {
+ content: '';
+ display: block;
+ clear: both;
}
Demo
@@ -366,19 +376,31 @@
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
- padding-top: 50%;
+ }
+ .snippet-demo__constant-width-to-height-ratio::before {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ float: left;
+ }
+ .snippet-demo__constant-width-to-height-ratio::after {
+ content: '';
+ display: block;
+ clear: both;
}
Explanation
- padding-top and padding-bottom can be used as an alternative to height such that the percentage value causes an element's height to become a percentage of its parent's width, i.e. 50% means
- the height will be 50% of the parent element's width, which means it acts the same as width. This allows its proportion to remain constant.
+ padding-top on the ::before pseudo-element causes the height of the element to equal a percentage of its width. 100% therefore means the element's height will always be 100% of the width,
+ creating a responsive square.
+
+ This method also allows content to be placed inside the element normally.
Browser support
- ⚠️ padding-top pushes any content within the element to the bottom.
+ ✅ No caveats.
diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md
index 61ee886c8..9f0310406 100644
--- a/snippets/constant-width-to-height-ratio.md
+++ b/snippets/constant-width-to-height-ratio.md
@@ -15,7 +15,17 @@ Given an element of variable width, it will ensure its height remains proportion
.constant-width-to-height-ratio {
background: #333;
width: 50%;
- padding-top: 50%;
+}
+.constant-width-to-height-ratio::before {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ float: left;
+}
+.constant-width-to-height-ratio::after {
+ content: '';
+ display: block;
+ clear: both;
}
```
@@ -31,17 +41,30 @@ Resize your browser window to see the proportion of the element remain the same.
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
- padding-top: 50%;
+}
+.snippet-demo__constant-width-to-height-ratio::before {
+ content: '';
+ display: block;
+ padding-top: 100%;
+ float: left;
+}
+.snippet-demo__constant-width-to-height-ratio::after {
+ content: '';
+ display: block;
+ clear: both;
}
#### Explanation
-`padding-top` and `padding-bottom` can be used as an alternative to `height` such that the percentage value
-causes an element's height to become a percentage of its parent's width, i.e. `50%` means the height will be 50% of the parent element's width, which means it acts the same as `width`. This allows its proportion to remain constant.
+`padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of
+its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive
+square.
+
+This method also allows content to be placed inside the element normally.
#### Browser support
-⚠️ `padding-top` pushes any content within the element to the bottom.
+✅ No caveats.