Initial commit

jessicarush · Mar 8, 2023 · f48b464 · f48b464
1 parent f0d7268
commit f48b464
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 0 deletions.
diff --git a/css_isolation/base.css b/css_isolation/base.css
@@ -0,0 +1,88 @@
+@charset "UTF-8";
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.primary-heading {
+  color: var(--heading-color);
+  font-family: var(--heading-font);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.highlight-text {
+  color: var(--emphasis-color);
+}
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+.content {
+  border: solid 1px pink;
+  margin: 25px 0 50px 0;
+}
+
+.another {
+  width: 100px;
+  height: 100px;
+  background: tomato;
+  position: relative;
+  left: 20px;
+  top: 20px;
+  z-index: 2;
+}
+/* COMPONENTS ------------------------------------------------------------- */
+
+.thing {
+  position: relative;
+}
+
+.thing.isolated {
+  isolation: isolate;
+}
+
+.thing__one {
+  width: 100px;
+  height: 100px;
+  background: orange;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.thing__two {
+  width: 100px;
+  height: 100px;
+  background: blueviolet;
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  z-index: 3;
+}
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_isolation/index.html b/css_isolation/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Site | Page</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header>
+    <h1 class="primary-heading">CSS isolation property</h1>
+    <nav></nav>
+  </header>
+
+  <main>
+    <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/isolation">isolation property</a> defines whether an element must create a new stacking content.</p>
+    <p>The isolation property is most helpful when used with:</p>
+    <ul>
+      <li>background-blend-mode</li>
+      <li>mix-blend-mode</li>
+      <li>z-index</li>
+    </ul>
+
+    <p>The problem: image we have the following component: a wrapper that doesn't set a z-index but has 2 elements inside that do have a z-index. This result of this situation may be confusing for some people (to me, it makes sense). If the component has a sibling with an in-between z-index, it'll get "interleaved" between the two elements inside the wrapper:
+    </p>
+
+    <div class="content">
+      <div class="thing">
+        <div class="thing__one"></div>
+        <div class="thing__two"></div>
+      </div>
+      <div class="another"></div>
+    </div>
+
+    <p>Adding <code>isolation: isolate;</code> to the wrapper:</p>
+
+    <div class="content">
+      <div class="thing isolated">
+        <div class="thing__one"></div>
+        <div class="thing__two"></div>
+      </div>
+      <div class="another"></div>
+    </div>
+
+
+  </main>
+
+  <footer>
+  </footer>
+
+</body>
+</html>