Nearly Past Midnight

    jigsass-utils-clearfix

    1.0.5 • Public • Published

    JigSass Utils Clearfix

    NPM version Dependency Status

    Micro-clearfix utility class

    Force an element to clear its floated child element and prevent its layout from collapsing.

    Installation

    Using npm:

    npm i -S jigsass-utils-clearfix

    Usage

    Import JigSass Utils Clearfix into your main scss file near its very end, together with all other utilities (utilities should always be the last to be imported).

    @import 'path/to/jigsass-utils-clearfix/scss/index';

    Importing the file will create any styles by itself. You would need to indicate that the .u-cf class should actually be generated in each component or object it is used in:

    // _c.foo.scss 
    .foo {
      @include jigsass-util(u-cf);
     
      ...
    }
    // _c.bar.scss 
    .bar {
      @include jigsass-util(u-clearfix);
     
      ...
    }
    // _c.baz.scss 
    .baz {
      @include jigsass-util(u-clearfix);
     
      ...
    }

    Doing so helps us a great deal with portability, as no matter where we import component or object partials, the correct utility classes will be generated. Think of it as a poor man's dependency management.

    Developer communication is also assisted by including "dependencies" wherever they are required, as anyone going through a partial, can easily understand how it should be marked up with just a glance.

    As far as bloat goes, just don't worry about it - the actual styles will only be generated once, at the location in the cascade where the Jigsass Clearfix partial was imported into the main file.

    License: MIT

    Install

    npm i jigsass-utils-clearfix

    DownloadsWeekly Downloads

    0

    Version

    1.0.5

    License

    MIT

    Last publish

    Collaborators

    • txhawks