README.md

View styleguide

[ITL] CSS utility_classes

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 too much.

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.

Problems with traditional (S)CSS / LESS / everthing:

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.

Thats where utility_classes steps in as a game changer.

Instead of doing this:

<div class="comment-wrapper-first">Padded comment</div>

.comment-wrapper-first {
    padding-left: 4px;
}

Do this:

<div class="pl4">Padded comment</div>

utility_classes with sass

Extend the classes of utility_classes in your own classes to minimize the code you actually need to write.

@import "~/itl-css-utility_classes/src/scss/itl-utility_classes";

Instead of doing this:

.comment-wrapper-first-disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
}

Do this:

.comment-wrapper-first-disabled {
    @include not-allowed;
    @include no-select;
}

Overriding colors and fonts

Variables are used for the colors and fonts. To override these simply have them set before importing utility_classes.

$redColor: crimson;
$titleFontFamily: "Lato";
$textFontFamily: "Open Sans";

@import "...itl-utility_classes";

Changelog

version	description	note(s)
v1.0.0	initial release	very basic utility classes
v2.0.0	refactoring	breaks previous dependencies as the folder structure has changed
v2.0.1	binding strength	added important to the responsiveness visibility classes
v2.0.2	link-underline fix	the underline should be done with text-decoration not borders
v2.0.3	specificity fix	specificity for responsiveness visibility improved
v2.1.0	specificity changed	specificity for responsiveness visibility changed / renewed
v2.1.1	added reset optional	itl-css_reset: overrides/improves default browser behaviour
v3.0.0	mixins > inheritance	change the inherited properties for mixins
	dont autoload fonts	Autoloading new typefaces from google API made optional
	allow overrides	Allow color and font overrides
v3.0.1	README update	How to use
v3.0.2	Specificity (button)	Specifity fix. No need for important everywhere.
v3.0.3	underline link	Removed the blue color on link underlines.

DISCLAIMER utility_classes was written for prototype development; Therefore try to use it only as such.