# jigsass-utils-clearfix

> Micro-clearfix utility class

Latest version **1.0.5** (published 2016-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install jigsass-utils-clearfix
pnpm add jigsass-utils-clearfix
yarn add jigsass-utils-clearfix
bun add jigsass-utils-clearfix
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2016-04-23 |
| First published | 2016-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TxHawks |
| Maintainers | txhawks |
| Keywords | jigsass, sass, scss, css, oocss, atomic css, eyeglass-module |

## Links

- npm: https://www.npmjs.com/package/jigsass-utils-clearfix
- Repository: https://github.com/txhawks/jigsass-utils-clearfix
- Homepage: https://txhawks.github.io/jigsass-utils-clearfix/
- npm.io page: https://npm.io/package/jigsass-utils-clearfix

## Dependencies (6)

- [jigsass-tools-mq](https://npm.io/package/jigsass-tools-mq.md) ^1.4.6
- [jigsass-tools-bidi](https://npm.io/package/jigsass-tools-bidi.md) ^1.1.6
- [jigsass-tools-maps](https://npm.io/package/jigsass-tools-maps.md) ^1.0.9
- [jigsass-tools-strings](https://npm.io/package/jigsass-tools-strings.md) ^1.3.2
- [jigsass-tools-selectors](https://npm.io/package/jigsass-tools-selectors.md) ^0.9.1
- [jigsass-tools-typography](https://npm.io/package/jigsass-tools-typography.md) ^1.2.3

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2016-04-23
- 1.0.3 — 2016-04-22
- 1.0.2 — 2016-04-07
- 1.0.1 — 2016-04-05
- 1.0.0 — 2016-04-05

## README

# JigSass Utils Clearfix
[![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url]   

 > Micro-clearfix utility class

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

## Installation

Using npm:

```sh
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).

```scss
@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:

```scss
// _c.foo.scss
.foo {
  @include jigsass-util(u-cf);

  ...
}
```

```scss
// _c.bar.scss
.bar {
  @include jigsass-util(u-clearfix);

  ...
}
```

```scss
// _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



[npm-image]: https://badge.fury.io/js/jigsass-utils-clearfix.svg
[npm-url]: https://npmjs.org/package/jigsass-utils-clearfix

[daviddm-image]: https://david-dm.org/TxHawks/jigsass-utils-clearfix.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/TxHawks/jigsass-utils-clearfix

---
_Source: https://npm.io/package/jigsass-utils-clearfix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._