Merge pull request #53 from atomiks/copyToClipboard

[FEATURE] Custom variables

docs/index.html

@@ -385,4 +385,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   text-overflow: ellipsis;
   width: 200px;
 }
-</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div>  <h4>Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> <li><code>width: 200px;</code> ensures the element has a dimension, to know when to get ellipsis</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 98.4% </div> </div> <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul>  </div> </div> </main> </div> </body> </html> 
+</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <p class="snippet-demo__truncate-text"> This text will be truncated if it exceeds 200px in width. </p> </div>  <h4>Explanation</h4> <ol> <li><code>overflow: hidden</code> prevents the text from overflowing its dimensions (for a block, 100% width and auto height).</li> <li><code>white-space: nowrap</code> prevents the text from exceeding one line in height.</li> <li><code>text-overflow: ellipsis</code> makes it so that if the text exceeds its dimensions, it will end with an ellipsis.</li> <li><code>width: 200px;</code> ensures the element has a dimension, to know when to get ellipsis</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 98.4% </div> </div> <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=text-overflow" target="_blank">https://caniuse.com/#feat=text-overflow</a> </li> </ul>  </div> </div> </main> </div> </body> </html> 

index.html

@@ -1803,4 +1803,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
       </main>
     </div>
   </body>
-</html>
+</html>

snippets/custom-variables.md

@@ -0,0 +1,58 @@
+### Custom variables
+
+CSS variables that contain specific values to be reused throughout a document.
+
+#### CSS
+
+```css
+:root {
+    --some-color: #da7800;
+    --some-keyword: italic;
+    --some-size: 1.25em;
+    --some-complex-value: 1px 1px 2px WhiteSmoke, 0 0 1em SlateGray , 0 0 0.2em SlateGray;
+}
+```
+
+#### Demo
+
+<!-- You must create a `snippet-demo` parent block and use it as a namespace with BEM syntax. -->
+
+<div class="snippet-demo">
+  <div class="snippet-demo__custom-variables">
+    <p>CSS is awesome!</p>
+  </div>
+</div>
+
+<!-- Add your style rules here. -->
+
+<style>
+:root {
+    --some-color: #686868;
+    --some-keyword: italic;
+    --some-size: 1.25em;
+    --some-complex-value: 1px 1px 2px WhiteSmoke, 0 0 1em SlateGray , 0 0 0.2em SlateGray;
+}
+
+.snippet-demo__custom-variables p{
+    color: var(--some-color);
+    font-size: var(--some-size);
+    font-style: var(--some-keyword);
+    text-shadow: var(--some-complex-value);
+}
+
+</style>
+
+#### Explanation
+
+Declare variable with `--variable-name:`.
+
+Reuse declared variable throughout the document using the `var(--variable-name)` function.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ This is an experimental technology.</span>
+
+<!-- Whenever possible, link a `caniuse` feature which allows the browser support percentage to be displayed.
+If no link is provided, it defaults to 99+%. -->
+
+* https://caniuse.com/#feat=css-variables