Theming

Create a customizable text.

Example :
use Drupal\Component\Render\FormattableMarkup;
$text = new FormattableMarkup('My name is @name', ['@name' => "The name"]);

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.

All views templates can be overridden with a variety of names, using the view, the display ID of the view, the display type of the view, or some combination thereof.

Media Print Emulate on Chrome

(Tested on Chrome Version 56)

HTML Unicode symbols From : 2000 To:2BFF

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

Create a custom module (here : example)

For active themes by route you first have to define a service in your $module.services.yml file:

On example.services.yml

Add:

Standard weights:

medium -> font-weight : 500;
semi-bold ->font-weight : 600;

Font Face

Example