itl-css-utility_classes
Version:
ITL css-utility_classes
520 lines (424 loc) • 20.9 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="" href="section-fonts.html">
<span class="kss-nav__ref">3</span>
<span class="kss-nav__name">Fonts</span>
</a>
</li>
<li class="kss-nav__item">
<a class="kss-state-active" href="section-layout.html">
<span class="kss-nav__ref">4</span>
<span class="kss-nav__name">Layout</span>
</a>
<ul class="kss-nav__subnav">
<li class="kss-nav__item ">
<a href="section-layout.html#kssref-layout-display">
<span class="kss-nav__ref">4.1</span>
<span class="kss-nav__name">Display types</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-layout.html#kssref-layout-eposition">
<span class="kss-nav__ref">4.2</span>
<span class="kss-nav__name">Positioning</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-layout.html#kssref-layout-eposition-placement">
<span class="kss-nav__ref">4.2.1</span>
<span class="kss-nav__name">Placement</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-layout.html#kssref-layout-flex">
<span class="kss-nav__ref">4.3</span>
<span class="kss-nav__name">Flex</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-layout.html#kssref-layout-spacing">
<span class="kss-nav__ref">4.4</span>
<span class="kss-nav__name">Spacing</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-layout.html#kssref-layout-zother">
<span class="kss-nav__ref">4.5</span>
<span class="kss-nav__name">Other</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-layout.html#kssref-layout-zother-centering">
<span class="kss-nav__ref">4.5.1</span>
<span class="kss-nav__name">Centering</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-layout.html#kssref-layout-zother-float">
<span class="kss-nav__ref">4.5.2</span>
<span class="kss-nav__name">Floating</span>
</a>
</li>
<li class="kss-nav__item kss-nav__item--grandchild">
<a href="section-layout.html#kssref-layout-zother-text">
<span class="kss-nav__ref">4.5.3</span>
<span class="kss-nav__name">Text align</span>
</a>
</li>
</ul>
</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-layout">
<article class="kss-section__content">
<a class="kss-section__permalink" href="#kssref-layout">
<h1 class="kss-section__item kss-section__item--depth-1">
<span class="kss-section__ref">4</span>
<span class="kss-section__name">Layout</span>
</h1>
</a>
</article>
</header>
<section class="kss-section kss-section--depth-2" id="kssref-layout-display">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>1</span></p>
<a class="kss-section__permalink" href="#kssref-layout-display">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">4.1</span>
<span class="kss-section__name">Display types</span>
</h2>
</a>
<div class="kss-section__description"><p>Quick classes to change the display</p>
<ul>
<li>.inline: display: inline</li>
<li>.inline-block: display: inline-block</li>
<li>.block: display: block</li>
<li>.hidden: display: none</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="h50 bg-blue">
<div class="inline-block p16 bg-red">Example</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="h50 bg-blue">
<div class="inline-block p16 bg-red">Example</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-layout-eposition">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>38</span></p>
<a class="kss-section__permalink" href="#kssref-layout-eposition">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">4.2</span>
<span class="kss-section__name">Positioning</span>
</h2>
</a>
<div class="kss-section__description"><p>Quick classes to change the position</p>
<ul>
<li>.fixed: position: fixed</li>
<li>.absolute: position: absolute</li>
<li>.relative: position: relative</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="relative bg-red p64">Relative container div
<div class="bg-yellow"> Normal div </div>
<div class="absolute t0 bg-blue">Absolute top div</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="relative bg-red p64">Relative container div
<div class="bg-yellow"> Normal div </div>
<div class="absolute t0 bg-blue">Absolute top div</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-layout-eposition-placement">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>65</span></p>
<a class="kss-section__permalink" href="#kssref-layout-eposition-placement">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">4.2.1</span>
<span class="kss-section__name">Placement</span>
</h3>
</a>
<div class="kss-section__description"><p><code class="block">@mixin absolute-cover</code>
<code class="block">@mixin pseudo-cover -- use on a :before or :after to cover node</code>
To change position of fixed and absolute elements use these classes:</p>
<p><ul></p>
<p><li>.t<X>: Changes the top value to X</li></p>
<p><li>.r<X>: Changes the right value to X</li></p>
<p><li>.b<X>: Changes the bottom value to X</li></p>
<p><li>.l<X>: Changes the left value to X</li></p>
<p><li>.absolute-cover: makes element cover its relative parent</li>
</ul></p>
<p>X should be in: [0, 4, 8, 16, 32, 64, 128, 256, 512]</p></div>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-layout-flex">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>115</span></p>
<a class="kss-section__permalink" href="#kssref-layout-flex">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">4.3</span>
<span class="kss-section__name">Flex</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin flex-center</code>
<code class="block">@mixin flex-column</code></p>
<ul>
<li>.flex: sets display to flex</li>
<li>.flex-column: creates a flex column</li>
<li>.flex-row: creates a flex row</li>
<li>.flex-shrink: makes the ele shrinkable to fit flexparent</li>
<li>.flex-grow: makes the ele consume empty space of flexparent</li>
<li>.flex-start: places the ele at start of flexparent</li>
<li>.flex-end: places the ele at the end of flexparent</li>
<li>.flex-center: places its child at the center</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="flex-row">
<div class="flex-center w100 bg-red">LOGO</div>
<div class="flex-grow flex-end bg-green p4"> Menu </div>
</div>
<div class="flex-row">
<div class="flex-column w100">
<div class="bg-blue">1</div><div class="flex-grow bg-green">2</div><div class="bg-blue">3</div>
</div>
<div class="flex-grow bg-yellow">
<h1 class="title h128">Test text</h1>
</div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="flex-row">
<div class="flex-center w100 bg-red">LOGO</div>
<div class="flex-grow flex-end bg-green p4"> Menu </div>
</div>
<div class="flex-row">
<div class="flex-column w100">
<div class="bg-blue">1</div><div class="flex-grow bg-green">2</div><div class="bg-blue">3</div>
</div>
<div class="flex-grow bg-yellow">
<h1 class="title h128">Test text</h1>
</div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-layout-spacing">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>184</span></p>
<a class="kss-section__permalink" href="#kssref-layout-spacing">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">4.4</span>
<span class="kss-section__name">Spacing</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin space-between</code>
<code class="block">@mixin space-around</code></p>
<ul>
<li>.space-between: justify-content: space-between</li>
<li>.space-around: justify-content: space-around</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="space-between bg-eee">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div>
<div class="space-around bg-gray">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="space-between bg-eee">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div>
<div class="space-around bg-gray">
<button class="button">cta1</button><button class="button">cta2</button><button class="button">cta3</button>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-layout-zother">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>217</span></p>
<a class="kss-section__permalink" href="#kssref-layout-zother">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">4.5</span>
<span class="kss-section__name">Other</span>
</h2>
</a>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-layout-zother-centering">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>223</span></p>
<a class="kss-section__permalink" href="#kssref-layout-zother-centering">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">4.5.1</span>
<span class="kss-section__name">Centering</span>
</h3>
</a>
<div class="kss-section__description"><p><code class="block">@mixin flex-center</code></p>
<ul>
<li>.m-auto: absolute centering (block in block)@child</li>
<li>.m0-auto: horizontal center (block in block)@child</li>
<li>.center: horizontal center (inline in block)@parent</li>
<li>.flex-center: centers everything @parent</li>
<li>.items-center: horizontal centering baseline@parent</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="flex-center wp100 h200 bg-red">
<div class="bg-white w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
<div class="absolute absolute--fill m-auto bg-red w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
<div class="m0-auto bg-red w16 hp100"></div>
</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="flex-center wp100 h200 bg-red">
<div class="bg-white w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
<div class="absolute absolute--fill m-auto bg-red w16 h16"></div>
</div>
<div class="relative inline-block w200 h200 bg-blue">
<div class="m0-auto bg-red w16 hp100"></div>
</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-layout-zother-float">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>259</span></p>
<a class="kss-section__permalink" href="#kssref-layout-zother-float">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">4.5.2</span>
<span class="kss-section__name">Floating</span>
</h3>
</a>
<div class="kss-section__description"><ul>
<li>.float-left: float: left</li>
<li>.float-right: float: right</li>
</ul></div>
</article>
</section>
<section class="kss-section kss-section--depth-3" id="kssref-layout-zother-text">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_layout.scss</span>, line <span>275</span></p>
<a class="kss-section__permalink" href="#kssref-layout-zother-text">
<h3 class="kss-section__item kss-section__item--depth-3">
<span class="kss-section__ref">4.5.3</span>
<span class="kss-section__name">Text align</span>
</h3>
</a>
<div class="kss-section__description"><ul>
<li>.left-align: left aligns text</li>
<li>.right-align: right aligns text</li>
<li>.center: centers text</li>
</ul></div>
</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>