funkcss - npm Package Versions

[v0.10.0]

:wrench: I'm back (i guess)

Now every number has an unit, eg: percenage: 100p, vh: 100vh, etc.

Added:

• .g-[n] ⇢ gap: nx

Removed:

All spacing that is not related to the default-gaps.css.

• .fl-n ⇢ Remove all floats

[v0.9.2]

:wrench: Removing gulp

We're removing gulp and using npm as a build tool.

npm commands

• $ npm run setup
• $ npm run compile
• $ npm run minify
• $ npm run immutable
• $ npm run build

You can know more about it reading our contributing guide.

[v0.8.1]

:wrench: Hotfix

Change border helper (.bd) order in the file to be ovewrited by border width (.bdw-).

[v0.8.0]

:package: Now you can import funkcss as a npm module with postcss-import and similar tools.

:wrench: New npm command for development:

$ npm run setup
$ npm run watch
$ npm run compile
$ npm run test

Removing font-weight helper

Seeing from the beggining, funkcss now is a more abstract library than it was in the past. With this release we're removing the last helper (.fw-) with a "custom style" (custom style is the style which changes between different projects and devs. Color and typography are a good example).

Why are we removing font weight helper?

• Each project has its own font family with different font weight.
• Some people prefer font-weight with literal values (.fw-bold) instead of numbers (.fw-700).

Added:

• .bgpX-*, .bgpY-* ⇢ Background position y and x
• .d-n ⇢ display: none
• .fw-n ⇢ font-weight: none
• .fxw-wr ⇢ flex-wrap: wrap-reverse
• .fxw-nw ⇢ flex-wrap: nowrap
• .fxd-cr ⇢ flex-direction: column-reverse
• .fxd-r ⇢ flex-direction: row
• .fxd-rr ⇢ flex-direction: row-reverse

Changed:

• Reorder border helpers
• Move vertical-align helpers to layout file
• .bd-n ⇢ .bds-n

Removed:

• .clearfix
• .fw-n
• .fw-300
• .fw-600
• .fw-700
• .fw-500

[v0.7.0]

Added:

• .maw-100 ⇢ max-width: 100%
• .tov-e ⇢ text-overflow: ellipsis

Changed:

• .circle ⇢ .bdrs-50
• .fx-grow ⇢ .fxg-1
• .fx-shrink ⇢ .fxs-1
• .fx-none ⇢ .fx-n
• .flx-auto ⇢ .fxb-a Flex auto now is just flex-basis: auto

Removed:

• Responsive state helpers
• .reset
• .truncate
• .reset-font
• .reset-font-size

[v0.5.1]

Added:

• Travis CI
• funkcss-immutable

Changed:

• Border width prefix - .bd ⇢ .bdw
• Flex width prefix - .flx ⇢ .fx
• Order width prefix - .order ⇢ .ord
• Responsive state helpers more a11y, see

Removed:

• Align helpers. Use flexbox instead
• Remove .list-inline. You can use d-ib in each list item if you want the same effect