CSS Fluid Width Video
Example :
<div class="video-content">
<!-- YouTube video code-->
<iframe width="560" height="349" src="http://www.youtube.com/embed/THEVIDEOID" frameborder="0" allowfullscreen></iframe>
</div>
Example :
<div class="video-content">
<!-- YouTube video code-->
<iframe width="560" height="349" src="http://www.youtube.com/embed/THEVIDEOID" frameborder="0" allowfullscreen></iframe>
</div>
To test retina display, just adjust the screen pixel ratio.
(Tested on Chrome Version 56)
2010 ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟
2020 † ‡ • ‣ ․ ‥ … ‧
2030 ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿
2040 ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆
2050 ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞
Sizes : em and px
By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like
Standard weights:
medium -> font-weight : 500;
semi-bold ->font-weight : 600;
Example
Example :
<style>
#parent-div { display: flex; }
#el1 { order: 3; }
#el2 { order: 2; }
#el3 { order: 1; }
</style>
1. COMPASS
Compass is a powerfull command line compiler
Install (Linux debian) : sudo apt-get install ruby-compass
Link : http://compass-style.org/help/documentation/command-line/
2. Koala
Available values of word-wrap property: normal, break-word, initial, inherit
Example : Disable HTML word wrapping using CSS
.your-class{white-space:nowrap;}