itl-css-utility_classes
Version:
ITL css-utility_classes
326 lines (266 loc) • 13.1 kB
HTML
<html>
<head>
<title>ITL utility_classes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="generator" content="kss-node">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
<link rel="stylesheet" href="kss-assets/vendor/prism.css">
<link rel="stylesheet" href="kss-assets/css/kss.css">
<link rel="stylesheet" href="../css/itl-utility_classes.css">
</head>
<body class="kss-body">
<!-- header. -->
<header class="kss-header">
<section class="kss-header__inner">
<a class="kss-header__hamburger-trigger">
<div class="kss-header__hamburger"></div>
</a>
<h1 class="kss-header__title kss-title">ITL utility_classes</h1>
</section>
</header>
<!-- /header. -->
<!-- navigation. -->
<section class="kss-navigation">
<h1 class="kss-navigation__title kss-title">ITL utility_classes</h1>
<ul class="kss-nav">
<li class="kss-nav__item">
<a href="index.html">
<span class="kss-nav__ref">0</span>
<span class="kss-nav__name">Introduction</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-button.html">
<span class="kss-nav__ref">1</span>
<span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-colors.html">
<span class="kss-nav__ref">2</span>
<span class="kss-nav__name">Colors</span>
</a>
</li>
<li class="kss-nav__item">
<a class="kss-state-active" href="section-fonts.html">
<span class="kss-nav__ref">3</span>
<span class="kss-nav__name">Fonts</span>
</a>
<ul class="kss-nav__subnav">
<li class="kss-nav__item ">
<a href="section-fonts.html#kssref-fonts-afamilies">
<span class="kss-nav__ref">3.1</span>
<span class="kss-nav__name">Font families</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-fonts.html#kssref-fonts-effects">
<span class="kss-nav__ref">3.2</span>
<span class="kss-nav__name">Font effects</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-fonts.html#kssref-fonts-size">
<span class="kss-nav__ref">3.3</span>
<span class="kss-nav__name">Relative fontsizes</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-fonts.html#kssref-fonts-sizequick">
<span class="kss-nav__ref">3.4</span>
<span class="kss-nav__name">Quick fontsizes</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__item">
<a class="" href="section-layout.html">
<span class="kss-nav__ref">4</span>
<span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-lists.html">
<span class="kss-nav__ref">5</span>
<span class="kss-nav__name">Lists</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-responsiveness.html">
<span class="kss-nav__ref">6</span>
<span class="kss-nav__name">Responsiveness</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-sizes.html">
<span class="kss-nav__ref">7</span>
<span class="kss-nav__name">Sizes</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-table.html">
<span class="kss-nav__ref">8</span>
<span class="kss-nav__name">Table</span>
</a>
</li>
<li class="kss-nav__item">
<a class="" href="section-zmisc.html">
<span class="kss-nav__ref">9</span>
<span class="kss-nav__name">Misc</span>
</a>
</li>
</ul>
</section>
<!-- /navigation. -->
<!-- documentation. -->
<section class="kss-documentation">
<!--
display each section, in order.
the "root" element comes first in this loop, and can be detected using
the "#if @first" block as seen below.
-->
<header class="kss-section kss-section--depth-1" id="kssref-fonts">
<article class="kss-section__content">
<a class="kss-section__permalink" href="#kssref-fonts">
<h1 class="kss-section__item kss-section__item--depth-1">
<span class="kss-section__ref">3</span>
<span class="kss-section__name">Fonts</span>
</h1>
</a>
</article>
</header>
<section class="kss-section kss-section--depth-2" id="kssref-fonts-afamilies">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_fonts.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-fonts-afamilies">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">3.1</span>
<span class="kss-section__name">Font families</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin text <br/>@mixin title</code></p>
<ul>
<li>.title: sets a title font (default: Montserrat)</li>
<li>.text: sets a text font (default: Raleway)</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><h2>This is an example of a regular title</h2>
<p>This is an example of a regular paragraph</p>
<h2 class="title">This is an example of a prettier title</h2>
<p class="text">This is an example of a prettier paragraph</p></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><h2>This is an example of a regular title</h2>
<p>This is an example of a regular paragraph</p>
<h2 class="title">This is an example of a prettier title</h2>
<p class="text">This is an example of a prettier paragraph</p></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-fonts-effects">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_fonts.scss</span>, line <span>115</span></p>
<a class="kss-section__permalink" href="#kssref-fonts-effects">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">3.2</span>
<span class="kss-section__name">Font effects</span>
</h2>
</a>
<div class="kss-section__description"><ul>
<li>.thin: makes the fontweight 100</li>
<li>.light: makes the fontweight 300</li>
<li>.bold: makes the fontweight bold</li>
<li>.note: makes font smaller and cursive</li>
<li>.lowercase: makes text all lowercase</li>
<li>.uppercase: makes text all caps</li>
<li>.capitalize: capitalizes text</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><p class="text">Text that holds <span class="thin">very thin text</span> inside of it</p>
<p class="text">Text that holds <span class="light">Quite thin text</span> inside of it</p>
<p class="text">Text that holds <span class="note">Some sort of note</span> inside of it</span></p></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><p class="text">Text that holds <span class="thin">very thin text</span> inside of it</p>
<p class="text">Text that holds <span class="light">Quite thin text</span> inside of it</p>
<p class="text">Text that holds <span class="note">Some sort of note</span> inside of it</span></p></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-fonts-size">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_fonts.scss</span>, line <span>29</span></p>
<a class="kss-section__permalink" href="#kssref-fonts-size">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">3.3</span>
<span class="kss-section__name">Relative fontsizes</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin th(th)<br/>@mixin tb(bigger)<br/>@mixin ts(smaller)</code>
Use these classes to quicky change the fontsize <br/></p>
<ul>
<li>.tb5, .th0 - largest font</li>
<li>.tb4, .th1 - second largest font</li>
<li>.tb2, .th3 - fourth largest font</li>
<li>.ts1 - first font smaller than normal</li>
<li>.ts2 - second font smaller than normal</li>
<li>.ts3 - smallest font</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div>
<p class="tb3">This is a font size</p>
<p class="tb1">This is a font size</p>
<p class="ts1">This is a font size</p>
<p class="ts3">This is a font size</p>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div>
<p class="tb3">This is a font size</p>
<p class="tb1">This is a font size</p>
<p class="ts1">This is a font size</p>
<p class="ts3">This is a font size</p>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-fonts-sizequick">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_fonts.scss</span>, line <span>89</span></p>
<a class="kss-section__permalink" href="#kssref-fonts-sizequick">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">3.4</span>
<span class="kss-section__name">Quick fontsizes</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin smaller<br/>@mixin bigger</code></p>
<ul>
<li>.smaller: makes the font slightly smaller</li>
<li>.bigger: makes the font slightly bigger</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><p>Text that holds <span class="smaller">some smaller text</span> inside of it</p>
<p>Text that holds <span class="bigger">some bigger text</span> inside of it</p></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><p>Text that holds <span class="smaller">some smaller text</span> inside of it</p>
<p>Text that holds <span class="bigger">some bigger text</span> inside of it</p></code></pre>
</article>
</section>
</section>
<!-- /documentation. -->
<!-- scripts. -->
<script src="kss-assets/vendor/jquery.js"></script>
<script src="kss-assets/vendor/prism.js"></script>
<script src="kss-assets/js/kss.js"></script>
<!-- /scripts. -->
</body>
</html>