Add single properties

oumaabde · Nov 22, 2016 · fc704c0 · fc704c0
1 parent d4a5b6f
commit fc704c0
Show file tree

Hide file tree

Showing 131 changed files with 14,622 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,4 +15,3 @@ _gh_pages
 _site
 images/trash
 node_modules
-property
diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html
@@ -1402,7 +1402,7 @@ <h2 class="property-name">
 
   </header>
 
-    <style type="text/css">.background-attachment { background-image: url(/images/landscape.png);background-position: center center;background-size: cover;height: 200px; }</style>
+    <style type="text/css">.background-attachment { background-image: url(/images/landscape.jpg);background-position: center center;background-size: cover;height: 200px; }</style>
 
 
     <style type="text/css">.background-attachment p { background: white;padding: 0.8em 1em; }</style>
@@ -2245,7 +2245,7 @@ <h2 class="property-name">
 
   </header>
 
-    <style type="text/css">.background-size { background-image: url(/images/landscape.png);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
+    <style type="text/css">.background-size { background-image: url(/images/landscape.jpg);background-repeat: no-repeat;height: 150px;padding: 0; }</style>
 
 
 

diff --git a/images/landscape.jpg b/images/landscape.jpg
diff --git a/property/align-content/index.html b/property/align-content/index.html
@@ -0,0 +1,163 @@
+---
+layout: single
+property_name: align-content
+---
+
+<section id="align-content" class="property">
+  <header class="property-header">
+    <nav class="property-links">
+      <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
+      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
+    </nav>
+    <h2 class="property-name">
+      <a href="{{site.url}}/#align-content"><span>#</span>align-content</a>
+    </h2>
+    <div class="property-description">
+      <p>Defines how each line is aligned within a flexbox container. It only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple lines</strong> of flexbox items.</p>
+
+    </div>
+
+  </header>
+
+    <style type="text/css">.align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height: 300px;padding: 0; }</style>
+
+
+    <style type="text/css">.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left: 0;position: absolute;right: 0;top: 0; }.align-content .box.is-red:before { content: "First line"; }.align-content .box.is-green { top: 150px; }.align-content .box.is-green:before { content: "Second line"; }</style>
+
+
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+            <code class="example-default" data-tooltip="This is the property's default value">default</code>
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: stretch;">align-content: stretch;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will stretch to <em>fill</em> the remaining space.</p>
+<p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code> high, apart from the second one who is <code>100px</code> high.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-stretch{ align-content:stretch;}</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-start;">align-content: flex-start;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>start</strong> of the flexbox container&#39;s cross axis.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-flex-start{ align-content:flex-start;}</style>
+        <style type="text/css">#align-content-flex-start .box.is-red { height: 100px; }#align-content-flex-start .box.is-green { height: 50px;top: 100px; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: flex-end;">align-content: flex-end;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>end</strong> of the flexbox container&#39;s cross axis.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-flex-end{ align-content:flex-end;}</style>
+        <style type="text/css">#align-content-flex-end .box.is-red { height: 100px;top: 150px; }#align-content-flex-end .box.is-green { height: 50px;top: 250px; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: center;">align-content: center;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will only fill the space it <em>needs</em>. They will all move towards the <strong>center</strong> of the flexbox container&#39;s cross axis.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-center{ align-content:center;}</style>
+        <style type="text/css">#align-content-center .box.is-red { height: 100px;top: 75px; }#align-content-center .box.is-green { height: 50px;top: 175px; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-between;">align-content: space-between;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will appear <strong>between</strong> the lines.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-space-between"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-space-between{ align-content:space-between;}</style>
+        <style type="text/css">#align-content-space-between .box.is-red { height: 100px;top: 0; }#align-content-space-between .box.is-green { height: 50px;top: 250px; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-content: space-around;">align-content: space-around;</code>
+        </p>
+        <div class="example-description">
+          <p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em> space will be distributed equally <strong>around</strong> the lines: before the first line, between the two, and after the last one.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-content " id="align-content-space-around"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="box is-red"></div><div class="box is-green"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-content-space-around{ align-content:space-around;}</style>
+        <style type="text/css">#align-content-space-around .box.is-red { height: 100px;top: 38px; }#align-content-space-around .box.is-green { height: 50px;top: 213px; }</style>
+    </section>
+
+</section>
diff --git a/property/align-items/index.html b/property/align-items/index.html
@@ -0,0 +1,145 @@
+---
+layout: single
+property_name: align-items
+---
+
+<section id="align-items" class="property">
+  <header class="property-header">
+    <nav class="property-links">
+      <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
+      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
+    </nav>
+    <h2 class="property-name">
+      <a href="{{site.url}}/#align-items"><span>#</span>align-items</a>
+    </h2>
+    <div class="property-description">
+      <p>Defines how flexbox items are aligned according to the <strong>cross</strong> axis, within a line of a flexbox container.</p>
+
+    </div>
+
+  </header>
+
+    <style type="text/css">.align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>
+
+
+    <style type="text/css">.align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }</style>
+
+
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-start;">align-items: flex-start;</code>
+        </p>
+        <div class="example-description">
+          <p>The flexbox items are aligned at the <strong>start</strong> of the <strong>cross axis</strong>.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-items " id="align-items-flex-start"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-items-flex-start{ align-items:flex-start;}</style>
+        <style type="text/css">#align-items-flex-start .line { top: 0; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: flex-end;">align-items: flex-end;</code>
+        </p>
+        <div class="example-description">
+          <p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-items " id="align-items-flex-end"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-items-flex-end{ align-items:flex-end;}</style>
+        <style type="text/css">#align-items-flex-end .line { bottom: 0; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: center;">align-items: center;</code>
+        </p>
+        <div class="example-description">
+          <p>The flexbox items are aligned at the <strong>center</strong> of the <strong>cross axis</strong>.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-items " id="align-items-center"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-items-center{ align-items:center;}</style>
+        <style type="text/css">#align-items-center .line { top: 50%; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: baseline;">align-items: baseline;</code>
+        </p>
+        <div class="example-description">
+          <p>The flexbox items are aligned at the <strong>baseline</strong> of the <strong>cross axis</strong>.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the <em>baseline</em> of their <em>text</em> align along a horizontal line.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-items " id="align-items-baseline"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-items-baseline{ align-items:baseline;}</style>
+        <style type="text/css">#align-items-baseline .line { top: 55px; }</style>
+    </section>
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-items: stretch;">align-items: stretch;</code>
+        </p>
+        <div class="example-description">
+          <p>The flexbox items will stretch across the whole <strong>cross axis</strong>.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-items " id="align-items-stretch"><p class="square is-plum">1</p><p class="square is-plum">2</p><p class="square is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div class="line is-red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-items-stretch{ align-items:stretch;}</style>
+        <style type="text/css">#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch .line { display: none; }</style>
+    </section>
+
+</section>