From fea4fa057d706d91bf28de78323ab9592dfa8f58 Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 6 Mar 2018 20:05:49 +1100 Subject: [PATCH] Resolve #64 --- docs/3df57813b7ec2de885ea6075ff46ed46.js | 8 +++--- docs/index.html | 16 +++++++++-- index.html | 32 +++++++++++++++++---- snippets/constant-width-to-height-ratio.md | 33 ++++++++++++++++++---- 4 files changed, 72 insertions(+), 17 deletions(-) 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.

  1. @keyframes defines an animation that has two states, where the element changes opacity, and is translated up on the 2D plane using transform: translateY().

  2. .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.

  3. 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.

  4. 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.

  5. animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.

  6. 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

95.3%

✅ 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.

  1. @keyframes defines an animation that has two states, where the element changes opacity, and is translated up on the 2D plane using transform: translateY().

  2. .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.

  3. 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.

  4. 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.

  5. animation is a shorthand property for the various animation properties: animation-name, animation-duration, animation-iteration-count, animation-direction are used.

  6. 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

95.3%

✅ 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

99+%

⚠️ padding-top pushes any content within the element to the bottom.

Custom scrollbarvisual

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

99+%

✅ No caveats.

Custom scrollbarvisual

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

             

               

                 99+%
               

             

-            
⚠️ 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.