├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── _config.local.yml
├── _config.yml
├── _includes
    ├── bsa.html
    ├── carbon.html
    ├── collections
    │   ├── animations-list.html
    │   ├── animations.html
    │   ├── backgrounds-list.html
    │   ├── backgrounds.html
    │   ├── box-model-list.html
    │   ├── box-model.html
    │   ├── css-grid-list.html
    │   ├── css-grid.html
    │   ├── flexbox-list.html
    │   ├── flexbox.html
    │   ├── positioning-list.html
    │   ├── positioning.html
    │   ├── transitions-list.html
    │   ├── transitions.html
    │   ├── typography-list.html
    │   └── typography.html
    ├── components
    │   └── finder.html
    ├── favicons.html
    ├── ff.html
    ├── google-fonts.html
    ├── lists
    │   ├── finder-list.html
    │   ├── main-list.html
    │   └── menu-list.html
    ├── menu.html
    ├── modals
    │   └── share.html
    ├── noscript.html
    ├── sister.html
    ├── social
    │   ├── button-facebook.html
    │   └── button-twitter.html
    └── svg
    │   ├── facebook.html
    │   ├── github.html
    │   └── twitter.html
├── _layouts
    ├── collection.html
    └── single.html
├── animations.html
├── backgrounds.html
├── box-model.html
├── css-grid.html
├── css
    ├── website.css
    └── website.sass
├── favicons
    ├── android-chrome-192x192.png
    ├── android-chrome-384x384.png
    ├── apple-touch-icon.png
    ├── browserconfig.xml
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── manifest.json
    ├── mstile-150x150.png
    └── safari-pinned-tab.svg
├── flexbox.html
├── images
    ├── bulma-logo.png
    ├── css-reference-icon.png
    ├── css-reference-logo.png
    ├── css-reference-share.png
    ├── css-reference-type.png
    ├── fortyfour-background.jpg
    ├── html-reference-logo.png
    ├── hugging-face.png
    ├── jt.png
    ├── landscape.jpg
    ├── landscape.png
    └── list-style-image.png
├── index.html
├── javascript
    ├── clipboard.min.js
    ├── collection.js
    ├── index.js
    ├── main.js
    └── single.js
├── package.json
├── positioning.html
├── property
    ├── align-content
    │   └── index.html
    ├── align-items
    │   └── index.html
    ├── align-self
    │   └── index.html
    ├── animation-delay
    │   └── index.html
    ├── animation-direction
    │   └── index.html
    ├── animation-duration
    │   └── index.html
    ├── animation-fill-mode
    │   └── index.html
    ├── animation-iteration-count
    │   └── index.html
    ├── animation-name
    │   └── index.html
    ├── animation-play-state
    │   └── index.html
    ├── animation-timing-function
    │   └── index.html
    ├── animation
    │   └── index.html
    ├── background-attachment
    │   └── index.html
    ├── background-clip
    │   └── index.html
    ├── background-color
    │   └── index.html
    ├── background-image
    │   └── index.html
    ├── background-origin
    │   └── index.html
    ├── background-position
    │   └── index.html
    ├── background-repeat
    │   └── index.html
    ├── background-size
    │   └── index.html
    ├── background
    │   └── index.html
    ├── border-bottom-color
    │   └── index.html
    ├── border-bottom-left-radius
    │   └── index.html
    ├── border-bottom-right-radius
    │   └── index.html
    ├── border-bottom-style
    │   └── index.html
    ├── border-bottom-width
    │   └── index.html
    ├── border-bottom
    │   └── index.html
    ├── border-collapse
    │   └── index.html
    ├── border-color
    │   └── index.html
    ├── border-left-color
    │   └── index.html
    ├── border-left-style
    │   └── index.html
    ├── border-left-width
    │   └── index.html
    ├── border-left
    │   └── index.html
    ├── border-radius
    │   └── index.html
    ├── border-right-color
    │   └── index.html
    ├── border-right-style
    │   └── index.html
    ├── border-right-width
    │   └── index.html
    ├── border-right
    │   └── index.html
    ├── border-style
    │   └── index.html
    ├── border-top-color
    │   └── index.html
    ├── border-top-left-radius
    │   └── index.html
    ├── border-top-right-radius
    │   └── index.html
    ├── border-top-style
    │   └── index.html
    ├── border-top-width
    │   └── index.html
    ├── border-top
    │   └── index.html
    ├── border-width
    │   └── index.html
    ├── border
    │   └── index.html
    ├── bottom
    │   └── index.html
    ├── box-shadow
    │   └── index.html
    ├── box-sizing
    │   └── index.html
    ├── clear
    │   └── index.html
    ├── color
    │   └── index.html
    ├── column-count
    │   └── index.html
    ├── column-gap
    │   └── index.html
    ├── column-width
    │   └── index.html
    ├── content
    │   └── index.html
    ├── cursor
    │   └── index.html
    ├── display
    │   └── index.html
    ├── flex-basis
    │   └── index.html
    ├── flex-direction
    │   └── index.html
    ├── flex-flow
    │   └── index.html
    ├── flex-grow
    │   └── index.html
    ├── flex-shrink
    │   └── index.html
    ├── flex-wrap
    │   └── index.html
    ├── float
    │   └── index.html
    ├── font-family
    │   └── index.html
    ├── font-size
    │   └── index.html
    ├── font-style
    │   └── index.html
    ├── font-variant
    │   └── index.html
    ├── font-weight
    │   └── index.html
    ├── font
    │   └── index.html
    ├── grid-area
    │   └── index.html
    ├── grid-auto-columns
    │   └── index.html
    ├── grid-auto-flow
    │   └── index.html
    ├── grid-auto-rows
    │   └── index.html
    ├── grid-column-end
    │   └── index.html
    ├── grid-column-gap
    │   └── index.html
    ├── grid-column-start
    │   └── index.html
    ├── grid-column
    │   └── index.html
    ├── grid-gap
    │   └── index.html
    ├── grid-row-end
    │   └── index.html
    ├── grid-row-gap
    │   └── index.html
    ├── grid-row-start
    │   └── index.html
    ├── grid-row
    │   └── index.html
    ├── grid-template-areas
    │   └── index.html
    ├── grid-template-columns
    │   └── index.html
    ├── grid-template-rows
    │   └── index.html
    ├── grid-template
    │   └── index.html
    ├── grid
    │   └── index.html
    ├── height
    │   └── index.html
    ├── justify-content
    │   └── index.html
    ├── left
    │   └── index.html
    ├── letter-spacing
    │   └── index.html
    ├── line-height
    │   └── index.html
    ├── list-style-image
    │   └── index.html
    ├── list-style-position
    │   └── index.html
    ├── list-style-type
    │   └── index.html
    ├── list-style
    │   └── index.html
    ├── margin-bottom
    │   └── index.html
    ├── margin-left
    │   └── index.html
    ├── margin-right
    │   └── index.html
    ├── margin-top
    │   └── index.html
    ├── margin
    │   └── index.html
    ├── max-height
    │   └── index.html
    ├── max-width
    │   └── index.html
    ├── min-height
    │   └── index.html
    ├── min-width
    │   └── index.html
    ├── mix-blend-mode
    │   └── index.html
    ├── opacity
    │   └── index.html
    ├── order
    │   └── index.html
    ├── outline-color
    │   └── index.html
    ├── outline-style
    │   └── index.html
    ├── outline-width
    │   └── index.html
    ├── outline
    │   └── index.html
    ├── overflow-wrap
    │   └── index.html
    ├── overflow-x
    │   └── index.html
    ├── overflow-y
    │   └── index.html
    ├── overflow
    │   └── index.html
    ├── padding-bottom
    │   └── index.html
    ├── padding-left
    │   └── index.html
    ├── padding-right
    │   └── index.html
    ├── padding-top
    │   └── index.html
    ├── padding
    │   └── index.html
    ├── pointer-events
    │   └── index.html
    ├── position
    │   └── index.html
    ├── resize
    │   └── index.html
    ├── right
    │   └── index.html
    ├── text-align
    │   └── index.html
    ├── text-decoration
    │   └── index.html
    ├── text-indent
    │   └── index.html
    ├── text-overflow
    │   └── index.html
    ├── text-shadow
    │   └── index.html
    ├── text-transform
    │   └── index.html
    ├── top
    │   └── index.html
    ├── transform-origin
    │   └── index.html
    ├── transform
    │   └── index.html
    ├── transition-delay
    │   └── index.html
    ├── transition-duration
    │   └── index.html
    ├── transition-property
    │   └── index.html
    ├── transition-timing-function
    │   └── index.html
    ├── transition
    │   └── index.html
    ├── vertical-align
    │   └── index.html
    ├── white-space
    │   └── index.html
    ├── width
    │   └── index.html
    ├── will-change
    │   └── index.html
    ├── word-break
    │   └── index.html
    ├── word-spacing
    │   └── index.html
    └── z-index
    │   └── index.html
├── sass
    ├── base.sass
    ├── controls.sass
    ├── elements.sass
    ├── example.sass
    ├── ff.sass
    ├── finder.sass
    ├── footer.sass
    ├── functions.sass
    ├── header.sass
    ├── heading.sass
    ├── index.sass
    ├── keyframes.sass
    ├── list.sass
    ├── menu.sass
    ├── minireset.sass
    ├── mixins.sass
    ├── modal.sass
    ├── property.sass
    ├── sister.sass
    ├── tooltip.sass
    └── variables.sass
├── transitions.html
└── typography.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Files
 2 | 
 3 | .config.local.yml
 4 | .DS_Store
 5 | .jekyll-metadata
 6 | .ruby-version
 7 | npm-debug.log
 8 | test.sass
 9 | 
10 | # Folders
11 | 
12 | .idea/
13 | .sass-cache
14 | _gh_pages
15 | _site
16 | images/trash
17 | node_modules
18 | 


--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | cssreference.io


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Jeremy Thomas
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [CSS Reference](https://cssreference.io): a free visual guide to the most popular CSS properties
 2 | 
 3 | [![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](https://cssreference.io)
 4 | 
 5 | # License
 6 | 
 7 | The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).
 8 | 
 9 | The underlying source code used to format and display that content is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php).
10 | 
11 | <p>Browser testing via <a href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/support/img/logo.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a></p>
12 | 


--------------------------------------------------------------------------------
/_config.local.yml:
--------------------------------------------------------------------------------
1 | title: CSS Reference
2 | subtitle: "A free visual guide to CSS"
3 | description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
4 | share: "CSS Reference: a free visual guide to the most popular CSS properties."
5 | url: http://localhost:4000
6 | markdown: kramdown
7 | permalink: pretty
8 | exclude: ['node_modules']
9 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | title: CSS Reference
2 | subtitle: "A free visual guide to CSS"
3 | description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
4 | share: "CSS Reference: a free visual guide to the most popular CSS properties."
5 | url: https://cssreference.io
6 | markdown: kramdown
7 | permalink: pretty
8 | exclude: ['node_modules']
9 | 


--------------------------------------------------------------------------------
/_includes/bsa.html:
--------------------------------------------------------------------------------
 1 | <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
 2 | <div id="bsa" class="bsa-cpc"><div id="bsaShadow" class="bsa-shadow"></div></div>
 3 | <script>
 4 | (function(){
 5 |   _bsa.init('default', 'CKYD55QL', 'placement:cssreferenceio', {
 6 |     target: '.bsa-cpc',
 7 |     align: 'horizontal',
 8 |     disable_css: 'true'
 9 |   });
10 | })();
11 | </script>
12 | 


--------------------------------------------------------------------------------
/_includes/carbon.html:
--------------------------------------------------------------------------------
 1 | <script type="text/javascript">
 2 | window.carbonLoaded = false;
 3 | 
 4 | window.helloCarbon = function() {
 5 |   window.carbonLoaded = true;
 6 | }
 7 | 
 8 | document.addEventListener('DOMContentLoaded', function() {
 9 |   // Hello
10 |   var $hello = document.getElementById('hello');
11 |   var $huggingFace = document.getElementById('huggingFace');
12 |   var $carbon = document.getElementById('carbon');
13 |   var $placeholder = document.getElementById('placeholder');
14 | 
15 |   setTimeout(function() {
16 |     if (window.carbonLoaded) {
17 |       $hello.style.minHeight = '218px';
18 |       $huggingFace.style.display = 'none';
19 |       $carbon.style.display = 'block';
20 |     } else {
21 |       $hello.style.minHeight = '0';
22 |       $huggingFace.style.display = 'block';
23 |       $carbon.style.display = 'none';
24 |     }
25 |     $placeholder.style.display = 'none';
26 |   }, 2000);
27 | });
28 | </script>
29 | 
30 | <div id="hello">
31 |   <div id="huggingFace">
32 |     <p>CSS Reference is <strong>free</strong> and always will be!</p>
33 |     <p>Please whitelist us in your ad blocker.</p>
34 |     <p>Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji"></p>
35 |   </div>
36 | 
37 |   <div id="placeholder" class="placeholder">
38 |     <div class="placeholder-image"><div></div></div>
39 |     <div class="placeholder-content"><div></div><div></div><div></div></div>
40 |     <div class="placeholder-footer"><div></div></div>
41 |   </div>
42 | 
43 |   <div id="carbon">
44 |     <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
45 |   </div>
46 | </div>
47 | 


--------------------------------------------------------------------------------
/_includes/collections/animations-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="animation-delay"><a class="menu-link" href="{{site.url}}/property/animation-delay" data-property-name="animation-delay"><span class="item-name">animation-delay</span></a></li><li class="menu-item" data-property-name="animation-direction"><a class="menu-link" href="{{site.url}}/property/animation-direction" data-property-name="animation-direction"><span class="item-name">animation-direction</span></a></li><li class="menu-item" data-property-name="animation-duration"><a class="menu-link" href="{{site.url}}/property/animation-duration" data-property-name="animation-duration"><span class="item-name">animation-duration</span></a></li><li class="menu-item" data-property-name="animation-fill-mode"><a class="menu-link" href="{{site.url}}/property/animation-fill-mode" data-property-name="animation-fill-mode"><span class="item-name">animation-fill-mode</span></a></li><li class="menu-item" data-property-name="animation-iteration-count"><a class="menu-link" href="{{site.url}}/property/animation-iteration-count" data-property-name="animation-iteration-count"><span class="item-name">animation-iteration-count</span></a></li><li class="menu-item" data-property-name="animation-name"><a class="menu-link" href="{{site.url}}/property/animation-name" data-property-name="animation-name"><span class="item-name">animation-name</span></a></li><li class="menu-item" data-property-name="animation-play-state"><a class="menu-link" href="{{site.url}}/property/animation-play-state" data-property-name="animation-play-state"><span class="item-name">animation-play-state</span></a></li><li class="menu-item" data-property-name="animation-timing-function"><a class="menu-link" href="{{site.url}}/property/animation-timing-function" data-property-name="animation-timing-function"><span class="item-name">animation-timing-function</span></a></li><li class="menu-item" data-property-name="animation"><a class="menu-link" href="{{site.url}}/property/animation" data-property-name="animation"><span class="item-name">animation</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/backgrounds-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="background-attachment"><a class="menu-link" href="{{site.url}}/property/background-attachment" data-property-name="background-attachment"><span class="item-name">background-attachment</span></a></li><li class="menu-item" data-property-name="background-clip"><a class="menu-link" href="{{site.url}}/property/background-clip" data-property-name="background-clip"><span class="item-name">background-clip</span></a></li><li class="menu-item" data-property-name="background-color"><a class="menu-link" href="{{site.url}}/property/background-color" data-property-name="background-color"><span class="item-name">background-color</span></a></li><li class="menu-item" data-property-name="background-image"><a class="menu-link" href="{{site.url}}/property/background-image" data-property-name="background-image"><span class="item-name">background-image</span></a></li><li class="menu-item" data-property-name="background-origin"><a class="menu-link" href="{{site.url}}/property/background-origin" data-property-name="background-origin"><span class="item-name">background-origin</span></a></li><li class="menu-item" data-property-name="background-position"><a class="menu-link" href="{{site.url}}/property/background-position" data-property-name="background-position"><span class="item-name">background-position</span></a></li><li class="menu-item" data-property-name="background-repeat"><a class="menu-link" href="{{site.url}}/property/background-repeat" data-property-name="background-repeat"><span class="item-name">background-repeat</span></a></li><li class="menu-item" data-property-name="background-size"><a class="menu-link" href="{{site.url}}/property/background-size" data-property-name="background-size"><span class="item-name">background-size</span></a></li><li class="menu-item" data-property-name="background"><a class="menu-link" href="{{site.url}}/property/background" data-property-name="background"><span class="item-name">background</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/css-grid-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="grid-area"><a class="menu-link" href="{{site.url}}/property/grid-area" data-property-name="grid-area"><span class="item-name">grid-area</span></a></li><li class="menu-item" data-property-name="grid-auto-columns"><a class="menu-link" href="{{site.url}}/property/grid-auto-columns" data-property-name="grid-auto-columns"><span class="item-name">grid-auto-columns</span></a></li><li class="menu-item" data-property-name="grid-auto-flow"><a class="menu-link" href="{{site.url}}/property/grid-auto-flow" data-property-name="grid-auto-flow"><span class="item-name">grid-auto-flow</span></a></li><li class="menu-item" data-property-name="grid-auto-rows"><a class="menu-link" href="{{site.url}}/property/grid-auto-rows" data-property-name="grid-auto-rows"><span class="item-name">grid-auto-rows</span></a></li><li class="menu-item" data-property-name="grid-column-end"><a class="menu-link" href="{{site.url}}/property/grid-column-end" data-property-name="grid-column-end"><span class="item-name">grid-column-end</span></a></li><li class="menu-item" data-property-name="grid-column-gap"><a class="menu-link" href="{{site.url}}/property/grid-column-gap" data-property-name="grid-column-gap"><span class="item-name">grid-column-gap</span></a></li><li class="menu-item" data-property-name="grid-column-start"><a class="menu-link" href="{{site.url}}/property/grid-column-start" data-property-name="grid-column-start"><span class="item-name">grid-column-start</span></a></li><li class="menu-item" data-property-name="grid-column"><a class="menu-link" href="{{site.url}}/property/grid-column" data-property-name="grid-column"><span class="item-name">grid-column</span></a></li><li class="menu-item" data-property-name="grid-gap"><a class="menu-link" href="{{site.url}}/property/grid-gap" data-property-name="grid-gap"><span class="item-name">grid-gap</span></a></li><li class="menu-item" data-property-name="grid-row-end"><a class="menu-link" href="{{site.url}}/property/grid-row-end" data-property-name="grid-row-end"><span class="item-name">grid-row-end</span></a></li><li class="menu-item" data-property-name="grid-row-gap"><a class="menu-link" href="{{site.url}}/property/grid-row-gap" data-property-name="grid-row-gap"><span class="item-name">grid-row-gap</span></a></li><li class="menu-item" data-property-name="grid-row-start"><a class="menu-link" href="{{site.url}}/property/grid-row-start" data-property-name="grid-row-start"><span class="item-name">grid-row-start</span></a></li><li class="menu-item" data-property-name="grid-row"><a class="menu-link" href="{{site.url}}/property/grid-row" data-property-name="grid-row"><span class="item-name">grid-row</span></a></li><li class="menu-item" data-property-name="grid-template-areas"><a class="menu-link" href="{{site.url}}/property/grid-template-areas" data-property-name="grid-template-areas"><span class="item-name">grid-template-areas</span></a></li><li class="menu-item" data-property-name="grid-template-columns"><a class="menu-link" href="{{site.url}}/property/grid-template-columns" data-property-name="grid-template-columns"><span class="item-name">grid-template-columns</span></a></li><li class="menu-item" data-property-name="grid-template-rows"><a class="menu-link" href="{{site.url}}/property/grid-template-rows" data-property-name="grid-template-rows"><span class="item-name">grid-template-rows</span></a></li><li class="menu-item" data-property-name="grid-template"><a class="menu-link" href="{{site.url}}/property/grid-template" data-property-name="grid-template"><span class="item-name">grid-template</span></a></li><li class="menu-item" data-property-name="grid"><a class="menu-link" href="{{site.url}}/property/grid" data-property-name="grid"><span class="item-name">grid</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/flexbox-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="align-content"><a class="menu-link" href="{{site.url}}/property/align-content" data-property-name="align-content"><span class="item-name">align-content</span></a></li><li class="menu-item" data-property-name="align-items"><a class="menu-link" href="{{site.url}}/property/align-items" data-property-name="align-items"><span class="item-name">align-items</span></a></li><li class="menu-item" data-property-name="align-self"><a class="menu-link" href="{{site.url}}/property/align-self" data-property-name="align-self"><span class="item-name">align-self</span></a></li><li class="menu-item" data-property-name="flex-basis"><a class="menu-link" href="{{site.url}}/property/flex-basis" data-property-name="flex-basis"><span class="item-name">flex-basis</span></a></li><li class="menu-item" data-property-name="flex-direction"><a class="menu-link" href="{{site.url}}/property/flex-direction" data-property-name="flex-direction"><span class="item-name">flex-direction</span></a></li><li class="menu-item" data-property-name="flex-flow"><a class="menu-link" href="{{site.url}}/property/flex-flow" data-property-name="flex-flow"><span class="item-name">flex-flow</span></a></li><li class="menu-item" data-property-name="flex-grow"><a class="menu-link" href="{{site.url}}/property/flex-grow" data-property-name="flex-grow"><span class="item-name">flex-grow</span></a></li><li class="menu-item" data-property-name="flex-shrink"><a class="menu-link" href="{{site.url}}/property/flex-shrink" data-property-name="flex-shrink"><span class="item-name">flex-shrink</span></a></li><li class="menu-item" data-property-name="flex-wrap"><a class="menu-link" href="{{site.url}}/property/flex-wrap" data-property-name="flex-wrap"><span class="item-name">flex-wrap</span></a></li><li class="menu-item" data-property-name="justify-content"><a class="menu-link" href="{{site.url}}/property/justify-content" data-property-name="justify-content"><span class="item-name">justify-content</span></a></li><li class="menu-item" data-property-name="order"><a class="menu-link" href="{{site.url}}/property/order" data-property-name="order"><span class="item-name">order</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/positioning-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="bottom"><a class="menu-link" href="{{site.url}}/property/bottom" data-property-name="bottom"><span class="item-name">bottom</span></a></li><li class="menu-item" data-property-name="left"><a class="menu-link" href="{{site.url}}/property/left" data-property-name="left"><span class="item-name">left</span></a></li><li class="menu-item" data-property-name="position"><a class="menu-link" href="{{site.url}}/property/position" data-property-name="position"><span class="item-name">position</span></a></li><li class="menu-item" data-property-name="right"><a class="menu-link" href="{{site.url}}/property/right" data-property-name="right"><span class="item-name">right</span></a></li><li class="menu-item" data-property-name="top"><a class="menu-link" href="{{site.url}}/property/top" data-property-name="top"><span class="item-name">top</span></a></li><li class="menu-item" data-property-name="z-index"><a class="menu-link" href="{{site.url}}/property/z-index" data-property-name="z-index"><span class="item-name">z-index</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/transitions-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="transition-delay"><a class="menu-link" href="{{site.url}}/property/transition-delay" data-property-name="transition-delay"><span class="item-name">transition-delay</span></a></li><li class="menu-item" data-property-name="transition-duration"><a class="menu-link" href="{{site.url}}/property/transition-duration" data-property-name="transition-duration"><span class="item-name">transition-duration</span></a></li><li class="menu-item" data-property-name="transition-property"><a class="menu-link" href="{{site.url}}/property/transition-property" data-property-name="transition-property"><span class="item-name">transition-property</span></a></li><li class="menu-item" data-property-name="transition-timing-function"><a class="menu-link" href="{{site.url}}/property/transition-timing-function" data-property-name="transition-timing-function"><span class="item-name">transition-timing-function</span></a></li><li class="menu-item" data-property-name="transition"><a class="menu-link" href="{{site.url}}/property/transition" data-property-name="transition"><span class="item-name">transition</span></a></li>


--------------------------------------------------------------------------------
/_includes/collections/typography-list.html:
--------------------------------------------------------------------------------
1 | <li class="menu-item" data-property-name="color"><a class="menu-link" href="{{site.url}}/property/color" data-property-name="color"><span class="item-name">color</span></a></li><li class="menu-item" data-property-name="font-family"><a class="menu-link" href="{{site.url}}/property/font-family" data-property-name="font-family"><span class="item-name">font-family</span></a></li><li class="menu-item" data-property-name="font-size"><a class="menu-link" href="{{site.url}}/property/font-size" data-property-name="font-size"><span class="item-name">font-size</span></a></li><li class="menu-item" data-property-name="font-style"><a class="menu-link" href="{{site.url}}/property/font-style" data-property-name="font-style"><span class="item-name">font-style</span></a></li><li class="menu-item" data-property-name="font-variant"><a class="menu-link" href="{{site.url}}/property/font-variant" data-property-name="font-variant"><span class="item-name">font-variant</span></a></li><li class="menu-item" data-property-name="font-weight"><a class="menu-link" href="{{site.url}}/property/font-weight" data-property-name="font-weight"><span class="item-name">font-weight</span></a></li><li class="menu-item" data-property-name="font"><a class="menu-link" href="{{site.url}}/property/font" data-property-name="font"><span class="item-name">font</span></a></li><li class="menu-item" data-property-name="letter-spacing"><a class="menu-link" href="{{site.url}}/property/letter-spacing" data-property-name="letter-spacing"><span class="item-name">letter-spacing</span></a></li><li class="menu-item" data-property-name="line-height"><a class="menu-link" href="{{site.url}}/property/line-height" data-property-name="line-height"><span class="item-name">line-height</span></a></li><li class="menu-item" data-property-name="text-align"><a class="menu-link" href="{{site.url}}/property/text-align" data-property-name="text-align"><span class="item-name">text-align</span></a></li><li class="menu-item" data-property-name="text-decoration"><a class="menu-link" href="{{site.url}}/property/text-decoration" data-property-name="text-decoration"><span class="item-name">text-decoration</span></a></li><li class="menu-item" data-property-name="text-indent"><a class="menu-link" href="{{site.url}}/property/text-indent" data-property-name="text-indent"><span class="item-name">text-indent</span></a></li><li class="menu-item" data-property-name="text-overflow"><a class="menu-link" href="{{site.url}}/property/text-overflow" data-property-name="text-overflow"><span class="item-name">text-overflow</span></a></li><li class="menu-item" data-property-name="text-shadow"><a class="menu-link" href="{{site.url}}/property/text-shadow" data-property-name="text-shadow"><span class="item-name">text-shadow</span></a></li><li class="menu-item" data-property-name="text-transform"><a class="menu-link" href="{{site.url}}/property/text-transform" data-property-name="text-transform"><span class="item-name">text-transform</span></a></li><li class="menu-item" data-property-name="white-space"><a class="menu-link" href="{{site.url}}/property/white-space" data-property-name="white-space"><span class="item-name">white-space</span></a></li><li class="menu-item" data-property-name="word-break"><a class="menu-link" href="{{site.url}}/property/word-break" data-property-name="word-break"><span class="item-name">word-break</span></a></li><li class="menu-item" data-property-name="word-spacing"><a class="menu-link" href="{{site.url}}/property/word-spacing" data-property-name="word-spacing"><span class="item-name">word-spacing</span></a></li>


--------------------------------------------------------------------------------
/_includes/favicons.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201702181118">
 3 | <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201702181118" sizes="32x32">
 4 | <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201702181118" sizes="16x16">
 5 | <link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201702181118">
 6 | <link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201702181118" color="#00d1b2">
 7 | <link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201702181118">
 8 | <meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201702181118">
 9 | <meta name="theme-color" content="#00d1b2">
10 | 


--------------------------------------------------------------------------------
/_includes/ff.html:
--------------------------------------------------------------------------------
 1 | <a class="ff is-fortyfour" href="https://jgthms.com/css-in-44-minutes-ebook" target="_blank">
 2 |   <div class="ff-background"></div>
 3 |   <p class="ff-text">
 4 |     <strong class="tag is-danger">New!</strong> My 44-page ebook "<strong>CSS in 44 minutes</strong>" is out! <span class="emoji">😃</span>
 5 |   </p>
 6 |   <span class="button is-primary is-rounded">
 7 |     <strong>Get it now →</strong>
 8 |   </span>
 9 | </a>
10 | 


--------------------------------------------------------------------------------
/_includes/google-fonts.html:
--------------------------------------------------------------------------------
 1 | <script async type="text/javascript">
 2 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 3 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 4 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 5 |   })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 6 | 
 7 |   ga('create', 'UA-82634666-3', 'auto');
 8 |   ga('send', 'pageview');
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/_includes/modals/share.html:
--------------------------------------------------------------------------------
 1 | <div id="modal-share" class="modal">
 2 |   <div class="modal-box">
 3 |     <p class="modal-title">Share this CSS property</p>
 4 |     <p class="modal-url">
 5 |       <input id="modal-input" class="input" type="text" value="{{site.url}}/" readonly>
 6 |       <button id="modal-copy" class="button is-primary" data-clipboard-target="#modal-input">Copy</button>
 7 |     </p>
 8 |     <p class="modal-social">
 9 |       <a id="modal-twitter" class="button is-twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties">Share on Twitter</a>
10 |       <a id="modal-facebook" class="button is-facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.io">Share on Facebook</a>
11 |     </p>
12 |     <a id="modal-close" class="modal-close"></a>
13 |   </div>
14 | </div>


--------------------------------------------------------------------------------
/_includes/noscript.html:
--------------------------------------------------------------------------------
 1 | <noscript>
 2 |   <style type="text/css">
 3 |     #menuHello {
 4 |       min-height: 0;
 5 |     }
 6 | 
 7 |     #huggingFace {
 8 |       display: block;
 9 |     }
10 | 
11 |     #carbon,
12 |     #placeholder {
13 |       display: none;
14 |     }
15 |   </style>
16 | </noscript>
17 | 


--------------------------------------------------------------------------------
/_includes/sister.html:
--------------------------------------------------------------------------------
 1 | <footer class="sisters">
 2 |   <div class="sister sister--htmlreference container">
 3 |     <h4 class="sister-title">
 4 |       Check out our sister website:<br />
 5 |       <strong>HTML Reference</strong> 😃
 6 |     </h4>
 7 |     <a class="sister-banner" href="https://htmlreference.io">
 8 |       <img
 9 |         src="{{site.url}}/images/html-reference-logo.png"
10 |         alt="HTML Reference logo"
11 |       />
12 |     </a>
13 |   </div>
14 |   <div class="sister sister--bulma container">
15 |     <h4 class="sister-title">
16 |       Need a CSS framework?<br />
17 |       Try out <strong>Bulma</strong> 😎
18 |     </h4>
19 |     <a class="sister-banner" href="https://bulma.io">
20 |       <img src="{{site.url}}/images/bulma-logo.png" alt="Bulma logo" />
21 |     </a>
22 |   </div>
23 |   <div class="sister sister--bulma container">
24 |     <h4 class="sister-title">Browser testing via</h4>
25 |     <a class="sister-banner" href="https://www.lambdatest.com/" target="_blank"
26 |       ><img
27 |         src="https://www.lambdatest.com/support/img/logo.svg"
28 |         style="vertical-align: middle; margin-left: 5px"
29 |         width="220"
30 |         height="39"
31 |     /></a>
32 |   </div>
33 | </footer>
34 | 


--------------------------------------------------------------------------------
/_includes/social/button-facebook.html:
--------------------------------------------------------------------------------
1 | <a class="share-button share-button--facebook"
2 |   href="https://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
3 |   data-tooltip-after="Share on Facebook"
4 |   rel="external nofollow"
5 |   target="_blank">
6 |   {% include svg/facebook.html %}
7 | </a>
8 | 


--------------------------------------------------------------------------------
/_includes/social/button-twitter.html:
--------------------------------------------------------------------------------
 1 | <a class="share-button share-button--twitter"
 2 |   data-social-network="Twitter"
 3 |   data-social-action="tweet"
 4 |   data-social-target="{{site.url}}{{page.url}}"
 5 |   data-tooltip-after="Share on Twitter"
 6 |   href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}&text={{site.share | url_encode}}"
 7 |   rel="external nofollow"
 8 |   target="_blank">
 9 |   {% include svg/twitter.html %}
10 | </a>
11 | 


--------------------------------------------------------------------------------
/_includes/svg/facebook.html:
--------------------------------------------------------------------------------
 1 | <svg class="svg svg--facebook" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
 2 |    width="266.893px" height="266.895px" viewBox="0 0 266.893 266.895" enable-background="new 0 0 266.893 266.895"
 3 |    xml:space="preserve">
 4 |   <path fill="#3C5A99" d="M248.082,262.307c7.854,0,14.223-6.369,14.223-14.225V18.812
 5 |   c0-7.857-6.368-14.224-14.223-14.224H18.812c-7.857,0-14.224,6.367-14.224,14.224v229.27c0,7.855,6.366,14.225,14.224,14.225
 6 |   H248.082z"/>
 7 |   <path fill="#FFFFFF" d="M182.409,262.307v-99.803h33.499l5.016-38.895h-38.515V98.777c0-11.261,3.127-18.935,19.275-18.935
 8 |   l20.596-0.009V45.045c-3.562-0.474-15.788-1.533-30.012-1.533c-29.695,0-50.025,18.126-50.025,51.413v28.684h-33.585v38.895h33.585
 9 |   v99.803H182.409z"/>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/_includes/svg/github.html:
--------------------------------------------------------------------------------
1 | <svg class="svg svg--github" width="33" height="32" viewBox="0 0 33 32" xmlns="https://www.w3.org/2000/svg"><path d="M16.2885009,0 C7.2942243,0 0,7.293 0,16.29 C0,23.487 4.66714351,29.592 11.1403426,31.746 C11.9553676,31.896 12.2523768,31.393 12.2523768,30.961 C12.2523768,30.575 12.2383763,29.55 12.2303761,28.191 C7.69923675,29.175 6.74320735,26.007 6.74320735,26.007 C6.00218457,24.125 4.93415172,23.624 4.93415172,23.624 C3.45510624,22.614 5.04615517,22.634 5.04615517,22.634 C6.68120545,22.749 7.54123189,24.313 7.54123189,24.313 C8.99427657,26.802 11.3543491,26.083 12.2823777,25.666 C12.4303822,24.614 12.8513952,23.896 13.3164095,23.489 C9.69929825,23.078 5.89618131,21.68 5.89618131,15.438 C5.89618131,13.66 6.53120083,12.205 7.57323288,11.067 C7.40522771,10.655 6.84621052,8.998 7.7332378,6.756 C7.7332378,6.756 9.10027983,6.318 12.2123755,8.426 C13.5114155,8.064 14.9054583,7.884 16.2905009,7.877 C17.6745435,7.884 19.0675863,8.064 20.3686263,8.426 C23.478722,6.318 24.8437639,6.756 24.8437639,6.756 C25.7327913,8.998 25.1737741,10.655 25.006769,11.067 C26.0508011,12.205 26.6808204,13.66 26.6808204,15.438 C26.6808204,21.696 22.8717033,23.073 19.2435917,23.476 C19.8276097,23.979 20.3486257,24.973 20.3486257,26.493 C20.3486257,28.67 20.3286251,30.427 20.3286251,30.961 C20.3286251,31.397 20.6226341,31.904 21.4486595,31.745 C27.9168584,29.586 32.5800018,23.485 32.5800018,16.29 C32.5800018,7.293 25.2857775,0 16.2885009,0" id="Fill-3"></path></svg>
2 | 


--------------------------------------------------------------------------------
/_includes/svg/twitter.html:
--------------------------------------------------------------------------------
1 | <svg class="svg svg--twitter" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="https://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
2 |   <g transform="translate(-539.18 -568.86)">
3 |     <path d="m633.9 812.04c112.46 0 173.96-93.168 173.96-173.96 0-2.6463-0.0539-5.2806-0.1726-7.903 11.938-8.6302 22.314-19.4 30.498-31.66-10.955 4.8694-22.744 8.1474-35.111 9.6255 12.623-7.5693 22.314-19.543 26.886-33.817-11.813 7.0031-24.895 12.093-38.824 14.841-11.157-11.884-27.041-19.317-44.629-19.317-33.764 0-61.144 27.381-61.144 61.132 0 4.7978 0.5364 9.4646 1.5854 13.941-50.815-2.5569-95.874-26.886-126.03-63.88-5.2508 9.0354-8.2785 19.531-8.2785 30.73 0 21.212 10.794 39.938 27.208 50.893-10.031-0.30992-19.454-3.0635-27.69-7.6468-0.009 0.25652-0.009 0.50661-0.009 0.78077 0 29.61 21.075 54.332 49.051 59.934-5.1376 1.4006-10.543 2.1516-16.122 2.1516-3.9336 0-7.766-0.38716-11.491-1.1026 7.7838 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.7983-0.28036-14.584-0.84634 27.059 17.344 59.189 27.464 93.722 27.464" fill="#1da1f2"/>
4 |   </g>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/_layouts/collection.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="is-collection" data-template="collection">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |     <meta name="viewport" content="width=device-width">
 7 |     <title>{{page.collection_name}} - {{site.title}}</title>
 8 |     <meta name="description" content="Learn how {{page.collection_name}} works in CSS.">
 9 |     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
10 | 
11 |     <meta property="og:url" content="{{site.url}}{{page.url}}">
12 |     <meta property="og:type" content="website">
13 |     <meta property="og:title" content="{{page.collection_name}} - {{site.title}}">
14 |     <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
15 |     <meta property="og:image:type" content="image/png">
16 |     <meta property="og:image:width" content="1200">
17 |     <meta property="og:image:height" content="630">
18 |     <meta property="og:description" content="Learn how {{page.collection_name}} works in CSS.">
19 | 
20 |     <meta name="twitter:card" content="summary_large_image">
21 |     <meta name="twitter:site" content="@jgthms">
22 |     <meta name="twitter:creator" content="@jgthms">
23 |     <meta name="twitter:title" content="{{page.collection_name}} - {{site.title}}">
24 |     <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
25 |     <meta name="twitter:description" content="Learn how {{page.collection_name}} works in CSS.">
26 | 
27 |     {% include favicons.html %}
28 |   </head>
29 |   <body>
30 |     {% include menu.html %}
31 |     <main class="main">
32 |       <header class="heading">
33 |         <div class="heading-content">
34 |           <h1 class="heading-title">
35 |             <strong>{{page.collection_name}}</strong> in CSS
36 |           </h1>
37 |           <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
38 |         </div>
39 |         <p class="heading-share">
40 |           <strong class="heading-share-label">Share this page</strong>
41 |           <a class="heading-share-button is-twitter"
42 |             data-social-network="Twitter"
43 |             data-social-action="tweet"
44 |             data-social-target="{{site.url}}{{page.url}}"
45 |             href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}{{page.url | url_encode}}&text={{page.collection_name | prepend: 'Learn how ' | append: ' works in CSS' | url_encode}}"
46 |             rel="external nofollow"
47 |             target="_blank">
48 |             {% include svg/twitter.html %}
49 |           </a>
50 |           <a class="heading-share-button is-facebook"
51 |             href="https://www.facebook.com/sharer.php?u={{site.url | url_encode}}{{page.url | url_encode}}"
52 |             rel="external nofollow"
53 |             target="_blank">
54 |             {% include svg/facebook.html %}
55 |           </a>
56 |         </p>
57 |       </header>
58 |       {% include ff.html %}
59 |       <div id="alo" class="alo">
60 |         {% include bsa.html %}
61 |       </div>
62 |       <section class="properties">
63 |         {{content}}
64 |       </section>
65 |     </main>
66 |     {% include modals/share.html %}
67 |     {% include google-fonts.html %}
68 |     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
69 |     <script src="{{site.url}}/javascript/main.js"></script>
70 |     <script src="{{site.url}}/javascript/collection.js"></script>
71 |     {% include noscript.html %}
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/_layouts/single.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="is-single" data-template="single">
 3 |   <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |     <meta name="viewport" content="width=device-width">
 7 |     <title>{{page.property_name}} - {{site.title}}</title>
 8 |     <meta name="description" content="Learn how {{page.property_name}} works in CSS.">
 9 |     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
10 | 
11 |     <meta property="og:url" content="{{site.url}}{{page.url}}">
12 |     <meta property="og:type" content="website">
13 |     <meta property="og:title" content="{{page.property_name}} - {{site.title}}">
14 |     <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
15 |     <meta property="og:image:type" content="image/png">
16 |     <meta property="og:image:width" content="1200">
17 |     <meta property="og:image:height" content="630">
18 |     <meta property="og:description" content="Learn how {{page.property_name}} works in CSS.">
19 | 
20 |     <meta name="twitter:card" content="summary_large_image">
21 |     <meta name="twitter:site" content="@jgthms">
22 |     <meta name="twitter:creator" content="@jgthms">
23 |     <meta name="twitter:title" content="{{page.property_name}} - {{site.title}}">
24 |     <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
25 |     <meta name="twitter:description" content="Learn how {{page.property_name}} works in CSS.">
26 | 
27 |     {% include favicons.html %}
28 |   </head>
29 |   <body>
30 |     {% include menu.html %}
31 |     <main class="main">
32 |       <div class="ola">
33 |         {% include bsa.html %}
34 |       </div>
35 |       <section class="properties properties--single">
36 |         {% include ff.html %}
37 |         {{content}}
38 |       </section>
39 |     </main>
40 |     {% include modals/share.html %}
41 |     {% include google-fonts.html %}
42 |     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
43 |     <script src="{{site.url}}/javascript/main.js"></script>
44 |     <script src="{{site.url}}/javascript/single.js"></script>
45 |     {% include noscript.html %}
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/animations.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Animations"
4 | menu_list: "animations-list"
5 | description: "animate almost any other property"
6 | ---
7 | 
8 | {% include collections/animations.html %}
9 | 


--------------------------------------------------------------------------------
/backgrounds.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Backgrounds"
4 | menu_list: "backgrounds-list"
5 | description: "style the background of an element with colors and images"
6 | ---
7 | 
8 | {% include collections/backgrounds.html %}
9 | 


--------------------------------------------------------------------------------
/box-model.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Box model"
4 | menu_list: "box-model-list"
5 | description: "define the size and behavior of the HTML element"
6 | ---
7 | 
8 | {% include collections/box-model.html %}
9 | 


--------------------------------------------------------------------------------
/css-grid.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Grid"
4 | menu_list: "css-grid-list"
5 | description: "use the CSS Grid capabilities"
6 | ---
7 | 
8 | {% include collections/css-grid.html %}
9 | 


--------------------------------------------------------------------------------
/css/website.sass:
--------------------------------------------------------------------------------
 1 | @charset "utf-8"
 2 | 
 3 | @import "../sass/minireset"
 4 | @import "../sass/functions"
 5 | @import "../sass/variables"
 6 | @import "../sass/mixins"
 7 | @import "../sass/tooltip"
 8 | 
 9 | @import "../sass/base"
10 | @import "../sass/controls"
11 | @import "../sass/menu"
12 | @import "../sass/header"
13 | @import "../sass/footer"
14 | @import "../sass/index"
15 | @import "../sass/finder"
16 | @import "../sass/heading"
17 | @import "../sass/list"
18 | @import "../sass/property"
19 | @import "../sass/example"
20 | @import "../sass/modal"
21 | @import "../sass/keyframes"
22 | @import "../sass/sister"
23 | 
24 | @import "../sass/elements"
25 | @import "../sass/ff"
26 | 
27 | .modal,
28 | .bsa-cpc
29 |   z-index: 50
30 | 
31 | .menu
32 |   z-index: 40
33 | 
34 | .footer
35 |   z-index: 30
36 | 
37 | .properties,
38 | .list
39 |   z-index: 20
40 | 
41 | .header
42 |   z-index: 10
43 | 


--------------------------------------------------------------------------------
/favicons/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/android-chrome-192x192.png


--------------------------------------------------------------------------------
/favicons/android-chrome-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/android-chrome-384x384.png


--------------------------------------------------------------------------------
/favicons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/apple-touch-icon.png


--------------------------------------------------------------------------------
/favicons/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/favicons/mstile-150x150.png?v=201702181118"/>
 6 |             <TileColor>#00d1b2</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/favicons/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/favicon-16x16.png


--------------------------------------------------------------------------------
/favicons/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/favicon-32x32.png


--------------------------------------------------------------------------------
/favicons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/favicon.ico


--------------------------------------------------------------------------------
/favicons/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "CSS Reference",
 3 |     "icons": [
 4 |         {
 5 |             "src": "/favicons/android-chrome-192x192.png?v=201702181118",
 6 |             "sizes": "192x192",
 7 |             "type": "image/png"
 8 |         },
 9 |         {
10 |             "src": "/favicons/android-chrome-384x384.png?v=201702181118",
11 |             "sizes": "384x384",
12 |             "type": "image/png"
13 |         }
14 |     ],
15 |     "theme_color": "#00d1b2",
16 |     "background_color": "#00d1b2",
17 |     "display": "standalone"
18 | }


--------------------------------------------------------------------------------
/favicons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/favicons/mstile-150x150.png


--------------------------------------------------------------------------------
/flexbox.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Flexbox"
4 | menu_list: "flexbox-list"
5 | description: "use the CSS3 Flexbox capabilities"
6 | ---
7 | 
8 | {% include collections/flexbox.html %}
9 | 


--------------------------------------------------------------------------------
/images/bulma-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/bulma-logo.png


--------------------------------------------------------------------------------
/images/css-reference-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/css-reference-icon.png


--------------------------------------------------------------------------------
/images/css-reference-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/css-reference-logo.png


--------------------------------------------------------------------------------
/images/css-reference-share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/css-reference-share.png


--------------------------------------------------------------------------------
/images/css-reference-type.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/css-reference-type.png


--------------------------------------------------------------------------------
/images/fortyfour-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/fortyfour-background.jpg


--------------------------------------------------------------------------------
/images/html-reference-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/html-reference-logo.png


--------------------------------------------------------------------------------
/images/hugging-face.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/hugging-face.png


--------------------------------------------------------------------------------
/images/jt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/jt.png


--------------------------------------------------------------------------------
/images/landscape.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/landscape.jpg


--------------------------------------------------------------------------------
/images/landscape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/landscape.png


--------------------------------------------------------------------------------
/images/list-style-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jgthms/css-reference/681c999776e759a213a6adea47354e2917864bef/images/list-style-image.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | template: index
 3 | ---
 4 | 
 5 | <!DOCTYPE html>
 6 | <html class="is-index" data-template="index">
 7 |   <head>
 8 |     <meta charset="UTF-8">
 9 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10 |     <meta name="viewport" content="width=device-width">
11 |     <title>{{site.title}} - {{site.subtitle}}</title>
12 |     <meta name="description" content="{{site.description}}">
13 | 
14 |     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
15 | 
16 |     <meta property="og:url" content="{{site.url}}">
17 |     <meta property="og:type" content="website">
18 |     <meta property="og:title" content="{{site.title}}">
19 |     <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
20 |     <meta property="og:image:type" content="image/png">
21 |     <meta property="og:image:width" content="1200">
22 |     <meta property="og:image:height" content="630">
23 |     <meta property="og:description" content="{{site.description}}">
24 | 
25 |     <meta name="twitter:card" content="summary_large_image">
26 |     <meta name="twitter:site" content="@jgthms">
27 |     <meta name="twitter:creator" content="@jgthms">
28 |     <meta name="twitter:title" content="{{site.title}}">
29 |     <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
30 |     <meta name="twitter:description" content="{{site.description}}">
31 | 
32 |     {% include favicons.html %}
33 |   </head>
34 |   <body>
35 |     <header class="header">
36 |       <div class="container">
37 |         <h1 class="header-figure">
38 |           <img src="{{site.url}}/images/css-reference-icon.png" alt="{{site.title}} icon">
39 |           <img src="{{site.url}}/images/css-reference-type.png" alt="{{site.title}} type">
40 |         </h1>
41 |         <div class="header-content">
42 |           <div class="header-carbon">
43 |             {% include carbon.html %}
44 |           </div>
45 |           <div class="header-text">
46 |             <h2 class="header-title">
47 |               {{site.subtitle}}
48 |             </h2>
49 |             <p class="header-subtitle">
50 |               <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular <strong>properties</strong>, and explains them with illustrated and animated <strong>examples</strong>.
51 |             </p>
52 |             <footer class="header-share">
53 |               {% include social/button-twitter.html %}
54 |               {% include social/button-facebook.html %}
55 |             </footer>
56 |           </div>
57 |         </div>
58 |       </div>
59 |     </header>
60 |     {% include ff.html %}
61 |     <main class="index">
62 |       <nav class="index-collections">
63 |         <strong>Collections:</strong>
64 |         <a href="{{site.url}}/animations/">Animations</a>
65 |         <a href="{{site.url}}/backgrounds/">Backgrounds</a>
66 |         <a href="{{site.url}}/box-model/">Box model</a>
67 |         <a href="{{site.url}}/flexbox/">Flexbox</a>
68 |         <a class="is-new" href="{{site.url}}/css-grid/">CSS Grid <span class="tag">New!</span></a>
69 |         <a href="{{site.url}}/positioning/">Positioning</a>
70 |         <a href="{{site.url}}/transitions/">Transitions</a>
71 |         <a href="{{site.url}}/typography/">Typography</a>
72 |       </nav>
73 |       <div class="container">
74 |         <div class="index-left">
75 |           {% include components/finder.html %}
76 |         </div>
77 |       </div>
78 |     </main>
79 |     {% include sister.html %}
80 |     {% include modals/share.html %}
81 |     {% include google-fonts.html %}
82 |     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
83 |     <script src="{{site.url}}/javascript/main.js"></script>
84 |     {% include noscript.html %}
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/javascript/collection.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |   var $root = document.documentElement;
 3 |   var $alo = document.getElementById('alo');
 4 |   var $bsaShadow = document.getElementById('bsaShadow');
 5 | 
 6 |   var toTravel = $root.scrollHeight - window.innerHeight;
 7 |   var fromTop = $alo.offsetTop;
 8 |   var menuThrottle = null;
 9 | 
10 |   if ($alo) {
11 |     document.addEventListener('scroll', function(event) {
12 |       var scrollTop = window.scrollY;
13 |       setBsa(scrollTop);
14 |       clearTimeout(menuThrottle);
15 |       throttle = setTimeout(setBsaShadows(scrollTop), 100);
16 |     });
17 | 
18 |     function setBsaShadows(scrollTop) {
19 |       var distance = toTravel - scrollTop;
20 |       var topFactor = 1 - (distance / toTravel);
21 |       $bsaShadow.style.opacity = topFactor;
22 |       $bsaShadow.style.transform = 'scaleY(' + topFactor + ')';
23 |     }
24 | 
25 |     function setBsa(scrollTop) {
26 |       if (scrollTop >= fromTop) {
27 |         $alo.classList.add('is-fixed');
28 |       } else {
29 |         $alo.classList.remove('is-fixed');
30 |       }
31 |     }
32 | 
33 |     setBsaShadows(0);
34 |   }
35 | 
36 |   // Hashes
37 |   var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a');
38 | 
39 |   Array.prototype.forEach.call($hashes, function($el) {
40 |     $el.addEventListener('click', function(event) {
41 |       event.preventDefault();
42 |       var propertyName = $el.dataset.propertyName;
43 |       var $target = document.getElementById($el.dataset.propertyName);
44 |       history.replaceState('', document.title, '#' + propertyName);
45 | 
46 |       if ($target) {
47 |         $target.scrollIntoView();
48 |       }
49 |     });
50 |   });
51 | });
52 | 


--------------------------------------------------------------------------------
/javascript/index.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |   // Logo
 3 |   var $logo = document.getElementById('logo');
 4 | 
 5 |   $logo.addEventListener('click', function(event) {
 6 |     event.preventDefault();
 7 |     history.replaceState('', document.title, ' ');
 8 |     window.scrollTo(0,0);
 9 |   });
10 | });
11 | 


--------------------------------------------------------------------------------
/javascript/single.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |   var $root = document.documentElement;
 3 |   var toTravel = $root.scrollHeight - window.innerHeight;
 4 |   var $bsaShadow = document.getElementById('bsaShadow');
 5 |   var menuThrottle = null;
 6 | 
 7 |   if ($bsaShadow) {
 8 |     document.addEventListener('scroll', function(event) {
 9 |       clearTimeout(menuThrottle);
10 |       throttle = setTimeout(setBsaShadows(), 100);
11 |     });
12 | 
13 |     function setBsaShadows() {
14 |       var scrollTop = window.scrollY;
15 |       var distance = toTravel - scrollTop;
16 |       var topFactor = 1 - (distance / toTravel);
17 |       $bsaShadow.style.opacity = topFactor;
18 |       $bsaShadow.style.transform = 'scaleY(' + topFactor + ')';
19 |     }
20 | 
21 |     setBsaShadows();
22 |   }
23 | });
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-reference",
 3 |   "version": "1.0.0",
 4 |   "description": "A visual guide to the most popular CSS properties.",
 5 |   "main": "css/website.sass",
 6 |   "scripts": {
 7 |     "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix",
 8 |     "build-autoprefix": "postcss --use autoprefixer --output css/website.css css/website.css",
 9 |     "build-clean": "rm css/website.css",
10 |     "build-sass": "node-sass --output-style compressed css/website.sass css/website.css",
11 |     "develop": "node-sass css/website.sass css/website.css",
12 |     "start": "npm run develop -- --watch"
13 |   },
14 |   "keywords": [
15 |     "css",
16 |     "sass",
17 |     "jekyll"
18 |   ],
19 |   "author": "Jeremy Thomas <bbxdesign@gmail.com> (https://jgthms.com)",
20 |   "license": "ISC",
21 |   "devDependencies": {
22 |     "autoprefixer": "^6.5.3",
23 |     "node-sass": "^3.11.3",
24 |     "postcss-cli": "^2.6.0"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/positioning.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Positioning"
4 | menu_list: "positioning-list"
5 | description: "position elements manually in HTML"
6 | ---
7 | 
8 | {% include collections/positioning.html %}
9 | 


--------------------------------------------------------------------------------
/property/animation/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: animation
 4 | ---
 5 | 
 6 | <section id="animation" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/animations/">
10 |           In collection: <strong>animations</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/animation/" data-property-name="animation" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=css-animation" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#animation"><span>#</span>animation</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-name" data-property-name="animation-name">animation-name</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-duration" data-property-name="animation-duration">animation-duration</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-timing-function" data-property-name="animation-timing-function">animation-timing-function</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-delay" data-property-name="animation-delay">animation-delay</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-iteration-count" data-property-name="animation-iteration-count">animation-iteration-count</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-direction" data-property-name="animation-direction">animation-direction</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-fill-mode" data-property-name="animation-fill-mode">animation-fill-mode</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/animation-play-state" data-property-name="animation-play-state">animation-play-state</a></code>.</p>
22 | <p>Only <code>animation-duration</code> and <code>animation-name</code> are <strong>required</strong>.</p>
23 | 
24 |     </div>
25 | 
26 |   </header>
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | </section>
34 | 


--------------------------------------------------------------------------------
/property/background-attachment/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: background-attachment
 4 | ---
 5 | 
 6 | <section id="background-attachment" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/backgrounds/">
10 |           In collection: <strong>backgrounds</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/background-attachment/" data-property-name="background-attachment" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background-attachment">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=background-attachment" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background-attachment" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#background-attachment"><span>#</span>background-attachment</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Defines <em>how</em> the background image will behave when scrolling the page.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 |     <style type="text/css">.background-attachment { background-image: url(/images/landscape.jpg);background-position: center center;background-size: cover;height: 200px; }</style>
28 | 
29 | 
30 |     <style type="text/css">.background-attachment p { background: white;padding: 0.8em 1em; }</style>
31 | 
32 | 
33 |     <section class="example">
34 |       <header class="example-header">
35 |         <p class="example-name">
36 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
37 | 
38 | 
39 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-attachment: scroll;">background-attachment: scroll;</code>
40 |         </p>
41 |         <div class="example-description">
42 |           <p>The background image will scroll with the page. It will also position and resize itself according to the element it&#39;s applied to.</p>
43 | 
44 |         </div>
45 |       </header>
46 | 
47 |       <aside class="example-preview">
48 |         <div class="example-browser"><i></i><i></i><i></i></div>
49 |         <div class="example-output">
50 |           <div class="example-output-div background-attachment " id="background-attachment-scroll"><p>Hello world</p></div>
51 |         </div>
52 |       </aside>
53 |           <style type="text/css">#background-attachment-scroll{ background-attachment:scroll;}</style>
54 |     </section>
55 |     <section class="example">
56 |       <header class="example-header">
57 |         <p class="example-name">
58 | 
59 | 
60 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-attachment: fixed;">background-attachment: fixed;</code>
61 |         </p>
62 |         <div class="example-description">
63 |           <p>The background image will <em>not</em> scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.</p>
64 | 
65 |         </div>
66 |       </header>
67 | 
68 |       <aside class="example-preview">
69 |         <div class="example-browser"><i></i><i></i><i></i></div>
70 |         <div class="example-output">
71 |           <div class="example-output-div background-attachment " id="background-attachment-fixed"><p>Hello world</p></div>
72 |         </div>
73 |       </aside>
74 |           <style type="text/css">#background-attachment-fixed{ background-attachment:fixed;}</style>
75 |     </section>
76 | 
77 | </section>
78 | 


--------------------------------------------------------------------------------
/property/background-clip/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: background-clip
 4 | ---
 5 | 
 6 | <section id="background-clip" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/backgrounds/">
10 |           In collection: <strong>backgrounds</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/background-clip/" data-property-name="background-clip" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background-clip">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background-clip" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#background-clip"><span>#</span>background-clip</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines how far the background should <strong>extend</strong> within the element.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.background-clip { background: #05ffb0;border: 4px dashed;padding: 2em; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-clip: border-box;">background-clip: border-box;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>The background extends completely throughout the element, even <strong>under</strong> the border.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div background-clip " id="background-clip-border-box">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#background-clip-border-box{ background-clip:border-box;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-clip: padding-box;">background-clip: padding-box;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>The background only extends to the <em>edge</em> of the border: it includes the padding but <em>not</em> the border.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div background-clip " id="background-clip-padding-box">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#background-clip-padding-box{ background-clip:padding-box;}</style>
73 |     </section>
74 |     <section class="example">
75 |       <header class="example-header">
76 |         <p class="example-name">
77 | 
78 | 
79 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="background-clip: content-box;">background-clip: content-box;</code>
80 |         </p>
81 |         <div class="example-description">
82 |           <p>The background only extends to the edge of the <em>content</em>: it doesn&#39;t include the padding, nor the border.</p>
83 | 
84 |         </div>
85 |       </header>
86 | 
87 |       <aside class="example-preview">
88 |         <div class="example-browser"><i></i><i></i><i></i></div>
89 |         <div class="example-output">
90 |           <div class="example-output-div background-clip " id="background-clip-content-box">Hello world</div>
91 |         </div>
92 |       </aside>
93 |           <style type="text/css">#background-clip-content-box{ background-clip:content-box;}</style>
94 |     </section>
95 | 
96 | </section>
97 | 


--------------------------------------------------------------------------------
/property/background/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: background
 4 | ---
 5 | 
 6 | <section id="background" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/backgrounds/">
10 |           In collection: <strong>backgrounds</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/background/" data-property-name="background" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="background">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/background" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#background"><span>#</span>background</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-image" data-property-name="background-image">background-image</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-position" data-property-name="background-position">background-position</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-size" data-property-name="background-size">background-size</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-repeat" data-property-name="background-repeat">background-repeat</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-origin" data-property-name="background-origin">background-origin</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-clip" data-property-name="background-clip">background-clip</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-attachment" data-property-name="background-attachment">background-attachment</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/background-color" data-property-name="background-color">background-color</a></code>.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | </section>
32 | 


--------------------------------------------------------------------------------
/property/border-bottom-color/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-bottom-color
 4 | ---
 5 | 
 6 | <section id="border-bottom-color" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-bottom-color/" data-property-name="border-bottom-color" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-bottom-color">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom-color" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-bottom-color"><span>#</span>border-bottom-color</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>bottom</strong> border only.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.border-bottom-color { border-bottom-style: solid;border-bottom-width: 4px; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom-color: transparent;">border-bottom-color: transparent;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>Applies a <strong>transparent</strong> color to the bottom border. The bottom border will still take up the <em>space</em> defined by the <code>border-width</code> value.</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div border-bottom-color " id="border-bottom-color-transparent">Hello world</div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#border-bottom-color-transparent{ border-bottom-color:transparent;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom-color: red;">border-bottom-color: red;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+ color names</a></strong>.</p>
58 | 
59 |         </div>
60 |       </header>
61 | 
62 |       <aside class="example-preview">
63 |         <div class="example-browser"><i></i><i></i><i></i></div>
64 |         <div class="example-output">
65 |           <div class="example-output-div border-bottom-color " id="border-bottom-color-red">Hello world</div>
66 |         </div>
67 |       </aside>
68 |           <style type="text/css">#border-bottom-color-red{ border-bottom-color:red;}</style>
69 |     </section>
70 |     <section class="example">
71 |       <header class="example-header">
72 |         <p class="example-name">
73 | 
74 | 
75 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom-color: #05ffb0;">border-bottom-color: #05ffb0;</code>
76 |         </p>
77 |         <div class="example-description">
78 |           <p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>
79 | 
80 |         </div>
81 |       </header>
82 | 
83 |       <aside class="example-preview">
84 |         <div class="example-browser"><i></i><i></i><i></i></div>
85 |         <div class="example-output">
86 |           <div class="example-output-div border-bottom-color " id="border-bottom-color-05ffb0">Hello world</div>
87 |         </div>
88 |       </aside>
89 |           <style type="text/css">#border-bottom-color-05ffb0{ border-bottom-color:#05ffb0;}</style>
90 |     </section>
91 | 
92 | </section>
93 | 


--------------------------------------------------------------------------------
/property/border-bottom-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-bottom-width
 4 | ---
 5 | 
 6 | <section id="border-bottom-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/border-bottom-width/" data-property-name="border-bottom-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-bottom-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#border-bottom-width"><span>#</span>border-bottom-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>bottom</strong> border only.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.border-bottom-width { border-bottom-style: solid; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom-width: 0;">border-bottom-width: 0;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>Removes the bottom border.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div border-bottom-width " id="border-bottom-width-0">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#border-bottom-width-0{ border-bottom-width:0;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom-width: 4px;">border-bottom-width: 4px;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>You can use <strong>pixel</strong> values.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div border-bottom-width " id="border-bottom-width-4px">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#border-bottom-width-4px{ border-bottom-width:4px;}</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/border-bottom/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-bottom
 4 | ---
 5 | 
 6 | <section id="border-bottom" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-bottom/" data-property-name="border-bottom" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-bottom">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-bottom" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-bottom"><span>#</span>border-bottom</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-bottom-width" data-property-name="border-bottom-width">border-bottom-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-bottom-style" data-property-name="border-bottom-style">border-bottom-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-bottom-color" data-property-name="border-bottom-color">border-bottom-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom: 4px dotted red;">border-bottom: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div border-bottom " id="border-bottom-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#border-bottom-4px-dotted-red{ border-bottom:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-bottom: 2px solid;">border-bottom: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div border-bottom " id="border-bottom-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#border-bottom-2px-solid{ border-bottom:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/border-left-color/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-left-color
 4 | ---
 5 | 
 6 | <section id="border-left-color" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-left-color/" data-property-name="border-left-color" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-left-color">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-left-color" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-left-color"><span>#</span>border-left-color</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>left</strong> border only.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.border-left-color { border-left-style: solid;border-left-width: 4px; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left-color: transparent;">border-left-color: transparent;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>Applies a <strong>transparent</strong> color to the left border. The left border will still take up the <em>space</em> defined by the <code>border-width</code> value.</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div border-left-color " id="border-left-color-transparent">Hello world</div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#border-left-color-transparent{ border-left-color:transparent;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left-color: red;">border-left-color: red;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+ color names</a></strong>.</p>
58 | 
59 |         </div>
60 |       </header>
61 | 
62 |       <aside class="example-preview">
63 |         <div class="example-browser"><i></i><i></i><i></i></div>
64 |         <div class="example-output">
65 |           <div class="example-output-div border-left-color " id="border-left-color-red">Hello world</div>
66 |         </div>
67 |       </aside>
68 |           <style type="text/css">#border-left-color-red{ border-left-color:red;}</style>
69 |     </section>
70 |     <section class="example">
71 |       <header class="example-header">
72 |         <p class="example-name">
73 | 
74 | 
75 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left-color: #05ffb0;">border-left-color: #05ffb0;</code>
76 |         </p>
77 |         <div class="example-description">
78 |           <p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>
79 | 
80 |         </div>
81 |       </header>
82 | 
83 |       <aside class="example-preview">
84 |         <div class="example-browser"><i></i><i></i><i></i></div>
85 |         <div class="example-output">
86 |           <div class="example-output-div border-left-color " id="border-left-color-05ffb0">Hello world</div>
87 |         </div>
88 |       </aside>
89 |           <style type="text/css">#border-left-color-05ffb0{ border-left-color:#05ffb0;}</style>
90 |     </section>
91 | 
92 | </section>
93 | 


--------------------------------------------------------------------------------
/property/border-left-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-left-width
 4 | ---
 5 | 
 6 | <section id="border-left-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/border-left-width/" data-property-name="border-left-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-left-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-left-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#border-left-width"><span>#</span>border-left-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>left</strong> border only.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.border-left-width { border-left-style: solid; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left-width: 0;">border-left-width: 0;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>Removes the left border.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div border-left-width " id="border-left-width-0">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#border-left-width-0{ border-left-width:0;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left-width: 4px;">border-left-width: 4px;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>You can use <strong>pixel</strong> values.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div border-left-width " id="border-left-width-4px">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#border-left-width-4px{ border-left-width:4px;}</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/border-left/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-left
 4 | ---
 5 | 
 6 | <section id="border-left" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-left/" data-property-name="border-left" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-left">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-left" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-left"><span>#</span>border-left</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-left-width" data-property-name="border-left-width">border-left-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-left-style" data-property-name="border-left-style">border-left-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-left-color" data-property-name="border-left-color">border-left-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left: 4px dotted red;">border-left: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div border-left " id="border-left-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#border-left-4px-dotted-red{ border-left:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-left: 2px solid;">border-left: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div border-left " id="border-left-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#border-left-2px-solid{ border-left:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/border-right-color/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-right-color
 4 | ---
 5 | 
 6 | <section id="border-right-color" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-right-color/" data-property-name="border-right-color" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-right-color">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-right-color" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-right-color"><span>#</span>border-right-color</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>right</strong> border only.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.border-right-color { border-right-style: solid;border-right-width: 4px; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right-color: transparent;">border-right-color: transparent;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>Applies a <strong>transparent</strong> color to the right border. The right border will still take up the <em>space</em> defined by the <code>border-width</code> value.</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div border-right-color " id="border-right-color-transparent">Hello world</div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#border-right-color-transparent{ border-right-color:transparent;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right-color: red;">border-right-color: red;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+ color names</a></strong>.</p>
58 | 
59 |         </div>
60 |       </header>
61 | 
62 |       <aside class="example-preview">
63 |         <div class="example-browser"><i></i><i></i><i></i></div>
64 |         <div class="example-output">
65 |           <div class="example-output-div border-right-color " id="border-right-color-red">Hello world</div>
66 |         </div>
67 |       </aside>
68 |           <style type="text/css">#border-right-color-red{ border-right-color:red;}</style>
69 |     </section>
70 |     <section class="example">
71 |       <header class="example-header">
72 |         <p class="example-name">
73 | 
74 | 
75 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right-color: #05ffb0;">border-right-color: #05ffb0;</code>
76 |         </p>
77 |         <div class="example-description">
78 |           <p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>
79 | 
80 |         </div>
81 |       </header>
82 | 
83 |       <aside class="example-preview">
84 |         <div class="example-browser"><i></i><i></i><i></i></div>
85 |         <div class="example-output">
86 |           <div class="example-output-div border-right-color " id="border-right-color-05ffb0">Hello world</div>
87 |         </div>
88 |       </aside>
89 |           <style type="text/css">#border-right-color-05ffb0{ border-right-color:#05ffb0;}</style>
90 |     </section>
91 | 
92 | </section>
93 | 


--------------------------------------------------------------------------------
/property/border-right-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-right-width
 4 | ---
 5 | 
 6 | <section id="border-right-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/border-right-width/" data-property-name="border-right-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-right-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-right-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#border-right-width"><span>#</span>border-right-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>right</strong> border only.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.border-right-width { border-right-style: solid; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right-width: 0;">border-right-width: 0;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>Removes the right border.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div border-right-width " id="border-right-width-0">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#border-right-width-0{ border-right-width:0;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right-width: 4px;">border-right-width: 4px;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>You can use <strong>pixel</strong> values.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div border-right-width " id="border-right-width-4px">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#border-right-width-4px{ border-right-width:4px;}</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/border-right/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-right
 4 | ---
 5 | 
 6 | <section id="border-right" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-right/" data-property-name="border-right" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-right">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-right" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-right"><span>#</span>border-right</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-right-width" data-property-name="border-right-width">border-right-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-right-style" data-property-name="border-right-style">border-right-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-right-color" data-property-name="border-right-color">border-right-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right: 4px dotted red;">border-right: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div border-right " id="border-right-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#border-right-4px-dotted-red{ border-right:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-right: 2px solid;">border-right: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div border-right " id="border-right-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#border-right-2px-solid{ border-right:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/border-top-color/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-top-color
 4 | ---
 5 | 
 6 | <section id="border-top-color" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-top-color/" data-property-name="border-top-color" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-top-color">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top-color" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-top-color"><span>#</span>border-top-color</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>, but for the <strong>top</strong> border only.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.border-top-color { border-top-style: solid;border-top-width: 4px; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top-color: transparent;">border-top-color: transparent;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>Applies a <strong>transparent</strong> color to the top border. The top border will still take up the <em>space</em> defined by the <code>border-width</code> value.</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div border-top-color " id="border-top-color-transparent">Hello world</div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#border-top-color-transparent{ border-top-color:transparent;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top-color: red;">border-top-color: red;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+ color names</a></strong>.</p>
58 | 
59 |         </div>
60 |       </header>
61 | 
62 |       <aside class="example-preview">
63 |         <div class="example-browser"><i></i><i></i><i></i></div>
64 |         <div class="example-output">
65 |           <div class="example-output-div border-top-color " id="border-top-color-red">Hello world</div>
66 |         </div>
67 |       </aside>
68 |           <style type="text/css">#border-top-color-red{ border-top-color:red;}</style>
69 |     </section>
70 |     <section class="example">
71 |       <header class="example-header">
72 |         <p class="example-name">
73 | 
74 | 
75 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top-color: #05ffb0;">border-top-color: #05ffb0;</code>
76 |         </p>
77 |         <div class="example-description">
78 |           <p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>
79 | 
80 |         </div>
81 |       </header>
82 | 
83 |       <aside class="example-preview">
84 |         <div class="example-browser"><i></i><i></i><i></i></div>
85 |         <div class="example-output">
86 |           <div class="example-output-div border-top-color " id="border-top-color-05ffb0">Hello world</div>
87 |         </div>
88 |       </aside>
89 |           <style type="text/css">#border-top-color-05ffb0{ border-top-color:#05ffb0;}</style>
90 |     </section>
91 | 
92 | </section>
93 | 


--------------------------------------------------------------------------------
/property/border-top-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-top-width
 4 | ---
 5 | 
 6 | <section id="border-top-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/border-top-width/" data-property-name="border-top-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-top-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#border-top-width"><span>#</span>border-top-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>, but for the <strong>top</strong> border only.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.border-top-width { border-top-style: solid; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top-width: 0;">border-top-width: 0;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>Removes the top border.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div border-top-width " id="border-top-width-0">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#border-top-width-0{ border-top-width:0;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top-width: 4px;">border-top-width: 4px;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>You can use <strong>pixel</strong> values.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div border-top-width " id="border-top-width-4px">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#border-top-width-4px{ border-top-width:4px;}</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/border-top/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-top
 4 | ---
 5 | 
 6 | <section id="border-top" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border-top/" data-property-name="border-top" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-top">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-top" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border-top"><span>#</span>border-top</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-top-width" data-property-name="border-top-width">border-top-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-top-style" data-property-name="border-top-style">border-top-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-top-color" data-property-name="border-top-color">border-top-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top: 4px dotted red;">border-top: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div border-top " id="border-top-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#border-top-4px-dotted-red{ border-top:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-top: 2px solid;">border-top: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div border-top " id="border-top-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#border-top-2px-solid{ border-top:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/border-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border-width
 4 | ---
 5 | 
 6 | <section id="border-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/border-width/" data-property-name="border-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#border-width"><span>#</span>border-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines the width of the element&#39;s borders.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.border-width { border-style: solid; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 | 
35 | 
36 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-width: 1px;">border-width: 1px;</code>
37 |         </p>
38 |         <div class="example-description">
39 |           <p>Defines the width of <strong>all</strong> borders to 1px.</p>
40 | 
41 |         </div>
42 |       </header>
43 | 
44 |       <aside class="example-preview">
45 |         <div class="example-browser"><i></i><i></i><i></i></div>
46 |         <div class="example-output">
47 |           <div class="example-output-div border-width " id="border-width-1px">Hello world</div>
48 |         </div>
49 |       </aside>
50 |           <style type="text/css">#border-width-1px{ border-width:1px;}</style>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-width: 2px 0;">border-width: 2px 0;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>Defines the top and bottom borders to 2px, the left and right to 0.</p>
61 | 
62 |         </div>
63 |       </header>
64 | 
65 |       <aside class="example-preview">
66 |         <div class="example-browser"><i></i><i></i><i></i></div>
67 |         <div class="example-output">
68 |           <div class="example-output-div border-width " id="border-width-2px-0">Hello world</div>
69 |         </div>
70 |       </aside>
71 |           <style type="text/css">#border-width-2px-0{ border-width:2px 0;}</style>
72 |     </section>
73 | 
74 | </section>
75 | 


--------------------------------------------------------------------------------
/property/border/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: border
 4 | ---
 5 | 
 6 | <section id="border" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/border/" data-property-name="border" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#border"><span>#</span>border</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-width" data-property-name="border-width">border-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-style" data-property-name="border-style">border-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/border-color" data-property-name="border-color">border-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border: 4px dotted red;">border: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div border " id="border-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#border-4px-dotted-red{ border:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border: 2px solid;">border: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div border " id="border-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#border-2px-solid{ border:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/column-count/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: column-count
 4 | ---
 5 | 
 6 | <section id="column-count" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/column-count/" data-property-name="column-count" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="column-count">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/column-count" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#column-count"><span>#</span>column-count</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines the number of columns of the element.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-count: auto;">column-count: auto;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>Removes any columns from the element (unless another <code>column-</code> property was set).</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div column-count " id="column-count-auto"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#column-count-auto{ column-count:auto;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-count: 3;">column-count: 3;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>When using an <strong>integer</strong> value, the element will distribute its child elements across the number of columns defined.</p>
58 | 
59 |         </div>
60 |       </header>
61 | 
62 |       <aside class="example-preview">
63 |         <div class="example-browser"><i></i><i></i><i></i></div>
64 |         <div class="example-output">
65 |           <div class="example-output-div column-count " id="column-count-3"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
66 |         </div>
67 |       </aside>
68 |           <style type="text/css">#column-count-3{ column-count:3;}</style>
69 |         <style type="text/css">#column-count-3{ -moz-column-count: 3;-webkit-column-count: 3; }</style>
70 |     </section>
71 | 
72 | </section>
73 | 


--------------------------------------------------------------------------------
/property/column-gap/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: column-gap
 4 | ---
 5 | 
 6 | <section id="column-gap" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/column-gap/" data-property-name="column-gap" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="column-gap">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/column-gap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#column-gap"><span>#</span>column-gap</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines the gap between the columns of the element.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.column-gap { column-count: 3;-moz-column-count: 3;-webkit-column-count: 3; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
32 | 
33 | 
34 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-gap: normal;">column-gap: normal;</code>
35 |         </p>
36 |         <div class="example-description">
37 |           <p>The gap between the columns is set to the browser&#39;s <strong>default</strong> value, which usually is <strong>1em</strong>.</p>
38 | 
39 |         </div>
40 |       </header>
41 | 
42 |       <aside class="example-preview">
43 |         <div class="example-browser"><i></i><i></i><i></i></div>
44 |         <div class="example-output">
45 |           <div class="example-output-div column-gap " id="column-gap-normal"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
46 |         </div>
47 |       </aside>
48 |           <style type="text/css">#column-gap-normal{ column-gap:normal;}</style>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-gap: 2px;">column-gap: 2px;</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>You can use <strong>pixel</strong> values for the gap.</p>
59 | <p>Note that the gap only appears <em>between</em> columns, and not on the exterior sides of the edge columns.</p>
60 | 
61 |         </div>
62 |       </header>
63 | 
64 |       <aside class="example-preview">
65 |         <div class="example-browser"><i></i><i></i><i></i></div>
66 |         <div class="example-output">
67 |           <div class="example-output-div column-gap " id="column-gap-2px"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
68 |         </div>
69 |       </aside>
70 |           <style type="text/css">#column-gap-2px{ column-gap:2px;}</style>
71 |         <style type="text/css">#column-gap-2px{ -moz-column-gap: 2px;-webkit-column-gap: 2px; }</style>
72 |     </section>
73 | 
74 | </section>
75 | 


--------------------------------------------------------------------------------
/property/column-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: column-width
 4 | ---
 5 | 
 6 | <section id="column-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/column-width/" data-property-name="column-width" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="column-width">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/column-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#column-width"><span>#</span>column-width</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines the number of columns of the element.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
31 | 
32 | 
33 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-width: auto;">column-width: auto;</code>
34 |         </p>
35 |         <div class="example-description">
36 |           <p>The element will <strong>not</strong> distribute its child elements into columns, unlesse a <code class="shorthand"><a href="http://cssreference.io/#column-count">column-count</a></code> value is defined. In that case, the column width will be infered from the column count.</p>
37 | 
38 |         </div>
39 |       </header>
40 | 
41 |       <aside class="example-preview">
42 |         <div class="example-browser"><i></i><i></i><i></i></div>
43 |         <div class="example-output">
44 |           <div class="example-output-div column-width " id="column-width-auto"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
45 |         </div>
46 |       </aside>
47 |           <style type="text/css">#column-width-auto{ column-width:auto;}</style>
48 |     </section>
49 |     <section class="example">
50 |       <header class="example-header">
51 |         <p class="example-name">
52 | 
53 | 
54 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="column-width: 10px;">column-width: 10px;</code>
55 |         </p>
56 |         <div class="example-description">
57 |           <p>You can use <strong>pixel</strong> values for the column width.</p>
58 | <p>The number of columns will be the minimum needed to distribute all the content across the element.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div column-width " id="column-width-10px"><p class="block block--alpha">Hello world</p><p class="block block--beta">Foo bar</p><p class="block block--pink">CSS Reference</p></div>
67 |         </div>
68 |       </aside>
69 |           <style type="text/css">#column-width-10px{ column-width:10px;}</style>
70 |         <style type="text/css">#column-width-10px{ -moz-column-width: 10px;-webkit-column-width: 10px; }</style>
71 |     </section>
72 | 
73 | </section>
74 | 


--------------------------------------------------------------------------------
/property/flex-basis/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: flex-basis
 4 | ---
 5 | 
 6 | <section id="flex-basis" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/flexbox/">
10 |           In collection: <strong>flexbox</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/flex-basis/" data-property-name="flex-basis" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-basis">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-basis" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#flex-basis"><span>#</span>flex-basis</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Defines the initial size of a flexbox item.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 |     <style type="text/css">.flex-basis { background: hsl(0, 0%, 95%);display: flex;padding: 1em;word-break: break-all; }</style>
28 | 
29 | 
30 | 
31 | 
32 |     <section class="example">
33 |       <header class="example-header">
34 |         <p class="example-name">
35 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
36 | 
37 | 
38 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-basis: auto;">flex-basis: auto;</code>
39 |         </p>
40 |         <div class="example-description">
41 |           <p>The element will be automatically sized based on its content, or on any <code>height</code> or <code>width</code> value if they are defined.</p>
42 | 
43 |         </div>
44 |       </header>
45 | 
46 |       <aside class="example-preview">
47 |         <div class="example-browser"><i></i><i></i><i></i></div>
48 |         <div class="example-output">
49 |           <div class="example-output-div flex-basis " id="flex-basis-auto"><p class="block block--alpha">Flexbox item</p></div>
50 |         </div>
51 |       </aside>
52 |           <style type="text/css">#flex-basis-auto{ flex-basis:auto;}</style>
53 |         <style type="text/css">#flex-basis-auto .block { flex-basis: auto; }</style>
54 |     </section>
55 |     <section class="example">
56 |       <header class="example-header">
57 |         <p class="example-name">
58 | 
59 | 
60 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="flex-basis: 80px;">flex-basis: 80px;</code>
61 |         </p>
62 |         <div class="example-description">
63 |           <p>You can define <strong>pixel</strong> or <strong>(r)em</strong> values. The element will wrap its content to avoid any overflow.</p>
64 | 
65 |         </div>
66 |       </header>
67 | 
68 |       <aside class="example-preview">
69 |         <div class="example-browser"><i></i><i></i><i></i></div>
70 |         <div class="example-output">
71 |           <div class="example-output-div flex-basis " id="flex-basis-80px"><p class="block block--alpha">Flexbox item</p></div>
72 |         </div>
73 |       </aside>
74 |           <style type="text/css">#flex-basis-80px{ flex-basis:80px;}</style>
75 |         <style type="text/css">#flex-basis-80px .block { flex-basis: 80px; }</style>
76 |     </section>
77 | 
78 | </section>
79 | 


--------------------------------------------------------------------------------
/property/flex-flow/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: flex-flow
 4 | ---
 5 | 
 6 | <section id="flex-flow" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/flexbox/">
10 |           In collection: <strong>flexbox</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/flex-flow/" data-property-name="flex-flow" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="flex-flow">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/flex-flow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#flex-flow"><span>#</span>flex-flow</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/flex-direction" data-property-name="flex-direction">flex-direction</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/flex-wrap" data-property-name="flex-wrap">flex-wrap</a></code>.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | </section>
33 | 


--------------------------------------------------------------------------------
/property/font-style/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: font-style
 4 | ---
 5 | 
 6 | <section id="font-style" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/font-style/" data-property-name="font-style" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font-style">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-style" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#font-style"><span>#</span>font-style</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines how much the text is slanted.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.font-style { font-size: 1.2em; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-style: normal;">font-style: normal;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>The text is <strong>not</strong> slanted.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div font-style " id="font-style-normal">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#font-style-normal{ font-style:normal;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-style: italic;">font-style: italic;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>Use the <strong>italic</strong> version of the font: the letters are slightly slanted.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div font-style " id="font-style-italic">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#font-style-italic{ font-style:italic;}</style>
73 |     </section>
74 |     <section class="example">
75 |       <header class="example-header">
76 |         <p class="example-name">
77 | 
78 | 
79 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-style: oblique;">font-style: oblique;</code>
80 |         </p>
81 |         <div class="example-description">
82 |           <p>Use the <strong>oblique</strong> version of the font: the letters are more slanted than italic.</p>
83 | 
84 |         </div>
85 |       </header>
86 | 
87 |       <aside class="example-preview">
88 |         <div class="example-browser"><i></i><i></i><i></i></div>
89 |         <div class="example-output">
90 |           <div class="example-output-div font-style " id="font-style-oblique">Hello world</div>
91 |         </div>
92 |       </aside>
93 |           <style type="text/css">#font-style-oblique{ font-style:oblique;}</style>
94 |     </section>
95 | 
96 | </section>
97 | 


--------------------------------------------------------------------------------
/property/font-variant/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: font-variant
 4 | ---
 5 | 
 6 | <section id="font-variant" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/font-variant/" data-property-name="font-variant" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font-variant">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-variant" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#font-variant"><span>#</span>font-variant</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines which glyph to use for each letter.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.font-variant { font-size: 1.2em; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-variant: normal;">font-variant: normal;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>Each letter uses its <strong>normal</strong> glyph.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div font-variant " id="font-variant-normal">Hello world</div>
49 |         </div>
50 |       </aside>
51 |           <style type="text/css">#font-variant-normal{ font-variant:normal;}</style>
52 |     </section>
53 |     <section class="example">
54 |       <header class="example-header">
55 |         <p class="example-name">
56 | 
57 | 
58 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-variant: small-caps;">font-variant: small-caps;</code>
59 |         </p>
60 |         <div class="example-description">
61 |           <p>Each letter uses its <strong>small capitalized</strong> version.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div font-variant " id="font-variant-small-caps">Hello world</div>
70 |         </div>
71 |       </aside>
72 |           <style type="text/css">#font-variant-small-caps{ font-variant:small-caps;}</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/font/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: font
 4 | ---
 5 | 
 6 | <section id="font" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/font/" data-property-name="font" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#font"><span>#</span>font</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-style" data-property-name="font-style">font-style</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-variant" data-property-name="font-variant">font-variant</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-weight" data-property-name="font-weight">font-weight</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-size" data-property-name="font-size">font-size</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/line-height" data-property-name="line-height">line-height</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/font-family" data-property-name="font-family">font-family</a></code>.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | </section>
32 | 


--------------------------------------------------------------------------------
/property/grid-template-areas/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: grid-template-areas
 4 | ---
 5 | 
 6 | <section id="grid-template-areas" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/css-grid/">
10 |           In collection: <strong>CSS Grid</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/grid-template-areas/" data-property-name="grid-template-areas" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="grid-template-areas">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=css-grid" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/grid-template-areas" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#grid-template-areas"><span>#</span>grid-template-areas</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Defines areas within a <strong>grid container</strong>. These areas can then be referenced when placing a <strong>grid item</strong>.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 |     <style type="text/css">.grid-template-areas { display: grid;padding: 0; }</style>
28 | 
29 | 
30 | 
31 | 
32 |     <section class="example">
33 |       <header class="example-header">
34 |         <p class="example-name">
35 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
36 | 
37 | 
38 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-areas: none;">grid-template-areas: none;</code>
39 |         </p>
40 |         <div class="example-description">
41 |           <p>No area is defined.</p>
42 | 
43 |         </div>
44 |       </header>
45 | 
46 |       <aside class="example-preview">
47 |         <div class="example-browser"><i></i><i></i><i></i></div>
48 |         <div class="example-output">
49 |           <div class="example-output-div grid-template-areas " id="grid-template-areas-none"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p></div>
50 |         </div>
51 |       </aside>
52 |           <style type="text/css">#grid-template-areas-none{ grid-template-areas:none;}</style>
53 |     </section>
54 |     <section class="example">
55 |       <header class="example-header">
56 |         <p class="example-name">
57 | 
58 | 
59 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="grid-template-areas: &quot;header header header&quot; &quot;sidebar main main&quot;;">grid-template-areas: &quot;header header header&quot; &quot;sidebar main main&quot;;</code>
60 |         </p>
61 |         <div class="example-description">
62 |           <p>You can use <strong>area names</strong> to specify which cells each grid item should occupy.</p>
63 | 
64 |         </div>
65 |       </header>
66 | 
67 |       <aside class="example-preview">
68 |         <div class="example-browser"><i></i><i></i><i></i></div>
69 |         <div class="example-output">
70 |           <div class="example-output-div grid-template-areas " id="grid-template-areas-header-header-header-sidebar-main-main"><p class="block block--alpha">Header</p><p class="block block--beta">Sidebar</p><p class="block block--pink">Main</p></div>
71 |         </div>
72 |       </aside>
73 |           <style type="text/css">#grid-template-areas-header-header-header-sidebar-main-main{ grid-template-areas:"header header header" "sidebar main main";}</style>
74 |         <style type="text/css">#grid-template-areas-header-header-header-sidebar-main-main .block--alpha { grid-area: header; }#grid-template-areas-header-header-header-sidebar-main-main .block--beta { grid-area: sidebar; }#grid-template-areas-header-header-header-sidebar-main-main .block--pink { grid-area: main; }</style>
75 |     </section>
76 | 
77 | </section>
78 | 


--------------------------------------------------------------------------------
/property/height/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: height
 4 | ---
 5 | 
 6 | <section id="height" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/height/" data-property-name="height" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="height">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/height" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#height"><span>#</span>height</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines the height of the element.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 |     <style type="text/css">.height { max-width: 400px; }</style>
27 | 
28 | 
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="height: auto;">height: auto;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>The element will <strong>automatically</strong> adjust its height to allow its content to be displayed correctly.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div height " id="height-auto"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
49 |         </div>
50 |       </aside>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="height: 100px;">height: 100px;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p>
61 | <p>If the content does not fit within the specified height, it will <strong>overflow</strong>. How the container will handle this overflowing content is defined by the <code class="shorthand"><a href="http://cssreference.io/#overflow">overflow</a></code> property.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div height " id="height-100px"><p class="block block--alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
70 |         </div>
71 |       </aside>
72 |         <style type="text/css">#height-100px .block { height: 100px; }</style>
73 |     </section>
74 | 
75 | </section>
76 | 


--------------------------------------------------------------------------------
/property/letter-spacing/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: letter-spacing
 4 | ---
 5 | 
 6 | <section id="letter-spacing" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/letter-spacing/" data-property-name="letter-spacing" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="letter-spacing">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/letter-spacing" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#letter-spacing"><span>#</span>letter-spacing</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines the spacing between the characters of a block of text.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 | 
29 | 
30 |     <section class="example">
31 |       <header class="example-header">
32 |         <p class="example-name">
33 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
34 | 
35 | 
36 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="letter-spacing: normal;">letter-spacing: normal;</code>
37 |         </p>
38 |         <div class="example-description">
39 |           <p>The spacing between the characters is <strong>normal</strong>.</p>
40 | 
41 |         </div>
42 |       </header>
43 | 
44 |       <aside class="example-preview">
45 |         <div class="example-browser"><i></i><i></i><i></i></div>
46 |         <div class="example-output">
47 |           <div class="example-output-div letter-spacing " id="letter-spacing-normal">The quick brown fox jumps over the lazy dog</div>
48 |         </div>
49 |       </aside>
50 |           <style type="text/css">#letter-spacing-normal{ letter-spacing:normal;}</style>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="letter-spacing: 2px;">letter-spacing: 2px;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>You can use <strong>pixel</strong> values.</p>
61 | 
62 |         </div>
63 |       </header>
64 | 
65 |       <aside class="example-preview">
66 |         <div class="example-browser"><i></i><i></i><i></i></div>
67 |         <div class="example-output">
68 |           <div class="example-output-div letter-spacing " id="letter-spacing-2px">The quick brown fox jumps over the lazy dog</div>
69 |         </div>
70 |       </aside>
71 |           <style type="text/css">#letter-spacing-2px{ letter-spacing:2px;}</style>
72 |     </section>
73 |     <section class="example">
74 |       <header class="example-header">
75 |         <p class="example-name">
76 | 
77 | 
78 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="letter-spacing: 0.1em;">letter-spacing: 0.1em;</code>
79 |         </p>
80 |         <div class="example-description">
81 |           <p>You can use <strong>em</strong> values: this allows the spacing to remain <em>relative</em> to the font-size.</p>
82 | 
83 |         </div>
84 |       </header>
85 | 
86 |       <aside class="example-preview">
87 |         <div class="example-browser"><i></i><i></i><i></i></div>
88 |         <div class="example-output">
89 |           <div class="example-output-div letter-spacing " id="letter-spacing-01em">The quick brown fox jumps over the lazy dog</div>
90 |         </div>
91 |       </aside>
92 |           <style type="text/css">#letter-spacing-01em{ letter-spacing:0.1em;}</style>
93 |     </section>
94 | 
95 | </section>
96 | 


--------------------------------------------------------------------------------
/property/list-style-image/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: list-style-image
 4 | ---
 5 | 
 6 | <section id="list-style-image" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/list-style-image/" data-property-name="list-style-image" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="list-style-image">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/list-style-image" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#list-style-image"><span>#</span>list-style-image</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines the <strong>image</strong> to be used as an list item&#39;s <strong>bullet point</strong>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 |     <style type="text/css">.list-style-image ul { list-style-type: disc;margin-left: 1em; }</style>
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
32 | 
33 | 
34 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="list-style-image: none;">list-style-image: none;</code>
35 |         </p>
36 |         <div class="example-description">
37 |           <p>The list items will use the bullet point defined by the <code class="shorthand"><a href="http://cssreference.io/#list-style-type">list-style-type</a></code> value, which by default is a <strong>disc</strong>.</p>
38 | 
39 |         </div>
40 |       </header>
41 | 
42 |       <aside class="example-preview">
43 |         <div class="example-browser"><i></i><i></i><i></i></div>
44 |         <div class="example-output">
45 |           <div class="example-output-div list-style-image " id="list-style-image-none"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
46 |         </div>
47 |       </aside>
48 |           <style type="text/css">#list-style-image-none{ list-style-image:none;}</style>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="list-style-image: url(/images/list-style-image.png);">list-style-image: url(/images/list-style-image.png);</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>The list items will use the <strong>image</strong> located at the specified URL as their bullet point.<br>The image can not be resized.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div list-style-image " id="list-style-image-urlimageslist-style-imagepng"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
67 |         </div>
68 |       </aside>
69 |           <style type="text/css">#list-style-image-urlimageslist-style-imagepng{ list-style-image:url(/images/list-style-image.png);}</style>
70 |         <style type="text/css">#list-style-image-urlimageslist-style-imagepng ul { list-style-image: url(/images/list-style-image.png); }</style>
71 |     </section>
72 | 
73 | </section>
74 | 


--------------------------------------------------------------------------------
/property/list-style/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: list-style
 4 | ---
 5 | 
 6 | <section id="list-style" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/list-style/" data-property-name="list-style" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="list-style">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/list-style" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#list-style"><span>#</span>list-style</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/list-style-type" data-property-name="list-style-type">list-style-type</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/list-style-image" data-property-name="list-style-image">list-style-image</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/list-style-position" data-property-name="list-style-position">list-style-position</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 | </section>
29 | 


--------------------------------------------------------------------------------
/property/min-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: min-width
 4 | ---
 5 | 
 6 | <section id="min-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/box-model/">
10 |           In collection: <strong>box-model</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/min-width/" data-property-name="min-width" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="min-width">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/min-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#min-width"><span>#</span>min-width</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines the minimum width of the element.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 |     <style type="text/css">.min-width .block { display: inline-block;vertical-align: top; }</style>
29 | 
30 | 
31 |     <section class="example">
32 |       <header class="example-header">
33 |         <p class="example-name">
34 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
35 | 
36 | 
37 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 0;">min-width: 0;</code>
38 |         </p>
39 |         <div class="example-description">
40 |           <p>The element has <strong>no minimum</strong> width.</p>
41 | 
42 |         </div>
43 |       </header>
44 | 
45 |       <aside class="example-preview">
46 |         <div class="example-browser"><i></i><i></i><i></i></div>
47 |         <div class="example-output">
48 |           <div class="example-output-div min-width " id="min-width-0"><p class="block block--alpha">Hello world</p></div>
49 |         </div>
50 |       </aside>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 300px;">min-width: 300px;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p>
61 | <p>If the <em>minimum</em> width is <strong>larger</strong> than the element&#39;s <em>actual</em> width, the min width will be applied.</p>
62 | 
63 |         </div>
64 |       </header>
65 | 
66 |       <aside class="example-preview">
67 |         <div class="example-browser"><i></i><i></i><i></i></div>
68 |         <div class="example-output">
69 |           <div class="example-output-div min-width " id="min-width-300px"><p class="block block--alpha">Hello world</p></div>
70 |         </div>
71 |       </aside>
72 |         <style type="text/css">#min-width-300px .block { min-width: 300px; }</style>
73 |     </section>
74 |     <section class="example">
75 |       <header class="example-header">
76 |         <p class="example-name">
77 | 
78 | 
79 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 5px;">min-width: 5px;</code>
80 |         </p>
81 |         <div class="example-description">
82 |           <p>If the <em>minimum</em> width is <strong>smaller</strong> than the element&#39;s <em>actual</em> width, the min width has <strong>no effect</strong>.</p>
83 | 
84 |         </div>
85 |       </header>
86 | 
87 |       <aside class="example-preview">
88 |         <div class="example-browser"><i></i><i></i><i></i></div>
89 |         <div class="example-output">
90 |           <div class="example-output-div min-width " id="min-width-5px"><p class="block block--alpha">Hello world</p></div>
91 |         </div>
92 |       </aside>
93 |         <style type="text/css">#min-width-5px .block { min-width: 5px; }</style>
94 |     </section>
95 | 
96 | </section>
97 | 


--------------------------------------------------------------------------------
/property/opacity/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: opacity
 4 | ---
 5 | 
 6 | <section id="opacity" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/opacity/" data-property-name="opacity" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="opacity">Share</a>
11 |         <a target="_blank" href="http://caniuse.com/#feat=css-opacity" data-tooltip="See on Can I use..." rel="external">Can I use</a>
12 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/opacity" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
13 |     </nav>
14 |     <h2 class="property-name">
15 |       <a href="#opacity"><span>#</span>opacity</a>
16 |     </h2>
17 |     <div class="property-description">
18 |       <p>Defines how opaque the element is.</p>
19 | 
20 |     </div>
21 | 
22 |   </header>
23 | 
24 |     <style type="text/css">.opacity { background: #310736;padding: 1em; }</style>
25 | 
26 | 
27 | 
28 | 
29 |     <section class="example">
30 |       <header class="example-header">
31 |         <p class="example-name">
32 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
33 | 
34 | 
35 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="opacity: 1;">opacity: 1;</code>
36 |         </p>
37 |         <div class="example-description">
38 |           <p>The element is <strong>fully opaque</strong>.</p>
39 | 
40 |         </div>
41 |       </header>
42 | 
43 |       <aside class="example-preview">
44 |         <div class="example-browser"><i></i><i></i><i></i></div>
45 |         <div class="example-output">
46 |           <div class="example-output-div opacity " id="opacity-1"><p class="block block--alpha">Hello world</p></div>
47 |         </div>
48 |       </aside>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="opacity: 0;">opacity: 0;</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>The element is <strong>fully transparent</strong>.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div opacity " id="opacity-0"><p class="block block--alpha">Hello world</p></div>
67 |         </div>
68 |       </aside>
69 |         <style type="text/css">#opacity-0 .block { opacity: 0; }</style>
70 |     </section>
71 |     <section class="example">
72 |       <header class="example-header">
73 |         <p class="example-name">
74 | 
75 | 
76 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="opacity: 0.3;">opacity: 0.3;</code>
77 |         </p>
78 |         <div class="example-description">
79 |           <p>Any value between <strong>0</strong> (zero) and <strong>1</strong> (one) will make the element <strong>semi transparent</strong>.</p>
80 | 
81 |         </div>
82 |       </header>
83 | 
84 |       <aside class="example-preview">
85 |         <div class="example-browser"><i></i><i></i><i></i></div>
86 |         <div class="example-output">
87 |           <div class="example-output-div opacity " id="opacity-03"><p class="block block--alpha">Hello world</p></div>
88 |         </div>
89 |       </aside>
90 |         <style type="text/css">#opacity-03 .block { opacity: 0.3; }</style>
91 |     </section>
92 | 
93 | </section>
94 | 


--------------------------------------------------------------------------------
/property/outline-width/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: outline-width
 4 | ---
 5 | 
 6 | <section id="outline-width" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/outline-width/" data-property-name="outline-width" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="outline-width">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/outline-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#outline-width"><span>#</span>outline-width</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines the width of the element&#39;s outlines.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.outline-width { outline-style: solid; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
32 | 
33 | 
34 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline-width: medium;">outline-width: medium;</code>
35 |         </p>
36 |         <div class="example-description">
37 |           <p>Defines the width of all outlines to <strong>medium</strong>.</p>
38 | 
39 |         </div>
40 |       </header>
41 | 
42 |       <aside class="example-preview">
43 |         <div class="example-browser"><i></i><i></i><i></i></div>
44 |         <div class="example-output">
45 |           <div class="example-output-div outline-width " id="outline-width-medium">Hello world</div>
46 |         </div>
47 |       </aside>
48 |           <style type="text/css">#outline-width-medium{ outline-width:medium;}</style>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline-width: 1px;">outline-width: 1px;</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>Defines the width of all outlines to <strong>1px</strong>.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div outline-width " id="outline-width-1px">Hello world</div>
67 |         </div>
68 |       </aside>
69 |           <style type="text/css">#outline-width-1px{ outline-width:1px;}</style>
70 |     </section>
71 | 
72 | </section>
73 | 


--------------------------------------------------------------------------------
/property/outline/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: outline
 4 | ---
 5 | 
 6 | <section id="outline" class="property property--shorthand">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/outline/" data-property-name="outline" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="outline">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/outline" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#outline"><span>#</span>outline</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Shorthand property for <code class="shorthand"><a class="hash" href="{{site.url}}/property/outline-width" data-property-name="outline-width">outline-width</a></code> <code class="shorthand"><a class="hash" href="{{site.url}}/property/outline-style" data-property-name="outline-style">outline-style</a></code>  and  <code class="shorthand"><a class="hash" href="{{site.url}}/property/outline-color" data-property-name="outline-color">outline-color</a></code>.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 | 
26 | 
27 |     <section class="example">
28 |       <header class="example-header">
29 |         <p class="example-name">
30 | 
31 | 
32 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline: 4px dotted red;">outline: 4px dotted red;</code>
33 |         </p>
34 |         <div class="example-description">
35 |           <p>The <strong>order</strong> is important:</p>
36 | <ul><li>width</li><li>style</li><li>color</li></ul>
37 |         </div>
38 |       </header>
39 | 
40 |       <aside class="example-preview">
41 |         <div class="example-browser"><i></i><i></i><i></i></div>
42 |         <div class="example-output">
43 |           <div class="example-output-div outline " id="outline-4px-dotted-red">Hello world</div>
44 |         </div>
45 |       </aside>
46 |           <style type="text/css">#outline-4px-dotted-red{ outline:4px dotted red;}</style>
47 |     </section>
48 |     <section class="example">
49 |       <header class="example-header">
50 |         <p class="example-name">
51 | 
52 | 
53 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="outline: 2px solid;">outline: 2px solid;</code>
54 |         </p>
55 |         <div class="example-description">
56 |           <p>Only the <em>color</em> is <strong>optional</strong>. If you omit it, the color applied will be the color of the <strong>text</strong>.</p>
57 | 
58 |         </div>
59 |       </header>
60 | 
61 |       <aside class="example-preview">
62 |         <div class="example-browser"><i></i><i></i><i></i></div>
63 |         <div class="example-output">
64 |           <div class="example-output-div outline " id="outline-2px-solid">Hello world</div>
65 |         </div>
66 |       </aside>
67 |           <style type="text/css">#outline-2px-solid{ outline:2px solid;}</style>
68 |     </section>
69 | 
70 | </section>
71 | 


--------------------------------------------------------------------------------
/property/overflow-wrap/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: overflow-wrap
 4 | ---
 5 | 
 6 | <section id="overflow-wrap" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/overflow-wrap/" data-property-name="overflow-wrap" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="overflow-wrap">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/overflow-wrap" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#overflow-wrap"><span>#</span>overflow-wrap</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines if words should break when reaching the end of a line.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 |     <style type="text/css">.overflow-wrap { font-family: "Source Code Pro", monospace;width: 18em; }</style>
24 | 
25 | 
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
32 | 
33 | 
34 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="overflow-wrap: normal;">overflow-wrap: normal;</code>
35 |         </p>
36 |         <div class="example-description">
37 |           <p>Words with no space will <strong>not</strong> break. Sequences of uninterrupted characters will be displayed on a single line.</p>
38 | 
39 |         </div>
40 |       </header>
41 | 
42 |       <aside class="example-preview">
43 |         <div class="example-browser"><i></i><i></i><i></i></div>
44 |         <div class="example-output">
45 |           <div class="example-output-div overflow-wrap  block block--alpha" id="overflow-wrap-normal">Thequickbrownfoxjumpsoverthelazydog</div>
46 |         </div>
47 |       </aside>
48 |           <style type="text/css">#overflow-wrap-normal{ overflow-wrap:normal;}</style>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="overflow-wrap: break-word;">overflow-wrap: break-word;</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>Words with no space will <strong>break</strong> as soon as they reach the end of a line.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div overflow-wrap  block block--alpha" id="overflow-wrap-break-word">Thequickbrownfoxjumpsoverthelazydog</div>
67 |         </div>
68 |       </aside>
69 |           <style type="text/css">#overflow-wrap-break-word{ overflow-wrap:break-word;}</style>
70 |     </section>
71 | 
72 | </section>
73 | 


--------------------------------------------------------------------------------
/property/pointer-events/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: pointer-events
 4 | ---
 5 | 
 6 | <section id="pointer-events" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |       <a class="property-links-direct" href="{{site.url}}/property/pointer-events/" data-property-name="pointer-events" data-tooltip="Single page for this property">Permalink</a>
10 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="pointer-events">Share</a>
11 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/pointer-events" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
12 |     </nav>
13 |     <h2 class="property-name">
14 |       <a href="#pointer-events"><span>#</span>pointer-events</a>
15 |     </h2>
16 |     <div class="property-description">
17 |       <p>Defines if the element reacts to pointer events or not.</p>
18 | 
19 |     </div>
20 | 
21 |   </header>
22 | 
23 | 
24 | 
25 |     <style type="text/css">.pointer-events .block--container { cursor: default;position: relative; }.pointer-events .block--alpha { cursor: pointer;opacity: 0.7;padding: 0.4em 0.5em;position: absolute; }.pointer-events .block--alpha:hover { background: #310736;color: #fff;opacity: 1; }</style>
26 | 
27 | 
28 |     <section class="example">
29 |       <header class="example-header">
30 |         <p class="example-name">
31 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
32 | 
33 | 
34 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="pointer-events: auto;">pointer-events: auto;</code>
35 |         </p>
36 |         <div class="example-description">
37 |           <p>The element <strong>reacts</strong> to pointer events, like <code>:hover</code> or <code>click</code>.</p>
38 | 
39 |         </div>
40 |       </header>
41 | 
42 |       <aside class="example-preview">
43 |         <div class="example-browser"><i></i><i></i><i></i></div>
44 |         <div class="example-output">
45 |           <div class="example-output-div pointer-events " id="pointer-events-auto"><div class="block block--container"><p class="block block--alpha">Hover me</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div></div>
46 |         </div>
47 |       </aside>
48 |           <style type="text/css">#pointer-events-auto{ pointer-events:auto;}</style>
49 |     </section>
50 |     <section class="example">
51 |       <header class="example-header">
52 |         <p class="example-name">
53 | 
54 | 
55 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="pointer-events: none;">pointer-events: none;</code>
56 |         </p>
57 |         <div class="example-description">
58 |           <p>The element does <strong>not</strong> react to pointer events, like <code>:hover</code> or <code>click</code>. As a result, elements that are <em>behind</em> are accessible.</p>
59 | 
60 |         </div>
61 |       </header>
62 | 
63 |       <aside class="example-preview">
64 |         <div class="example-browser"><i></i><i></i><i></i></div>
65 |         <div class="example-output">
66 |           <div class="example-output-div pointer-events " id="pointer-events-none"><div class="block block--container"><p class="block block--alpha">Hover me</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div></div>
67 |         </div>
68 |       </aside>
69 |           <style type="text/css">#pointer-events-none{ pointer-events:none;}</style>
70 |         <style type="text/css">#pointer-events-none .block { pointer-events: none; }</style>
71 |     </section>
72 | 
73 | </section>
74 | 


--------------------------------------------------------------------------------
/property/text-decoration/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: text-decoration
 4 | ---
 5 | 
 6 | <section id="text-decoration" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/text-decoration/" data-property-name="text-decoration" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="text-decoration">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/text-decoration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#text-decoration"><span>#</span>text-decoration</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines how the text content of the element is decorated.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 | 
29 | 
30 |     <section class="example">
31 |       <header class="example-header">
32 |         <p class="example-name">
33 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
34 | 
35 | 
36 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-decoration: none;">text-decoration: none;</code>
37 |         </p>
38 |         <div class="example-description">
39 |           <p>Removes any text decoration.</p>
40 | 
41 |         </div>
42 |       </header>
43 | 
44 |       <aside class="example-preview">
45 |         <div class="example-browser"><i></i><i></i><i></i></div>
46 |         <div class="example-output">
47 |           <div class="example-output-div text-decoration " id="text-decoration-none">Hello world</div>
48 |         </div>
49 |       </aside>
50 |           <style type="text/css">#text-decoration-none{ text-decoration:none;}</style>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-decoration: underline;">text-decoration: underline;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>Underlines the text content.</p>
61 | 
62 |         </div>
63 |       </header>
64 | 
65 |       <aside class="example-preview">
66 |         <div class="example-browser"><i></i><i></i><i></i></div>
67 |         <div class="example-output">
68 |           <div class="example-output-div text-decoration " id="text-decoration-underline">Hello world</div>
69 |         </div>
70 |       </aside>
71 |           <style type="text/css">#text-decoration-underline{ text-decoration:underline;}</style>
72 |     </section>
73 | 
74 | </section>
75 | 


--------------------------------------------------------------------------------
/property/text-overflow/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: text-overflow
 4 | ---
 5 | 
 6 | <section id="text-overflow" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/text-overflow/" data-property-name="text-overflow" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="text-overflow">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=text-overflow" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/text-overflow" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#text-overflow"><span>#</span>text-overflow</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Defines how the hidden text content behaves if it&#39;s overflowing.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 |     <style type="text/css">.text-overflow { display: flex; }</style>
28 | 
29 | 
30 |     <style type="text/css">.text-overflow .block { overflow: hidden;white-space: nowrap;width: 5em; }</style>
31 | 
32 | 
33 |     <section class="example">
34 |       <header class="example-header">
35 |         <p class="example-name">
36 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
37 | 
38 | 
39 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-overflow: clip;">text-overflow: clip;</code>
40 |         </p>
41 |         <div class="example-description">
42 |           <p>The text content is <strong>clipped</strong> and not accessible.</p>
43 | 
44 |         </div>
45 |       </header>
46 | 
47 |       <aside class="example-preview">
48 |         <div class="example-browser"><i></i><i></i><i></i></div>
49 |         <div class="example-output">
50 |           <div class="example-output-div text-overflow " id="text-overflow-clip"><p class="block block--alpha">Hello world</p></div>
51 |         </div>
52 |       </aside>
53 |           <style type="text/css">#text-overflow-clip{ text-overflow:clip;}</style>
54 |         <style type="text/css">#text-overflow-clip .block { text-overflow: clip; }</style>
55 |     </section>
56 |     <section class="example">
57 |       <header class="example-header">
58 |         <p class="example-name">
59 | 
60 | 
61 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="text-overflow: ellipsis;">text-overflow: ellipsis;</code>
62 |         </p>
63 |         <div class="example-description">
64 |           <p>The overflowing content is replaced by an <strong>ellipsis</strong>: <code>…</code></p>
65 | 
66 |         </div>
67 |       </header>
68 | 
69 |       <aside class="example-preview">
70 |         <div class="example-browser"><i></i><i></i><i></i></div>
71 |         <div class="example-output">
72 |           <div class="example-output-div text-overflow " id="text-overflow-ellipsis"><p class="block block--alpha">Hello world</p></div>
73 |         </div>
74 |       </aside>
75 |           <style type="text/css">#text-overflow-ellipsis{ text-overflow:ellipsis;}</style>
76 |         <style type="text/css">#text-overflow-ellipsis .block { text-overflow: ellipsis; }</style>
77 |     </section>
78 | 
79 | </section>
80 | 


--------------------------------------------------------------------------------
/property/word-break/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: word-break
 4 | ---
 5 | 
 6 | <section id="word-break" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/word-break/" data-property-name="word-break" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="word-break">Share</a>
14 |         <a target="_blank" href="http://caniuse.com/#feat=word-break" data-tooltip="See on Can I use..." rel="external">Can I use</a>
15 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/word-break" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
16 |     </nav>
17 |     <h2 class="property-name">
18 |       <a href="#word-break"><span>#</span>word-break</a>
19 |     </h2>
20 |     <div class="property-description">
21 |       <p>Defines how words should break when reaching the end of a line.</p>
22 | 
23 |     </div>
24 | 
25 |   </header>
26 | 
27 |     <style type="text/css">.word-break { font-family: "Source Code Pro", monospace;width: 18em; }</style>
28 | 
29 | 
30 | 
31 | 
32 |     <section class="example">
33 |       <header class="example-header">
34 |         <p class="example-name">
35 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
36 | 
37 | 
38 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="word-break: normal;">word-break: normal;</code>
39 |         </p>
40 |         <div class="example-description">
41 |           <p>Words with no space will <strong>not</strong> break. Sequences of uninterrupted characters will be displayed on a single line.</p>
42 | 
43 |         </div>
44 |       </header>
45 | 
46 |       <aside class="example-preview">
47 |         <div class="example-browser"><i></i><i></i><i></i></div>
48 |         <div class="example-output">
49 |           <div class="example-output-div word-break  block block--alpha" id="word-break-normal">Thequickbrownfoxjumpsoverthelazydog</div>
50 |         </div>
51 |       </aside>
52 |           <style type="text/css">#word-break-normal{ word-break:normal;}</style>
53 |     </section>
54 |     <section class="example">
55 |       <header class="example-header">
56 |         <p class="example-name">
57 | 
58 | 
59 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="word-break: break-all;">word-break: break-all;</code>
60 |         </p>
61 |         <div class="example-description">
62 |           <p>Words with no space will <strong>break</strong> as soon as they reach the end of a line.</p>
63 | 
64 |         </div>
65 |       </header>
66 | 
67 |       <aside class="example-preview">
68 |         <div class="example-browser"><i></i><i></i><i></i></div>
69 |         <div class="example-output">
70 |           <div class="example-output-div word-break  block block--alpha" id="word-break-break-all">Thequickbrownfoxjumpsoverthelazydog</div>
71 |         </div>
72 |       </aside>
73 |           <style type="text/css">#word-break-break-all{ word-break:break-all;}</style>
74 |     </section>
75 | 
76 | </section>
77 | 


--------------------------------------------------------------------------------
/property/word-spacing/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: single
 3 | property_name: word-spacing
 4 | ---
 5 | 
 6 | <section id="word-spacing" class="property">
 7 |   <header class="property-header">
 8 |     <nav class="property-links">
 9 |         <a class="property-collection" href="{{site.url}}/typography/">
10 |           In collection: <strong>typography</strong>
11 |         </a>
12 |       <a class="property-links-direct" href="{{site.url}}/property/word-spacing/" data-property-name="word-spacing" data-tooltip="Single page for this property">Permalink</a>
13 |       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="word-spacing">Share</a>
14 |       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/word-spacing" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
15 |     </nav>
16 |     <h2 class="property-name">
17 |       <a href="#word-spacing"><span>#</span>word-spacing</a>
18 |     </h2>
19 |     <div class="property-description">
20 |       <p>Defines the spacing between words of a block of text.</p>
21 | 
22 |     </div>
23 | 
24 |   </header>
25 | 
26 | 
27 | 
28 | 
29 | 
30 |     <section class="example">
31 |       <header class="example-header">
32 |         <p class="example-name">
33 |             <code class="example-default" data-tooltip="This is the property's default value">default</code>
34 | 
35 | 
36 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="word-spacing: normal;">word-spacing: normal;</code>
37 |         </p>
38 |         <div class="example-description">
39 |           <p>The spacing between the characters is <strong>normal</strong>.</p>
40 | 
41 |         </div>
42 |       </header>
43 | 
44 |       <aside class="example-preview">
45 |         <div class="example-browser"><i></i><i></i><i></i></div>
46 |         <div class="example-output">
47 |           <div class="example-output-div word-spacing " id="word-spacing-normal">The quick brown fox jumps over the lazy dog</div>
48 |         </div>
49 |       </aside>
50 |           <style type="text/css">#word-spacing-normal{ word-spacing:normal;}</style>
51 |     </section>
52 |     <section class="example">
53 |       <header class="example-header">
54 |         <p class="example-name">
55 | 
56 | 
57 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="word-spacing: 5px;">word-spacing: 5px;</code>
58 |         </p>
59 |         <div class="example-description">
60 |           <p>You can use <strong>pixel</strong> values.</p>
61 | 
62 |         </div>
63 |       </header>
64 | 
65 |       <aside class="example-preview">
66 |         <div class="example-browser"><i></i><i></i><i></i></div>
67 |         <div class="example-output">
68 |           <div class="example-output-div word-spacing " id="word-spacing-5px">The quick brown fox jumps over the lazy dog</div>
69 |         </div>
70 |       </aside>
71 |           <style type="text/css">#word-spacing-5px{ word-spacing:5px;}</style>
72 |     </section>
73 |     <section class="example">
74 |       <header class="example-header">
75 |         <p class="example-name">
76 | 
77 | 
78 |           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="word-spacing: 2em;">word-spacing: 2em;</code>
79 |         </p>
80 |         <div class="example-description">
81 |           <p>You can use <strong>em</strong> values: this allows the spacing to remain <em>relative</em> to the font-size.</p>
82 | 
83 |         </div>
84 |       </header>
85 | 
86 |       <aside class="example-preview">
87 |         <div class="example-browser"><i></i><i></i><i></i></div>
88 |         <div class="example-output">
89 |           <div class="example-output-div word-spacing " id="word-spacing-2em">The quick brown fox jumps over the lazy dog</div>
90 |         </div>
91 |       </aside>
92 |           <style type="text/css">#word-spacing-2em{ word-spacing:2em;}</style>
93 |     </section>
94 | 
95 | </section>
96 | 


--------------------------------------------------------------------------------
/sass/base.sass:
--------------------------------------------------------------------------------
 1 | html
 2 |   background: #fff
 3 |   font-size: 16px
 4 |   -moz-osx-font-smoothing: grayscale
 5 |   -webkit-font-smoothing: antialiased
 6 |   max-width: 100vw
 7 |   min-width: 300px
 8 |   overflow-x: hidden
 9 |   text-rendering: optimizeLegibility
10 | 
11 | body
12 |   color: $text
13 |   font-family: $family-primary
14 |   font-size: 1rem
15 |   line-height: 1.6
16 | 
17 | a,
18 | button,
19 | input,
20 | textarea
21 |   outline: none
22 | 
23 | a
24 |   color: $link
25 |   cursor: pointer
26 |   text-decoration: none
27 |   transition-duration: $speed
28 |   transition-property: background, border-bottom-color, color
29 | 
30 | code
31 |   font-family: $family-monospace
32 |   font-size: 0.8em
33 | 
34 | img
35 |   max-height: 100%
36 |   max-width: 100%
37 | 
38 | strong
39 |   color: $text-strong
40 | 
41 | pre
42 |   white-space: pre
43 |   word-wrap: normal
44 |   code
45 |     font-size: 1em
46 |     padding: 0
47 | 
48 | textarea
49 |   max-height: 100%
50 |   max-width: 100%
51 | 
52 | html
53 |   \::-moz-selection
54 |     background: $primary
55 |     color: $primary-invert
56 |   \::selection
57 |     background: $primary
58 |     color: $primary-invert
59 | 
60 | .container
61 |   margin-left: auto
62 |   margin-right: auto
63 |   max-width: 700px
64 | 
65 | +desktop
66 |   html
67 |     font-size: 18px
68 |     padding-left: $menu-width
69 |     &.is-index
70 |       padding-left: 0
71 | 


--------------------------------------------------------------------------------
/sass/controls.sass:
--------------------------------------------------------------------------------
  1 | .input,
  2 | .textarea,
  3 | .button
  4 |   -moz-appearance: none
  5 |   -webkit-appearance: none
  6 |   background: $background
  7 |   border: none
  8 |   font-size: 1em
  9 |   line-height: 1.6
 10 |   padding: 0.6em 1em
 11 | 
 12 | .textarea
 13 |   max-height: 100%
 14 |   max-width: 100%
 15 |   min-height: 6em
 16 | 
 17 | .button
 18 |   border-radius: 3px
 19 |   box-shadow: 0 2px 2px rgba(#000, 0.2)
 20 |   cursor: pointer
 21 |   font-weight: $weight-bold
 22 |   padding-left: 1.2em
 23 |   padding-right: 1.2em
 24 |   text-align: center
 25 |   transition-duration: $speed
 26 |   transition-property: background, box-shadow, color, transform
 27 |   will-change: box-shadow
 28 |   &:hover
 29 |     box-shadow: 0 4px 8px rgba(#000, 0.2)
 30 |     transform: translateY(-1px)
 31 |   &:active
 32 |     box-shadow: 0 0 0 rgba(#000, 0.01)
 33 |     transform: translateY(0)
 34 | 
 35 | .button.is-primary
 36 |   background: $primary
 37 |   color: $primary-invert
 38 |   &:hover
 39 |     background: darken($primary, 5%)
 40 |   &:active
 41 |     background: darken($primary, 10%)
 42 | 
 43 | .button.is-facebook
 44 |   background: $facebook
 45 |   color: #fff
 46 |   &:hover
 47 |     background: darken($facebook, 5%)
 48 |   &:active
 49 |     background: darken($facebook, 10%)
 50 | 
 51 | .button.is-twitter
 52 |   background: $twitter
 53 |   color: #fff
 54 |   &:hover
 55 |     background: darken($twitter, 5%)
 56 |   &:active
 57 |     background: darken($twitter, 10%)
 58 | 
 59 | .icon
 60 |   display: block
 61 |   pointer-events: none
 62 |   position: relative
 63 |   transition-duration: $speed
 64 |   transition-property: opacity
 65 | 
 66 | .icon.is-back
 67 |   height: 7px
 68 |   transform: rotate(-45deg)
 69 |   transform-origin: center center
 70 |   width: 7px
 71 |   &:before,
 72 |   &:after
 73 |     background: $plum-invert
 74 |     border-radius: 4px
 75 |     content: ""
 76 |     display: block
 77 |     transition-duration: $speed
 78 |     transition-property: background
 79 |   &:before
 80 |     height: 2px
 81 |   &:after
 82 |     height: 7px
 83 |     margin-top: -2px
 84 |     width: 2px
 85 | 
 86 | .icon.is-close
 87 |   height: 14px
 88 |   transform: rotate(45deg)
 89 |   transform-origin: center center
 90 |   width: 14px
 91 |   &:before,
 92 |   &:after
 93 |     background: $link-invert
 94 |     border-radius: 4px
 95 |     content: ""
 96 |     display: block
 97 |     position: absolute
 98 |   &:before
 99 |     height: 4px
100 |     left: 0
101 |     margin-top: -2px
102 |     top: 50%
103 |     width: 14px
104 |   &:after
105 |     height: 14px
106 |     left: 50%
107 |     margin-left: -2px
108 |     top: 0
109 |     width: 4px
110 | 
111 | .icon.is-search
112 |   border: 2px solid $text-light
113 |   border-radius: 290486px
114 |   height: 12px
115 |   transform: rotate(-45deg) translateX(4px) translateY(-5px)
116 |   transform-origin: center center
117 |   width: 12px
118 |   &:before
119 |     background: $text-light
120 |     border-radius: 290486px
121 |     content: ""
122 |     height: 7px
123 |     left: 50%
124 |     margin-left: -1px
125 |     position: absolute
126 |     top: 100%
127 |     width: 2px
128 | 


--------------------------------------------------------------------------------
/sass/example.sass:
--------------------------------------------------------------------------------
  1 | .example-value,
  2 | .example-default,
  3 | .example-recommended
  4 |   background: $yellow
  5 |   border-radius: 2px
  6 |   color: $yellow-invert
  7 |   display: inline-block
  8 |   padding: 0.1em 0.5em 0.15em
  9 |   vertical-align: top
 10 | 
 11 | .example-value
 12 |   cursor: pointer
 13 |   position: relative
 14 | 
 15 | .example-default,
 16 | .example-recommended
 17 |   background: #fff
 18 |   float: right
 19 | 
 20 | .example-default
 21 |   box-shadow: inset 0 0 0 1px $red
 22 |   color: $red
 23 | 
 24 | .example-recommended
 25 |   box-shadow: inset 0 0 0 1px $green
 26 |   color: $green
 27 | 
 28 | .example-fixed
 29 |   display: flex
 30 |   margin-top: 1rem
 31 |   .button
 32 |     background: $green
 33 |     color: #fff
 34 |     font-size: 0.8rem
 35 |     &:before
 36 |       content: "Enable position fixed"
 37 |     &.is-enabled
 38 |       background: $red
 39 |       &:before
 40 |         content: "Disabled position fixed"
 41 | 
 42 | .example-description
 43 |   font-size: 0.9rem
 44 |   margin-top: 0.5rem
 45 |   a
 46 |     border-bottom: 1px solid $border
 47 |     color: $text-strong
 48 |     &:hover
 49 |       border-bottom-color: $link
 50 |   code
 51 |     background: $background
 52 |     border-radius: 2px
 53 |     color: $text-strong
 54 |     padding: 0.2em 0.4em
 55 |   p,
 56 |   pre,
 57 |   ul
 58 |     margin-top: 0.5em
 59 |   ul
 60 |     list-style-position: outside
 61 |     list-style-type: disc
 62 |     margin-left: 1.5em
 63 |   pre
 64 |     background: $background
 65 |     color: $text-strong
 66 |     font-size: 0.8em
 67 |     line-height: 1.4
 68 |     padding: 0.8em 1em
 69 |   .shorthand
 70 |     padding: 0
 71 |     a
 72 |       background: $background
 73 |       border-radius: 2px
 74 |       padding: 0.2em 0.4em
 75 |       &:hover
 76 |         background: $link
 77 |         color: $link-invert
 78 | 
 79 | .example-browser
 80 |   align-items: center
 81 |   background: $background
 82 |   border: 1px solid $border
 83 |   border-bottom: none
 84 |   border-top-left-radius: 3px
 85 |   border-top-right-radius: 3px
 86 |   display: flex
 87 |   height: 1rem
 88 |   justify-content: flex-start
 89 |   padding-left: 0.5rem
 90 |   i
 91 |     background: rgba(black, 0.2)
 92 |     border-radius: 290486px
 93 |     display: block
 94 |     flex-grow: 0
 95 |     flex-shrink: 0
 96 |     height: 4px
 97 |     margin-right: 2px
 98 |     width: 4px
 99 | 
100 | .example-output
101 |   border: 1px solid $border
102 |   border-bottom-left-radius: 4px
103 |   border-bottom-right-radius: 4px
104 |   box-shadow: 0 2px 3px rgba(#000, 0.05)
105 |   font-size: 0.8em
106 |   padding: 0.5em
107 | 
108 | .example-output-div
109 |   padding: 0.8em 1em
110 |   position: relative
111 | 
112 | .example-complements
113 |   background: $background
114 |   font-size: 0.9em
115 |   margin-bottom: -3rem
116 |   strong
117 |     font-weight: $weight-normal
118 |     padding-left: 0.35em
119 |   .shorthand
120 |     padding: 0
121 |     a
122 |       background: #fff
123 |       border-radius: 2px
124 |       padding: 0.2em 0.4em
125 |       &:hover
126 |         background: $link
127 |         color: $link-invert
128 | 
129 | +mobile
130 |   .example
131 |     padding: 2rem 2rem 0
132 |   .example-preview
133 |     margin-top: 1rem
134 |   .example-complements
135 |     margin-top: 2rem
136 |     padding: 2rem
137 | 
138 | +desktop
139 |   .example
140 |     align-items: flex-start
141 |     display: flex
142 |     padding: 2rem 3rem 0
143 |   .example-header,
144 |   .example-preview
145 |     flex-grow: 1
146 |     flex-shrink: 1
147 |   .example-header
148 |     padding-right: 2rem
149 |     width: 60%
150 |   .example-preview
151 |     width: 40%
152 |   .example-complements
153 |     margin-top: 3rem
154 |     padding: 2rem 3rem
155 | 


--------------------------------------------------------------------------------
/sass/ff.sass:
--------------------------------------------------------------------------------
 1 | .ff
 2 |   align-items: center
 3 |   background-color: $fortyfour
 4 |   color: #fff
 5 |   display: flex
 6 |   justify-content: center
 7 |   overflow: hidden
 8 |   padding: 1rem
 9 |   position: relative
10 |   strong
11 |     color: currentColor
12 |   .tag
13 |     margin-right: 0.5em
14 |   .button
15 |     position: relative
16 |     transform-origin: center
17 |     transition-duration: $speed
18 |     transition-property: transform
19 |     white-space: nowrap
20 |   &:hover
21 |     .button
22 |       transform: scale(1.1)
23 | 
24 | .ff-background
25 |   +overlay
26 |   background-image: url("/images/fortyfour-background.jpg")
27 |   background-position: center center
28 |   background-size: cover
29 |   opacity: 0.5
30 | 
31 | .ff-text
32 |   line-height: 1.25
33 |   margin-right: 0.5rem
34 |   position: relative
35 | 
36 | .ff-button
37 |   display: inline-block
38 |   flex-shrink: 0
39 |   height: 34px
40 |   position: relative
41 |   width: 145px
42 |   img
43 |     max-height: 100%
44 | 
45 | +from(480px)
46 |   .ff-text
47 |     margin-right: 1rem
48 | 


--------------------------------------------------------------------------------
/sass/finder.sass:
--------------------------------------------------------------------------------
 1 | .finder
 2 |   position: relative
 3 |   .menu-search
 4 |     input
 5 |       font-size: 1rem
 6 | 
 7 | .finder-list
 8 |   &.is-searching
 9 |     .finder-item
10 |       display: none
11 |       &.is-highlighted:not(.is-hidden)
12 |         display: block
13 |       &.is-selected
14 |         display: block
15 | 
16 | .finder-item
17 |   align-items: stretch
18 |   cursor: pointer
19 |   justify-content: space-between
20 |   position: relative
21 |   &:hover
22 |     .finder-item-link
23 |       background: $background
24 |     .finder-item-meta .light
25 |       opacity: 1
26 |   &.is-hidden
27 |     display: none
28 |   &.is-selected
29 |     z-index: 1
30 |     .finder-item-link
31 |       &,
32 |       &:hover
33 |         background: $primary
34 |         color: $primary-invert
35 | 
36 | .finder-item-link
37 |   display: block
38 |   padding: 0.25rem 1rem
39 |   transition: none
40 |   &:visited
41 |     color: $purple
42 |   &:hover
43 |     background: $background
44 |   .highlight
45 |     background: $yellow
46 |     color: $yellow-invert
47 |   .light--experimental
48 |     margin-left: 4px
49 |     position: relative
50 |     top: -1px
51 | 
52 | .finder-item-meta
53 |   align-items: center
54 |   bottom: 0
55 |   display: flex
56 |   justify-content: flex-end
57 |   position: absolute
58 |   right: 0
59 |   top: 0
60 |   .light:hover
61 |     text-decoration: underline
62 | 
63 | .light
64 |   border-radius: 2px
65 |   color: $text-strong
66 |   font-size: 0.8em
67 |   font-weight: normal
68 |   line-height: 1.2
69 |   opacity: 0.5
70 |   padding: 2px 4px
71 |   text-transform: lowercase
72 |   white-space: nowrap
73 | 
74 | label.light
75 |   cursor: pointer
76 |   input
77 |     cursor: pointer
78 |     margin-right: 4px
79 | 
80 | +mobile
81 |   .finder
82 |     padding-bottom: 1rem
83 |   .finder-item-meta
84 |     padding-right: 0.5rem
85 |     .light
86 |       margin-left: 2px
87 | 
88 | +desktop
89 |   .finder
90 |     padding-bottom: 3rem
91 |   .finder-item-meta
92 |     padding: 0 1em
93 |     .light
94 |       margin-left: 4px
95 | 


--------------------------------------------------------------------------------
/sass/footer.sass:
--------------------------------------------------------------------------------
  1 | .footer
  2 |   background: #fff
  3 |   bottom: 0
  4 |   box-shadow: 0 0 1rem rgba(#000, 0.2)
  5 |   left: 0
  6 |   position: fixed
  7 |   right: 0
  8 | 
  9 | .footer-title
 10 |   align-items: center
 11 |   color: $text-light
 12 |   display: none
 13 |   line-height: 1.2
 14 |   padding: 0 1rem
 15 |   small
 16 |     font-size: 0.8em
 17 |     margin-left: 0.5em
 18 |   a
 19 |     border-radius: 2px
 20 |     margin-left: -4px
 21 |     padding: 2px 4px
 22 |     &:hover
 23 |       background: $alpha
 24 |       color: $alpha-invert
 25 | 
 26 | .footer-facebook,
 27 | .footer-github
 28 |   align-items: center
 29 |   display: none
 30 |   flex-shrink: 0
 31 |   justify-content: flex-end
 32 |   iframe
 33 |     height: 20px
 34 | 
 35 | .footer-share
 36 |   align-items: center
 37 |   display: flex
 38 |   position: relative
 39 | 
 40 | .footer-share--contribute
 41 |   display: none
 42 | 
 43 | .footer-share-label
 44 |   margin-right: 0.25rem
 45 | 
 46 | .share-button
 47 |   align-items: center
 48 |   display: flex
 49 |   height: 2rem
 50 |   justify-content: center
 51 |   position: relative
 52 |   width: 2rem
 53 |   &:before
 54 |     +overlay
 55 |     background: rgba(black, 0.14)
 56 |     border-radius: 5px
 57 |     content: ""
 58 |     display: block
 59 |     height: 100%
 60 |     opacity: 0
 61 |     transform: scale(1.2)
 62 |     transform-origin: center center
 63 |     transition-duration: $speed
 64 |     transition-property: opacity, transform
 65 |     width: 100%
 66 |   svg
 67 |     height: 1rem
 68 |     position: relative
 69 |     width: 1rem
 70 |   &:hover:before
 71 |     opacity: 1
 72 |     transform: scale(1)
 73 | 
 74 | .footer-share-nav
 75 |   align-items: center
 76 |   bottom: 0
 77 |   display: flex
 78 |   font-weight: $weight-bold
 79 |   padding: 0 1rem
 80 |   position: absolute
 81 |   right: 0
 82 |   top: 0
 83 | 
 84 | +mobile
 85 |   .footer-share--social
 86 |     padding: 0.5rem 1rem
 87 | 
 88 | +desktop
 89 |   .footer
 90 |     align-items: stretch
 91 |     display: flex
 92 |     font-size: 0.8rem
 93 |     height: 3rem
 94 |     left: $menu-width
 95 |   .footer-share,
 96 |   .footer-facebook,
 97 |   .footer-github
 98 |     display: flex
 99 |   .footer-title
100 |     display: none
101 |     padding: 0.25rem 1rem
102 |   .footer-share
103 |     border-left: 1px solid $border
104 |     flex-grow: 1
105 |     flex-shrink: 1
106 |     padding: 0.25rem 1rem
107 |   .footer-share-nav
108 |     display: none
109 | 
110 | +from(1000px)
111 |   .footer-title
112 |     display: flex
113 | 


--------------------------------------------------------------------------------
/sass/functions.sass:
--------------------------------------------------------------------------------
 1 | @function powerNumber($number, $exp)
 2 |   $value: 1
 3 |   @if $exp > 0
 4 |     @for $i from 1 through $exp
 5 |       $value: $value * $number
 6 |   @else if $exp < 0
 7 |     @for $i from 1 through -$exp
 8 |       $value: $value / $number
 9 |   @return $value
10 | 
11 | @function colorLuminance($color)
12 |   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
13 |   @each $name, $value in $color-rgb
14 |     $adjusted: 0
15 |     $value: $value / 255
16 |     @if $value < 0.03928
17 |       $value: $value / 12.92
18 |     @else
19 |       $value: ($value + .055) / 1.055
20 |       $value: powerNumber($value, 2)
21 |     $color-rgb: map-merge($color-rgb, ($name: $value))
22 |   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
23 | 
24 | @function findColorInvert($color)
25 |   @if (colorLuminance($color) > 0.55)
26 |     @return rgba(#000, 0.7)
27 |   @else
28 |     @return #fff
29 | 


--------------------------------------------------------------------------------
/sass/header.sass:
--------------------------------------------------------------------------------
 1 | .header
 2 |   background-color: $background
 3 | 
 4 | .header-figure
 5 |   display: flex
 6 |   img:first-child
 7 |     height: 128px
 8 |     width: 128px
 9 | 
10 | .header-carbon
11 |   background-color: white
12 |   border-radius: 5px
13 |   box-shadow: 0 0 1rem rgba(#000, 0.2)
14 |   display: flex
15 |   flex-shrink: 0
16 |   width: 240px
17 |   #huggingFace
18 | 
19 | .header-title
20 |   color: $text-strong
21 |   font-size: 1.2rem
22 |   font-weight: bold
23 |   line-height: 1.2
24 |   margin-bottom: 0.5rem
25 | 
26 | .header-subtitle
27 |   line-height: 1.6rem
28 |   a
29 |     color: inherit
30 |   strong:first-child
31 |     color: $primary
32 | 
33 | .header-share
34 |   align-items: center
35 |   display: flex
36 |   justify-content: center
37 |   margin-top: 0.5rem
38 |   .share-button
39 |     height: 48px
40 |     width: 48px
41 |     svg
42 |       height: 24px
43 |       width: 24px
44 | 
45 | +mobile
46 |   .header
47 |     padding: 30px
48 |   .header-figure
49 |     align-items: center
50 |     flex-direction: column
51 |     justify-content: center
52 |     margin-bottom: 30px
53 |     img:last-child
54 |       height: 40px
55 |   .header-carbon
56 |     justify-content: center
57 |     margin: 0 auto 2rem
58 |   .header-subtitle
59 |     margin-top: 10px
60 | 
61 | +desktop
62 |   .header
63 |     padding: 60px 60px 30px
64 |   .header-figure
65 |     align-items: center
66 |     justify-content: center
67 |     margin-bottom: 30px
68 |     img:last-child
69 |       height: 80px
70 |       margin-left: 20px
71 |   .header-carbon
72 |     margin-left: 1rem
73 |     margin-right: 2rem
74 |   .header-content
75 |     align-items: center
76 |     display: flex
77 |   .header-text
78 |     margin-right: 2rem
79 |   .header-share
80 |     justify-content: flex-start
81 | 


--------------------------------------------------------------------------------
/sass/heading.sass:
--------------------------------------------------------------------------------
 1 | .heading
 2 |   background: $plum
 3 |   color: $plum-light
 4 |   padding: 4rem 3rem
 5 | 
 6 | .heading-title
 7 |   font-size: 2rem
 8 |   line-height: 1.2
 9 |   strong
10 |     color: $plum-invert
11 |     font-weight: $weight-bold
12 | 
13 | .heading-share
14 |   align-items: center
15 |   position: relative
16 | 
17 | .heading-share-label
18 |   color: $plum-light
19 |   font-size: 0.8em
20 |   margin-right: 0.5rem
21 | 
22 | .heading-share-button
23 |   align-items: center
24 |   display: inline-flex
25 |   height: 3rem
26 |   justify-content: center
27 |   position: relative
28 |   width: 3rem
29 |   &:before
30 |     +overlay
31 |     background: $plum-dark
32 |     border-radius: 5px
33 |     content: ""
34 |     display: block
35 |     height: 100%
36 |     opacity: 0
37 |     transform: scale(1.2)
38 |     transform-origin: center center
39 |     transition-duration: $speed
40 |     transition-property: opacity, transform
41 |     width: 100%
42 |   svg
43 |     height: 1.5rem
44 |     position: relative
45 |     width: 1.5rem
46 |   &:hover:before
47 |     opacity: 1
48 |     transform: scale(1)
49 | 
50 | +mobile
51 |   .heading-share
52 |     margin-top: 2rem
53 | 
54 | +until(1199px)
55 |   .heading-share
56 |     min-width: 8rem
57 |     text-align: center
58 |   .heading-share-label
59 |     display: block
60 |     margin-bottom: 0.5rem
61 |   .heading-share-button
62 |     vertical-align: top
63 | 
64 | +desktop
65 |   .heading
66 |     align-items: center
67 |     display: flex
68 |   .heading-content
69 |     flex-grow: 1
70 |     flex-shrink: 1
71 | 
72 | +from(1200px)
73 |   .heading-share
74 |     display: flex
75 |   .heading-share-label
76 |     margin-right: 0.5rem
77 |   .heading-share-button
78 |     display: flex
79 | 


--------------------------------------------------------------------------------
/sass/index.sass:
--------------------------------------------------------------------------------
 1 | .index-collections
 2 |   align-items: center
 3 |   display: flex
 4 |   flex-wrap: wrap
 5 |   line-height: 1.2
 6 |   a,
 7 |   strong
 8 |     border-radius: 2px
 9 |     padding: 5px 10px
10 |   a
11 |     &:hover
12 |       background: $primary
13 |       color: $primary-invert
14 |     &.is-new
15 |       align-items: center
16 |       box-shadow: 0 0 0 1px $red
17 |       display: flex
18 |       &:hover
19 |         background: $red
20 |   .tag
21 |     font-size: 0.75em
22 |     margin-left: 0.5em
23 |     position: relative
24 |     vertical-align: middle
25 | 
26 | +mobile
27 |   .index-collections
28 |     padding: 1rem 1rem 0
29 | 
30 | +desktop
31 |   .index-collections
32 |     border-bottom: 1px solid $border
33 |     justify-content: center
34 |     padding: 1rem
35 |     strong
36 |       padding-left: 0
37 | 


--------------------------------------------------------------------------------
/sass/keyframes.sass:
--------------------------------------------------------------------------------
 1 | @keyframes fadeIn
 2 |   from
 3 |     opacity: 0
 4 |   to
 5 |     opacity: 1
 6 | 
 7 | @keyframes fadeAndMove
 8 |   from
 9 |     opacity: 0
10 |     transform: translateX(0)
11 |   to
12 |     opacity: 1
13 |     transform: translateX(200px)
14 | 
15 | @keyframes moveRight
16 |   from
17 |     transform: translateX(0)
18 |   to
19 |     transform: translateX(200px)
20 | 
21 | @keyframes rotateFull
22 |   from
23 |     transform: rotate(0deg)
24 |   to
25 |     transform: rotate(359deg)
26 | 
27 | @keyframes kf-animation-fill-mode
28 |   from
29 |     background: $green
30 |     transform: translateX(0)
31 |   to
32 |     background: $blue
33 |     transform: translateX(200px)
34 | 


--------------------------------------------------------------------------------
/sass/list.sass:
--------------------------------------------------------------------------------
 1 | .list
 2 |   padding-bottom: 3rem
 3 |   position: relative
 4 |   .menu-search input
 5 |     font-size: 1rem
 6 | 
 7 | .list-list
 8 |   &.is-searching
 9 |     .menu-item
10 |       display: none
11 |       &.is-highlighted,
12 |       &.is-selected,
13 |         display: flex
14 | 
15 | .list-item
16 |   border-top: 1px solid $primary
17 |   display: flex
18 |   position: relative
19 | 
20 | .list-name
21 |   display: block
22 |   padding: 1rem
23 |   transition: none
24 | 
25 | .list-collections
26 |   bottom: 0
27 |   color: rgba(#000, 0.3)
28 |   display: none
29 |   font-size: 0.8em
30 |   justify-content: flex-end
31 |   position: absolute
32 |   right: 0
33 |   top: 0
34 |   a:hover
35 |     text-decoration: underline
36 |   strong
37 |     color: inherit
38 |     text-transform: capitalize
39 | 
40 | +desktop
41 |   .list-name,
42 |   .list-collections
43 |     align-items: center
44 |     display: flex
45 |     padding: 1rem
46 |   .list-name
47 |     flex-grow: 1
48 |     flex-shrink: 1
49 |   .list-item
50 |     align-items: stretch
51 |     justify-content: flex-start
52 | 


--------------------------------------------------------------------------------
/sass/minireset.sass:
--------------------------------------------------------------------------------
 1 | /*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
 2 | // Blocks
 3 | html,
 4 | body,
 5 | p,
 6 | ol,
 7 | ul,
 8 | li,
 9 | dl,
10 | dt,
11 | dd,
12 | blockquote,
13 | figure,
14 | fieldset,
15 | legend,
16 | textarea,
17 | pre,
18 | iframe,
19 | hr,
20 | h1,
21 | h2,
22 | h3,
23 | h4,
24 | h5,
25 | h6
26 |   margin: 0
27 |   padding: 0
28 | 
29 | // Headings
30 | h1,
31 | h2,
32 | h3,
33 | h4,
34 | h5,
35 | h6
36 |   font-size: 100%
37 |   font-weight: normal
38 | 
39 | // List
40 | ul
41 |   list-style: none
42 | 
43 | // Form
44 | button,
45 | input,
46 | select,
47 | textarea
48 |   color: inherit
49 |   font-family: inherit
50 |   margin: 0
51 | 
52 | // Box sizing
53 | html
54 |   box-sizing: border-box
55 | 
56 | *
57 |   box-sizing: inherit
58 |   &:before,
59 |   &:after
60 |     box-sizing: inherit
61 | 
62 | // Media
63 | img,
64 | embed,
65 | object,
66 | audio,
67 | video
68 |   height: auto
69 |   max-width: 100%
70 | 
71 | // Iframe
72 | iframe
73 |   border: 0
74 | 
75 | // Table
76 | table
77 |   border-collapse: collapse
78 |   border-spacing: 0
79 | 
80 | td,
81 | th
82 |   padding: 0
83 |   text-align: left
84 | 


--------------------------------------------------------------------------------
/sass/mixins.sass:
--------------------------------------------------------------------------------
 1 | =center
 2 |   align-items: center
 3 |   display: flex
 4 |   justify-content: center
 5 |   text-align: center
 6 | 
 7 | =clearfix
 8 |   &:after
 9 |     clear: both
10 |     content: " "
11 |     display: table
12 | 
13 | =overlay($offset: 0)
14 |   bottom: $offset
15 |   left: $offset
16 |   position: absolute
17 |   right: $offset
18 |   top: $offset
19 | 
20 | =mobile
21 |   @media (max-width: 799px)
22 |     @content
23 | 
24 | =desktop
25 |   @media (min-width: 800px)
26 |     @content
27 | 
28 | =until($bp)
29 |   @media (max-width: $bp)
30 |     @content
31 | 
32 | =from($bp)
33 |   @media (min-width: $bp)
34 |     @content
35 | 


--------------------------------------------------------------------------------
/sass/modal.sass:
--------------------------------------------------------------------------------
  1 | .modal
  2 |   +overlay
  3 |   align-items: center
  4 |   background: rgba(#000, 0.7)
  5 |   display: flex
  6 |   justify-content: center
  7 |   opacity: 0
  8 |   padding: 1rem
  9 |   position: fixed
 10 |   transition-duration: $speed
 11 |   transition-property: opacity, visibility
 12 |   visibility: hidden
 13 | 
 14 | .modal-box
 15 |   background: #fff
 16 |   flex-grow: 1
 17 |   flex-shrink: 1
 18 |   max-width: 46rem
 19 |   opacity: 0
 20 |   padding: 4rem 2rem
 21 |   position: relative
 22 |   transform: scale(0.95)
 23 |   transform-origin: center center
 24 |   transition-duration: $speed
 25 |   transition-property: opacity, transform, visibility
 26 | 
 27 | .modal-title
 28 |   color: $text-strong
 29 |   font-size: 2rem
 30 |   font-weight: $weight-bold
 31 |   line-height: 1
 32 |   margin-bottom: 3rem
 33 |   text-align: center
 34 | 
 35 | .modal-close
 36 |   background: $background
 37 |   border-radius: 290486px
 38 |   height: 3rem
 39 |   position: absolute
 40 |   right: 1rem
 41 |   top: 1rem
 42 |   transform: rotate(45deg)
 43 |   transform-origin: center center
 44 |   width: 3rem
 45 |   &:before,
 46 |   &:after
 47 |     background: $text-light
 48 |     content: ""
 49 |     display: block
 50 |     position: absolute
 51 |   &:before
 52 |     height: 50%
 53 |     left: 50%
 54 |     margin-left: -1px
 55 |     top: 25%
 56 |     width: 2px
 57 |   &:after
 58 |     height: 2px
 59 |     left: 25%
 60 |     margin-top: -1px
 61 |     top: 50%
 62 |     width: 50%
 63 |   &:hover
 64 |     background: darken($background, 5%)
 65 |   &:active
 66 |     background: darken($background, 10%)
 67 | 
 68 | .modal.is-active
 69 |   opacity: 1
 70 |   visibility: visible
 71 |   .modal-box
 72 |     opacity: 1
 73 |     transform: scale(1)
 74 |     visibility: visible
 75 | 
 76 | +mobile
 77 |   .modal-url
 78 |     .input
 79 |       display: block
 80 |       width: 100%
 81 |     .button
 82 |       margin-top: 1em
 83 |   .modal-social
 84 |     .button
 85 |       display: block
 86 |       margin-top: 1em
 87 | 
 88 | +desktop
 89 |   .modal-box
 90 |     padding: 4rem 6rem
 91 |   .modal-url
 92 |     display: flex
 93 |     .input
 94 |       flex-grow: 1
 95 |       flex-shrink: 1
 96 |     .button
 97 |       flex-grow: 0
 98 |       flex-shrink: 0
 99 |       margin-left: 1em
100 |       padding-left: 0
101 |       padding-right: 0
102 |       width: 5.5em
103 |   .modal-social
104 |     align-items: center
105 |     display: flex
106 |     margin-top: 1rem
107 |     .button
108 |       margin-right: 1em
109 | 


--------------------------------------------------------------------------------
/sass/property.sass:
--------------------------------------------------------------------------------
  1 | .properties
  2 |   padding-bottom: 3rem
  3 |   position: relative
  4 | 
  5 | .property
  6 |   background-color: #fff
  7 |   background-image: linear-gradient($primary-light, #fff)
  8 |   background-repeat: no-repeat
  9 |   background-size: 100% 4rem
 10 |   border-top: 2px solid $primary
 11 |   overflow: hidden
 12 |   padding-bottom: 3rem
 13 |   padding-top: 2rem
 14 | 
 15 | .property--shorthand
 16 |   background-image: linear-gradient($purple-light, #fff)
 17 |   border-top-color: $purple
 18 | 
 19 | .property-links
 20 |   align-items: center
 21 |   display: flex
 22 |   font-size: 0.7rem
 23 |   justify-content: flex-end
 24 |   opacity: 0.5
 25 |   transition-duration: $speed
 26 |   transition-property: opacity
 27 |   a
 28 |     border-bottom: 1px solid transparent
 29 |     color: $text-light
 30 |     margin-left: 1em
 31 |     &:before
 32 |       left: auto
 33 |       right: 0
 34 |       transform: translateX(0) translateY(0)
 35 |       white-space: nowrap
 36 |     &:hover
 37 |       border-bottom-color: $link
 38 |       color: $link
 39 |       &:before
 40 |         transform: translateX(0) translateY(-4px)
 41 |   strong
 42 |     text-transform: capitalize
 43 |   &:hover
 44 |     opacity: 1
 45 |   .property-collections
 46 |     a
 47 |       margin-left: 0.25em
 48 | 
 49 | .property-name
 50 |   font-size: 1.2rem
 51 |   font-weight: $weight-bold
 52 |   a
 53 |     border-bottom: 1px solid transparent
 54 |     color: $text-strong
 55 |     display: inline-block
 56 |     position: relative
 57 |     vertical-align: top
 58 |     span
 59 |       color: $border
 60 |       padding-right: 0.6em
 61 |       position: absolute
 62 |       right: 100%
 63 |       top: 0
 64 |     &:hover
 65 |       border-bottom-color: $link
 66 |       color: $link
 67 |       span
 68 |         color: $link
 69 | 
 70 | .property-description
 71 |   code
 72 |     background: $background
 73 |     border-radius: 2px
 74 |     color: $text-strong
 75 |     padding: 0.2em 0.4em
 76 |   p
 77 |     margin-top: 0.5em
 78 |   .shorthand
 79 |     padding: 0
 80 |     a
 81 |       background: $background
 82 |       border-radius: 2px
 83 |       padding: 0.2em 0.4em
 84 |       &:hover
 85 |         background: $link
 86 |         color: $link-invert
 87 | 
 88 | .property-animation
 89 |   display: flex
 90 |   margin-top: 1rem
 91 |   .button
 92 |     background: $green
 93 |     color: #fff
 94 |     font-size: 0.8rem
 95 |     &:before
 96 |       content: "▶ Play animations"
 97 |     &:first-letter
 98 |       margin-right: 0.25em
 99 |     &.is-playing
100 |       background: $red
101 |       &:before
102 |         content: "￭ Stop"
103 | 
104 | +mobile
105 |   .property-header
106 |     padding-left: 2rem
107 |     padding-right: 2rem
108 |   .property-links
109 |     flex-wrap: wrap
110 |     margin-bottom: 0.5rem
111 | 
112 | +desktop
113 |   // .property
114 |   //   margin-bottom: 3rem
115 |   //   margin-left: auto
116 |   //   margin-right: auto
117 |   //   width: 500px
118 |   .property-header
119 |     padding-left: 3rem
120 |     padding-right: 3rem
121 |   .property-links
122 |     float: right
123 |     padding: 0.25rem 0
124 | 
125 | // +from(1000px)
126 | //   .property
127 | //     width: 700px
128 | 
129 | // +from(1200px)
130 | //   .property
131 | //     width: 900px
132 | 
133 | // +from(1400px)
134 | //   .property
135 | //     width: 1100px
136 | 
137 | // +from(1600px)
138 | //   .property
139 | //     width: 1300px
140 | 


--------------------------------------------------------------------------------
/sass/sister.sass:
--------------------------------------------------------------------------------
 1 | .sisters
 2 |   background-color: $background
 3 | 
 4 | .sister-banner
 5 |   display: flex
 6 | 
 7 | .sister--htmlreference
 8 |   .sister-banner img
 9 |     height: 48px
10 | 
11 | .sister--bulma
12 |   .sister-banner img
13 |     height: 48px
14 | 
15 | +mobile
16 |   .sisters
17 |     padding: 40px 20px
18 |     text-align: center
19 |     .sister + .sister
20 |       margin-top: 40px
21 |   .sister-banner
22 |     justify-content: center
23 |     margin-top: 10px
24 | 
25 | +desktop
26 |   .sisters
27 |     padding: 60px
28 |     .sister
29 |       align-items: center
30 |       display: flex
31 |       padding-left: 1rem
32 |       & + .sister
33 |         margin-top: 60px
34 |   .sister-title
35 |     flex-grow: 1
36 |   .sister-banner
37 |     flex-shrink: 0
38 |     width: 420px
39 |   .sister--htmlreference
40 |     .sister-banner img
41 |       height: 72px
42 |   .sister--bulma
43 |     .sister-banner img
44 |       height: 64px
45 | 


--------------------------------------------------------------------------------
/sass/tooltip.sass:
--------------------------------------------------------------------------------
 1 | [data-tooltip]
 2 |   cursor: pointer
 3 |   position: relative
 4 | 
 5 | [data-tooltip]:before,
 6 | [data-tooltip-after]:after
 7 |   background-color: $text-strong
 8 |   border-radius: 2px
 9 |   bottom: 100%
10 |   color: #fff
11 |   content: attr(data-tooltip)
12 |   font-family: $family-primary
13 |   font-size: 0.6rem
14 |   font-weight: 400
15 |   left: 50%
16 |   line-height: 1.2
17 |   opacity: 0
18 |   padding: 0.5em 0.6em
19 |   pointer-events: none
20 |   position: absolute
21 |   text-align: center
22 |   transform: translateX(-50%) translateY(0)
23 |   transition-duration: $speed
24 |   transition-property: opacity, transform
25 |   visibility: hidden
26 |   white-space: nowrap
27 | 
28 | [data-tooltip-after]:after
29 |   content: attr(data-tooltip-after)
30 | 
31 | [data-tooltip]:hover:before,
32 | [data-tooltip-after]:hover:after
33 |   opacity: 1
34 |   transform: translateX(-50%) translateY(-4px)
35 |   visibility: visible
36 | 
37 | [data-tooltip].is-copied:before
38 |   background: $green
39 |   content: "Copied!"
40 | 


--------------------------------------------------------------------------------
/sass/variables.sass:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | $plum: #310736
 3 | $plum-invert: #fff
 4 | $plum-dark: #622369
 5 | $plum-light: #94529c
 6 | $fortyfour: #5f45bb
 7 | 
 8 | $alpha: #05ffb0
 9 | $alpha-invert: $plum
10 | $beta: #00e7eb
11 | $beta-invert: $plum
12 | 
13 | $orange:    hsl(14, 100%, 53%)
14 | $yellow:    hsl(48, 100%, 67%)
15 | $green:     hsl(141, 71%, 48%)
16 | $turquoise: hsl(171, 100%, 41%)
17 | $blue:      hsl(217, 71%, 53%)
18 | $purple:    hsl(271, 100%, 71%)
19 | $pink:      hsl(348, 100%, 61%)
20 | $red:       hsl(4, 100%, 61%)
21 | 
22 | $orange-invert:    findColorInvert($orange)
23 | $yellow-invert:    findColorInvert($yellow)
24 | $green-invert:     findColorInvert($green)
25 | $turquoise-invert: findColorInvert($turquoise)
26 | $blue-invert:      findColorInvert($blue)
27 | $purple-invert:    findColorInvert($purple)
28 | $red-invert:       findColorInvert($red)
29 | 
30 | $turquoise-dark: hsl(171, 100%, 21%)
31 | $turquoise-light: hsl(171, 100%, 96%)
32 | 
33 | $purple-dark: hsl(271, 100%, 51%)
34 | $purple-light: hsl(271, 100%, 96%)
35 | 
36 | // Social
37 | $facebook:    #3b5998
38 | $github:      #333333
39 | $instagram:   #3f729b
40 | $hacker-news: #ff6600
41 | $soundcloud:  #ff8800
42 | $twitter:     #55acee
43 | $rss:         #f26522
44 | 
45 | // Inferred
46 | $text:        hsl(0, 0%, 30%)
47 | $text-light:  hsl(0, 0%, 50%)
48 | $text-strong: hsl(0, 0%, 20%)
49 | 
50 | $primary: $turquoise
51 | $primary-invert: $turquoise-invert
52 | $primary-light: $turquoise-light
53 | $primary-dark: $turquoise-dark
54 | 
55 | $link: $blue
56 | $link-invert: $blue-invert
57 | 
58 | $background: hsl(0, 0%, 95%)
59 | $border: hsl(0, 0%, 90%)
60 | 
61 | // Typography
62 | $family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
63 | $family-monospace: "Inconsolata", "Source Code Pro", "Consolas", "Monaco", "Courier", monospace
64 | 
65 | $weight-light: 300
66 | $weight-normal: 400
67 | $weight-bold: 700
68 | 
69 | // Dimensions
70 | $logo-width: 190px
71 | $menu-width: $logo-width + (2 * 18px)
72 | // $menu-width: 240px
73 | $header-height: calc(100vh - #{$menu-width})
74 | 
75 | // Miscellaneous
76 | $shadow: 0 0 1rem rgba(#000, 0.1)
77 | $speed: 300ms
78 | 


--------------------------------------------------------------------------------
/transitions.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Transitions"
4 | menu_list: "transitions-list"
5 | description: "define how an HTML element transitions between states"
6 | ---
7 | 
8 | {% include collections/transitions.html %}
9 | 


--------------------------------------------------------------------------------
/typography.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: collection
3 | collection_name: "Typography"
4 | menu_list: "typography-list"
5 | description: "define the color, size, spacing, and shape of text"
6 | ---
7 | 
8 | {% include collections/typography.html %}
9 | 


--------------------------------------------------------------------------------