hexo-theme-sb

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Starter Project</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="kss-assets/kss.css"> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/foft.css"> </head> <body id="kss-node" > <div class="kss-sidebar kss-style"> <header class="kss-header"> <h1 class="kss-doc-title">Starter Project</h1> </header> <nav class="kss-nav"> <ul class="kss-nav__menu"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="./"> <span class="kss-nav__ref">0</span ><span class="kss-nav__name">Overview</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-typography.html"> <span class="kss-nav__ref">1</span><span class="kss-nav__name">Typography</span> </a> <ul class="kss-nav__menu-child"> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-headings"> <span class="kss-nav__ref ">1.1</span ><span class="kss-nav__name">Headings</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-paragraphs"> <span class="kss-nav__ref ">1.2</span ><span class="kss-nav__name">Paragraphs</span> </a> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-codeblock"> <span class="kss-nav__ref ">1.3</span ><span class="kss-nav__name">Code Block</span> </a> </li> </ul> </li> <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-signature.html"> <span class="kss-nav__ref">2</span><span class="kss-nav__name">Signature</span> </a> </li> </ul> </nav> </div> <article role="main" class="kss-main"> <div id="kssref-typography" class="kss-section kss-section--depth-1 "> <div class="kss-style"> <h1 class="kss-title kss-title--level-1"> <a class="kss-title__permalink" href="#kssref-typography"> <span class="kss-title__ref"> 1 <span class="kss-title__permalink-hash"> #Typography </span> </span> Typography </a> </h1> <p class="kss-toolbar"> <a href="#kssref-typography" data-kss-fullscreen="kssref-typography"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-typography.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-typography" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-typography" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>To achieve perfect vertical rhythm, we're using Modular Scale. <a href="http://www.modularscale.com/">http://www.modularscale.com/</a> <br> To achieve perfect fluid typography, we're using CSS Locks. <a href="https://fvsch.com/code/css-locks/">https://fvsch.com/code/css-locks/</a></p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <h1>Getting Ready: Planning And Metrics Link</h1> <p>Micro-optimizations are great for keeping performance on track, but it's critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.</p> <h2>Establish a performance culture.</h2> <p>In many organizations, front-end developers know exactly what common underlying problems are and what loading patterns should be used to fix them. However, as long as there is no alignment between dev/design and marketing teams, performance isn't going to sustain long-term. Study common complaints coming into customer service and see how improving performance can help relieve some of these common problems.</p> <p>Run performance experiments and measure outcomes — both on mobile and on desktop. It will help you build up a company-tailored case study with real data. Furthermore, using data from case studies and experiments published on WPO Stats can help increase sensitivity for business about why performance matters, and what impact it has on user experience and business metrics. Stating that performance matters alone isn't enough though — you also need to establish some measurable and trackable goals and observe them.</p> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><h1>Getting Ready: Planning And Metrics Link</h1> <p>Micro-optimizations are great for keeping performance on track, but it's critical to have clearly defined targets in mind — measurable goals that would influence any decisions made throughout the process. There are a couple of different models, and the ones discussed below are quite opinionated — just make sure to set your own priorities early on.</p> <h2>Establish a performance culture.</h2> <p>In many organizations, front-end developers know exactly what common underlying problems are and what loading patterns should be used to fix them. However, as long as there is no alignment between dev/design and marketing teams, performance isn't going to sustain long-term. Study common complaints coming into customer service and see how improving performance can help relieve some of these common problems.</p> <p>Run performance experiments and measure outcomes — both on mobile and on desktop. It will help you build up a company-tailored case study with real data. Furthermore, using data from case studies and experiments published on WPO Stats can help increase sensitivity for business about why performance matters, and what impact it has on user experience and business metrics. Stating that performance matters alone isn't enough though — you also need to establish some measurable and trackable goals and observe them.</p></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_typography.scss</code>, line 1 </div> </div> <section id="kssref-typography-headings" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-typography-headings"> <span class="kss-title__ref"> 1.1 <span class="kss-title__permalink-hash"> #Typography.Headings </span> </span> Headings </a> </h2> <p class="kss-toolbar"> <a href="#kssref-typography-headings" data-kss-fullscreen="kssref-typography-headings"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-typography-headings.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-typography-headings" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-typography-headings" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Headings are usually used as titles.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <h1>This is a heading h1</h1> <h2>This is a heading h2</h2> <h3>This is a heading h3</h3> <h4>This is a heading h4</h4> <h5>This is a heading h5</h5> <h6>This is a heading h6</h6> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><h1>This is a heading h1</h1> <h2>This is a heading h2</h2> <h3>This is a heading h3</h3> <h4>This is a heading h4</h4> <h5>This is a heading h5</h5> <h6>This is a heading h6</h6></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_typography.scss</code>, line 61 </div> </section> <section id="kssref-typography-paragraphs" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-typography-paragraphs"> <span class="kss-title__ref"> 1.2 <span class="kss-title__permalink-hash"> #Typography.Paragraphs </span> </span> Paragraphs </a> </h2> <p class="kss-toolbar"> <a href="#kssref-typography-paragraphs" data-kss-fullscreen="kssref-typography-paragraphs"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-typography-paragraphs.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-typography-paragraphs" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-typography-paragraphs" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Paragraphs are usualy used as body text.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <p>This is a paragraph.</p> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><p>This is a paragraph.</p></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_typography.scss</code>, line 46 </div> </section> <section id="kssref-typography-codeblock" class="kss-section kss-section--depth-2 "> <div class="kss-style"> <h2 class="kss-title kss-title--level-2"> <a class="kss-title__permalink" href="#kssref-typography-codeblock"> <span class="kss-title__ref"> 1.3 <span class="kss-title__permalink-hash"> #Typography.CodeBlock </span> </span> Code Block </a> </h2> <p class="kss-toolbar"> <a href="#kssref-typography-codeblock" data-kss-fullscreen="kssref-typography-codeblock"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-typography-codeblock.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> <a href="#kssref-typography-codeblock" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-typography-codeblock" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> <div class="kss-description"> <p>Code Blocks are usually used to display markup or code.</p> </div> </div> <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example </div> <div class="kss-modifier__example"> <pre> <code>font-size: rem(20px);</code> </pre> <div class="kss-modifier__example-footer"></div> </div> </div> <details class="kss-markup kss-style"> <summary> Markup </summary> <pre class="prettyprint linenums lang-html"><code data-language="html"><pre> <code>font-size: rem(20px);</code> </pre></code></pre> </details> <div class="kss-source kss-style"> Source: <code>components/_typography.scss</code>, line 99 </div> </section> </article>  <script src="kss-assets/kss.js"></script> <script src="kss-assets/scrollspy.js"></script> <script src="kss-assets/prettify.js"></script> <script src="kss-assets/kss-fullscreen.js"></script> <script src="kss-assets/kss-guides.js"></script> <script src="kss-assets/kss-markup.js"></script> <script> prettyPrint(); var spy = new ScrollSpy('#kss-node', { nav: '.kss-nav__menu-child > li > a', className: 'is-in-viewport' }); var kssFullScreen = new KssFullScreen({ idPrefix: 'kss-fullscreen-', bodyClass: 'kss-fullscreen-mode', elementClass: 'is-fullscreen' }); var kssGuides = new KssGuides({ bodyClass: 'kss-guides-mode' }); var kssMarkup = new KssMarkup({ bodyClass: 'kss-markup-mode', detailsClass: 'kss-markup' }); </script> <script src="/js/foftFontLoading.js"></script>  </body> </html>