itl-css-utility_classes
Version:
ITL css-utility_classes
453 lines (375 loc) • 18.8 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="kss-state-active" href="section-colors.html">
<span class="kss-nav__ref">2</span>
<span class="kss-nav__name">Colors</span>
</a>
<ul class="kss-nav__subnav">
<li class="kss-nav__item ">
<a href="section-colors.html#kssref-colors-agradients">
<span class="kss-nav__ref">2.1</span>
<span class="kss-nav__name">Gradients</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-colors.html#kssref-colors-backgroundcolor">
<span class="kss-nav__ref">2.2</span>
<span class="kss-nav__name">Background-colors</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-colors.html#kssref-colors-backgroundstyle">
<span class="kss-nav__ref">2.3</span>
<span class="kss-nav__name">Background-style</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-colors.html#kssref-colors-border">
<span class="kss-nav__ref">2.4</span>
<span class="kss-nav__name">Border-colors</span>
</a>
</li>
<li class="kss-nav__item ">
<a href="section-colors.html#kssref-colors-font">
<span class="kss-nav__ref">2.5</span>
<span class="kss-nav__name">Font-colors</span>
</a>
</li>
</ul>
</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="" 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-colors">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>15</span></p>
<a class="kss-section__permalink" href="#kssref-colors">
<h1 class="kss-section__item kss-section__item--depth-1">
<span class="kss-section__ref">2</span>
<span class="kss-section__name">Colors</span>
</h1>
</a>
<div class="kss-section__description"><p>The primary colors. <br/>
<span class="note">Colors can all be appended with '--faded' to lower the opacity.</span></p>
</div>
<ul class="kss-parameters">
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#1abc9c; Turqoise
</p>
<code class="kss-parameters__name">color(turq)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#2ecc71; Weed Green
</p>
<code class="kss-parameters__name">color(green)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#3498db; Ballz Blue
</p>
<code class="kss-parameters__name">color(blue)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#9b59b6; Really Purple
</p>
<code class="kss-parameters__name">color(purple)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#34495e; Midnight Black
</p>
<code class="kss-parameters__name">color(black)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#f1c40f; Asian Yellow
</p>
<code class="kss-parameters__name">color(yellow)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#e67e22; Mandarin Orange
</p>
<code class="kss-parameters__name">color(orange)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#e74c3c; Bread Red
</p>
<code class="kss-parameters__name">color(red)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#ecf0f1; Off White
</p>
<code class="kss-parameters__name">color(white)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#95a5a6; Very Gray
</p>
<code class="kss-parameters__name">color(gray)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#ffffff; Actually white
</p>
<code class="kss-parameters__name">color(blank)</code>
</li>
<li class="kss-parameters__item">
<p class="kss-parameters__description">
#eee; Another shade of gray
</p>
<code class="kss-parameters__name">color(eee)</code>
</li>
</ul>
</article>
</header>
<section class="kss-section kss-section--depth-2" id="kssref-colors-agradients">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_variables.scss</span>, line <span>62</span></p>
<a class="kss-section__permalink" href="#kssref-colors-agradients">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.1</span>
<span class="kss-section__name">Gradients</span>
</h2>
</a>
<div class="kss-section__description"><p>Some cool gradients</p>
<div class="bg-grad-turq flex-center w256 h100">turq</div>
<div class="bg-grad-green flex-center w256 h100">green</div>
<div class="bg-grad-blue flex-center w256 h100">blue</div>
<div class="bg-grad-purple flex-center w256 h100">purple</div>
<div class="bg-grad-black flex-center w256 h100">black</div>
<div class="bg-grad-yellow flex-center w256 h100">yellow</div>
<div class="bg-grad-orange flex-center w256 h100">orange</div>
<div class="bg-grad-red flex-center w256 h100">red</div>
<div class="bg-grad-white flex-center w256 h100">white</div>
<div class="bg-grad-gray flex-center w256 h100">gray</div>
<div class="bg-grad-blank flex-center w256 h100">blank</div>
<div class="bg-grad-eee flex-center w256 h100">eee</div></div>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-colors-backgroundcolor">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_colors.scss</span>, line <span>3</span></p>
<a class="kss-section__permalink" href="#kssref-colors-backgroundcolor">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.2</span>
<span class="kss-section__name">Background-colors</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin bgColor($color)</code>
To change the background-colors of elements use these classes</p>
<ul>
<li>.bg-<color>: changes the background color</li>
<li><ANY>--faded: lowers the opacity of the color
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="bg-grad-red p16">Red div</div>
<div class="bg-white p16">White div</div>
<div class="bg-blue p16">Blue div</div>
<div class="bg-blue--faded p16">Blue faded div</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="bg-grad-red p16">Red div</div>
<div class="bg-white p16">White div</div>
<div class="bg-blue p16">Blue div</div>
<div class="bg-blue--faded p16">Blue faded div</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-colors-backgroundstyle">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_colors.scss</span>, line <span>41</span></p>
<a class="kss-section__permalink" href="#kssref-colors-backgroundstyle">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.3</span>
<span class="kss-section__name">Background-style</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin bgStyle([shaded, darken, lighten, shadow])</code>
To change the background-colors of elements use these classes</p>
<ul>
<li>.bg-lighten: ligthens the entire element
<span class="note">Also lightens the fonts</span></li>
<li>.bg-darken: darkens the entire element
<span class="note">Also darkens the fonts</span></li>
<li>.bg-shaded (only for nested elements): darkens the element
<span class="note">Also darkens the fonts</span></li>
<li><ANY>--faded: lowers the opacity of the color
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><div class="bg-purple p16">Purple div<div class="bg-shaded p4">Shaded div</div></div>
<div class="bg-purple p16">Purple div<div class="bg-darken p4">Darkend div</div></div>
<div class="bg-blue bg-darken p16">Darkened Blue div</div>
<div class="bg-blue bg-lighten p16">Lightend Blue div</div></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><div class="bg-purple p16">Purple div<div class="bg-shaded p4">Shaded div</div></div>
<div class="bg-purple p16">Purple div<div class="bg-darken p4">Darkend div</div></div>
<div class="bg-blue bg-darken p16">Darkened Blue div</div>
<div class="bg-blue bg-lighten p16">Lightend Blue div</div></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-colors-border">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_colors.scss</span>, line <span>148</span></p>
<a class="kss-section__permalink" href="#kssref-colors-border">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.4</span>
<span class="kss-section__name">Border-colors</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin border($color)</code>
To add borders in various colours use the following classes:</p>
<ul>
<li>.underline-<color>: adds a 1px border at the top side of the element</li>
<li>.upperline-<color>: adds a 1px border at the bottom of the element</li>
<li>.border-<color>: adds a border around the element</li>
<li><ANY>--faded: lowers the opacity of the color
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><h1 class="underline-red">Red underlined text</h1>
<h1 class="upperline-purple">Purple underlined text</h1>
<h1 class="border-blue">Blue bordered text</h1></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><h1 class="underline-red">Red underlined text</h1>
<h1 class="upperline-purple">Purple underlined text</h1>
<h1 class="border-blue">Blue bordered text</h1></code></pre>
</article>
</section>
<section class="kss-section kss-section--depth-2" id="kssref-colors-font">
<article class="kss-section__content">
<p class="kss-section__source">Source: <span>_colors.scss</span>, line <span>112</span></p>
<a class="kss-section__permalink" href="#kssref-colors-font">
<h2 class="kss-section__item kss-section__item--depth-2">
<span class="kss-section__ref">2.5</span>
<span class="kss-section__name">Font-colors</span>
</h2>
</a>
<div class="kss-section__description"><p><code class="block">@mixin color($color)</code>
Use the color class directly to change the font color</p>
<ul>
<li>.<color>: font color</li>
<li>.<color>--faded: lowers the opacity of the color</li>
<li>.grad-<color>: gradient font color</li>
</ul></div>
</article>
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example</h1>
<div class="kss-modifiers__example"><h1 class="red">Red text</h1>
<h1 class="red--faded">faded blue text</h1>
<h1 class="grad-purple">Purple gradient text</h1></div>
</article>
<article class="kss-section__markup">
<pre><code class="language-markup"><h1 class="red">Red text</h1>
<h1 class="red--faded">faded blue text</h1>
<h1 class="grad-purple">Purple gradient text</h1></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>