itl-css-utility_classes
Version:
ITL css-utility_classes
217 lines (203 loc) • 7.44 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="" 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">
<article class="kss-markdown">
<p><a href="https://itslogical.github.io/css-utility_classes/dist/styleguide/">View styleguide</a></p>
<h1 id="-itl-css-utility_classes">[ITL] CSS utility_classes</h1>
<p>This css file contains lots of handy classes that will improve the efficiency of prototyping webdevelopment.
Easily try out different sizes, spacings, colors, fonts all by changing a few classes and without messing around in the stylesheets to much.</p>
<p>This code was written under the context of trying new styles quick and easy on any website. e.g. whenever a client wants to see this and that, you dont need to destroy your stylesheets entirely, but just edit the utility_classes of the elements.</p>
<h3 id="problems-with-traditional-s-css-less-everthing-">Problems with traditional (S)CSS / LESS / everthing:</h3>
<p>Say we have a specific element that just needs a padding-left of 4px. Ideally one would create a new class for this element and then apply the styling to that class. Having lots of these unique elements on a website will rapidly make a mess out of your stylesheets. Iterations where you keep on changing the style of every element will add to this mess.. And before you know it, the stylesheet becomes unmanagable.</p>
<p>Thats where utility_classes steps in as a game changer.</p>
<p>Instead of doing this:</p>
<pre><code class="lang-html"><div class="comment-wrapper-first">Padded comment</div>
</code></pre>
<pre><code class="lang-css">.comment-wrapper-first {
padding-left: 4px;
}
</code></pre>
<p>Do this:</p>
<pre><code class="lang-html"><div class="pl4">Padded comment</div>
</code></pre>
<h3 id="utility_classes-with-sass">utility_classes with sass</h3>
<p>Extend the classes of utility_classes in your own classes to minimize the code you actually need to write.</p>
<p>Instead of doing this:</p>
<pre><code class="lang-css">.comment-wrapper-first-disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
</code></pre>
<p>Do this:</p>
<pre><code class="lang-css">.comment-wrapper-first-disabled {
@include not-allowed();
@include no-select();
}
</code></pre>
<h3 id="changelog">Changelog</h3>
<table>
<thead>
<tr>
<th>version</th>
<th>description</th>
<th>note(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>v1.0.0</td>
<td>initial release</td>
<td>very basic utility classes</td>
</tr>
<tr>
<td>v2.0.0</td>
<td>refactoring</td>
<td>breaks previous dependencies as the folder structure has changed</td>
</tr>
<tr>
<td>v2.0.1</td>
<td>binding strength</td>
<td>added important to the responsiveness visibility classes</td>
</tr>
<tr>
<td>v2.0.2</td>
<td>link-underline fix</td>
<td>the underline should be done with text-decoration not borders</td>
</tr>
<tr>
<td>v2.0.3</td>
<td>specificity fix</td>
<td>specificity for responsiveness visibility improved</td>
</tr>
<tr>
<td>v2.1.0</td>
<td>specificity changed</td>
<td>specificity for responsiveness visibility changed / renewed</td>
</tr>
<tr>
<td>v2.1.1</td>
<td>added reset optional</td>
<td>itl-css_reset: overrides/improves default browser behaviour</td>
</tr>
<tr>
<td>v3.0.0</td>
<td>mixins > inheritance</td>
<td>change the inherited properties for mixins</td>
</tr>
<tr>
<td></td>
<td>dont autoload fonts</td>
<td>Autoloading new typefaces from google API made optional</td>
</tr>
<tr>
<td></td>
<td>allow overrides</td>
<td>Allow color and font overrides</td>
</tr>
</tbody>
</table>
<p>DISCLAIMER utility_classes was written for prototype development; Therefore try to use it only as such.</p>
</article>
</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>