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" class="kss-fullscreen-mode"> <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 is-fullscreen"> <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-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> </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>