scales-utilities-clearfix v1.2.0

Clearfix Utility for Scales

A super minimal clearfix utility.

Requirements

Scales patterns use the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.

Installation

• NPM: npm install --save scales-utilities-clearfix
• Bower: bower install --save scales-utilities-clearfix

Usage

Clearfix is used to force an element to self-clear its floated children.

It should be extended in your sass files, but can be used as a class. I recommend only using it this way for debugging purposes in you browser dev tools.

.parent-class {
    @extend %clearfix
}

For debugging:

<div class="clearfix">
    <some floated elements>
</div>

Available Classes

• %clearfix - extend in your sass files
• .clearfix - For debugging, change with the $clearfix-class variable.

Available Variables

• $clearfix-class

The Scales Namespace Variable

All Scales patterns expose the $scales-namespace variable.

$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.

To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:

@import your-project/settings; // $scales-namespace is set in this file
@import your-project/scales; // Imports the Scales library
@import your-project/project // The rest of your project imports