cssobj intro to make clearfix easier. code from The very latest clearfix reloaded

• npm

npm install cssobj-intro-clearfix

• bower

bower install cssobj-intro-clearfix

• basic usage:

When you need to put '<div class="clearfix nav">', but don't remember the clearfix hack, or don't want to copy/paste, use this plugin as below:

var clearfix = require('cssobj-intro-clearfix')

cssobj(
  { '.nav': {color: 'red'} },
  {
    intros: [
      clearfix()
    ]
  }
)

result css:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
.nav {
    color: red;
}

• use with plugin-extend

So your html can be as clean as: '<div class="nav">', no need to write clearfix in your tag.

var clearfix = require('cssobj-intro-clearfix')
var pluginExtend = require('cssobj-plugin-extend')

cssobj(
  { '.nav': {color: 'red', $extend: /\.clearfix\b/} },
  {
    intros: [
      clearfix()
    ],
    plugins: [
      pluginExtend()
    ]
  }
)

result css:

.clearfix:before,
.clearfix:after,
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.clearfix:after,
.nav:after {
    clear: both;
}
.clearfix,
.nav {
    *zoom: 1;
}
.nav {
    color: red;
}

Class name for the clearfix, should without dot

Whether use display: block instead of display: table

see: the different

Whether support oldIE (IE 6,7), by adding *zoom: 1; to container.