Initial commit

jessicarush · Jun 24, 2019 · 6f52d6e · 6f52d6e
1 parent 81ce14b
commit 6f52d6e
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 0 deletions.
diff --git a/css_exclusions/base.css b/css_exclusions/base.css
@@ -0,0 +1,111 @@
+@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(180,180,190);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7em;
+  color: var(--main-color);
+}
+
+h1 {
+  font-family: var(--heading-font);
+  font-size: 2.6rem;
+  font-weight: 300;
+  line-height: 1.2em;
+  color: var(--heading-color);
+  margin: 0 0 25px 0;
+}
+
+p {
+  margin: 0 0 20px 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 20px 0;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+a:link,
+a:visited {
+  color: var(--minor-color);
+  text-decoration-skip: edges;
+}
+
+a:hover,
+a:active {
+  color: var(--emphasis-color);
+}
+
+
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+.flexible {
+  border: solid 2px aquamarine;
+  min-width: 380px;
+  max-width: 1400px;
+  margin: 15px auto;
+}
+
+.fixed {
+  border: solid 2px aquamarine;
+  width: 800px;
+  height: 800px;
+  margin: 15px auto;
+}
+
+.box {
+  background: AliceBlue;
+  padding: 25px;
+}
+
+.box:nth-child(even) {
+  background: MintCream;
+}
+
+.exclusion_element {
+  position: absolute;
+  top: 25%;
+  left: calc(50% - 100px);
+  width: 200px;
+  wrap-flow: both;
+}
+
+
+
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+.comment {
+  color: var(--minor-color);
+}
+
+
+
+/* UTILITY ---------------------------------------------------------------- */
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_exclusions/index.html b/css_exclusions/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Exclusions</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+  <link href="base.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="fixed">
+
+    <div class="exclusion_element box">
+      <code>wrap-flow: both;<br> /* creates an exclusion element */</code>
+    </div>
+
+    <h1>CSS Exclusions (not yet fully supported).</h1>
+    <p>CSS exclusions define arbitrary areas around which inline content can flow, and can be defined on any block-level element. An exclusion element is a block-level element which is not a float, and generates an exclusion box. An element becomes an exclusion when its <code>wrap-flow</code> property is set to something other than its initial value of auto.</p>
+
+    <p>Exclusions have to be positioned somehow, using any of the positioning schemes we currently have at our disposal like absolute positioning, grid and so on (but not floats floats).</p>
+
+    <p>
+      <a href="https://rachelandrew.co.uk/archives/2016/03/16/css-exclusions-and-grid-layout/">CSS Exclusions explained by Rachel Andrew</a><br>
+      <a href="https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey/">CSS Exclusions explained by Chen Hui Jing.</a>
+    </p>
+
+    <h1>wrap-flow.</h1>
+    <p>There are seven possible values for the <code>wrap-flow</code> property:</p>
+
+    <ul>
+      <li><code>auto</code> - no exclusion created.</li>
+      <li><code>both</code> - inline content can flow on all sides of the exclusion.</li>
+      <li><code>start</code> - inline content can only flow around the start edge.</li>
+      <li><code>end</code> - inline content can only flow around the end edge.</li>
+      <li><code>minimum</code> - inline content can only flow around the edge with least available space.</li>
+      <li><code>maximum</code> - inline content can only flow around the edge with most available space.</li>
+      <li><code>clear</code> - nothing flows along the start or end edge of the exclusion.</li>
+    </ul>
+
+    <h1>wrap-through.</h1>
+    <p>With the <code>wrap-through</code> property, by setting a value of <code>none</code>, the inline content will flow <em>through</em> the exclusion, as if it wasn’t there to begin with.</p>
+  </div>
+
+</body>
+</html>