| 1 | # nano-css
|
|---|
| 2 |
|
|---|
| 3 | [![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
|
|---|
| 4 |
|
|---|
| 5 | __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation) CSS-in-JS library__ that you can actually use in production.
|
|---|
| 6 | __Motto of `nano-css` is simple__: *create the smallest possible CSS-in-JS library and provide all features of any other library through addons.*
|
|---|
| 7 |
|
|---|
| 8 | - __Only [0.5 Kb](https://bundlephobia.com/result?p=nano-css@1.15.3)__ in base configuration, *e.g. [`styled-components`](https://github.com/styled-components/styled-components) is [15.1Kb](https://bundlephobia.com/result?p=styled-components@3.2.5)*
|
|---|
| 9 | - __Library-agnostic__ — use it standalone, with React, Preact, Vue.js, or any other library
|
|---|
| 10 | - __Isomorphic__ — render on server and browser, generates stable class names, and re-hydrates
|
|---|
| 11 | - __Performant__ — [*simply the fastest library*](https://github.com/streamich/CSS-IN-JS-Benchmarks/blob/master/RESULT.md); does not create wrapper components, does not use inline styles or inline `<style>` elements, but caches all styles for re-use and injects CSS using `.insertRule()` for performance
|
|---|
| 12 | - __`@media` queries__ and __animation `@keyframes`__ are supported
|
|---|
| 13 | - __Auto-prefixes__ your styles
|
|---|
| 14 | - __Extract CSS__ into external style sheet
|
|---|
| 15 | - __Public domain__ — [Unlicense license](./LICENSE)
|
|---|
| 16 |
|
|---|
| 17 | > For pre-configured simple-to-use package see [`nano-theme`](https://github.com/streamich/nano-theme), which builds on top of `nano-css`.
|
|---|
| 18 |
|
|---|
| 19 |
|
|---|
| 20 | ## Reference
|
|---|
| 21 |
|
|---|
| 22 | - [Installation](./docs/Installation.md)
|
|---|
| 23 | - [Addons](./docs/Addons.md)
|
|---|
| 24 | - [`put()`](./docs/put.md) — [*demo!*](https://codesandbox.io/s/nkovxrzyv4)
|
|---|
| 25 | - [`rule()`](./docs/rule.md) — [*demo!*](https://codesandbox.io/s/oxlj92m1m9)
|
|---|
| 26 | - [`drule()`](./docs/drule.md) — [*demo!*](https://codesandbox.io/s/9jq5zmm91p)
|
|---|
| 27 | - [`sheet()`](./docs/sheet.md) — [*demo!*](https://codesandbox.io/s/wyw093m7kw)
|
|---|
| 28 | - [`dsheet()`](./docs/dsheet.md) — [*demo!*](https://codesandbox.io/s/q7rx4981vq)
|
|---|
| 29 | - [`jsx()`](./docs/jsx.md) — [*demo!*](https://codesandbox.io/s/5y63x88504)
|
|---|
| 30 | - [`useStyles()`](./docs/useStyles.md) — [*demo!*](https://codesandbox.io/s/o5k9jjo306)
|
|---|
| 31 | - [`withStyles()`](./docs/withStyles.md) — [*demo!*](https://codesandbox.io/s/5k3jvkk31l)
|
|---|
| 32 | - [`decorator`](./docs/decorator.md) — [*demo № 1*](https://codesandbox.io/s/j442958125) and [*demo № 2*](https://codesandbox.io/s/3qjzv35941)
|
|---|
| 33 | - [`component`](./docs/component.md) — [*demo!*](https://codesandbox.io/s/yk8pk4v95j)
|
|---|
| 34 | - [`style()`](./docs/style.md) — [*demo!*](https://codesandbox.io/s/53qk3qkopn)
|
|---|
| 35 | - [`styled()()`](./docs/styled.md) — [*demo!*](https://codesandbox.io/s/w667y036p5)
|
|---|
| 36 | - [`hyperstyle()`](./docs/hyperstyle.md) — [*demo!*](https://codesandbox.io/s/wqny7z17x8)
|
|---|
| 37 | - [`stable`](./docs/stable.md)
|
|---|
| 38 | - [`atoms`](./docs/atoms.md) — [*demo!*](https://codesandbox.io/s/rlkxl6o9v4)
|
|---|
| 39 | - [`emmet`](./docs/emmet.md)
|
|---|
| 40 | - [`nesting`](./docs/nesting.md)
|
|---|
| 41 | - [`keyframes()`](./docs/keyframes.md)
|
|---|
| 42 | - [`hydrate()`](./docs/hydrate.md)
|
|---|
| 43 | - [`prefixer`](./docs/prefixer.md)
|
|---|
| 44 | - [`stylis`](./docs/stylis.md)
|
|---|
| 45 | - [`unitless`](./docs/unitless.md)
|
|---|
| 46 | - [`!important`](./docs/important.md)
|
|---|
| 47 | - [`:global`](./docs/global.md)
|
|---|
| 48 | - [`animate/*`](./docs/animations.md)
|
|---|
| 49 | - [`reset/*`](./docs/resets.md)
|
|---|
| 50 | - [`reset-font`](./docs/reset-font.md)
|
|---|
| 51 | - [`googleFont()`](./docs/googleFont.md)
|
|---|
| 52 | - [`limit`](./docs/limit.md)
|
|---|
| 53 | - [`amp`](./docs/amp.md)
|
|---|
| 54 | - [`virtual`](./docs/virtual.md)
|
|---|
| 55 | - [`spread`](./docs/spread.md)
|
|---|
| 56 | - [`array`](./docs/array.md)
|
|---|
| 57 | - [`snake`](./docs/snake.md) — [*demo!*](https://codesandbox.io/s/mo7n1857zj)
|
|---|
| 58 | - [`tachyons`](./docs/tachyons.md)
|
|---|
| 59 | - [`rtl`](./docs/rtl.md)
|
|---|
| 60 | - [`extract`](./docs/extract.md)
|
|---|
| 61 | - [`sourcemaps`](./docs/sourcemaps.md)
|
|---|
| 62 | - [`.units`](./docs/units.md)
|
|---|
| 63 | - [`cssom`](./docs/cssom.md)
|
|---|
| 64 | - [`vcssom`](./docs/vcssom.md)
|
|---|
| 65 | - [Presets](./docs/Presets.md)
|
|---|
| 66 | - [Server-side rendering](./docs/SSR.md)
|
|---|
| 67 |
|
|---|
| 68 |
|
|---|
| 69 | [npm-url]: https://www.npmjs.com/package/nano-css
|
|---|
| 70 | [npm-badge]: https://img.shields.io/npm/v/nano-css.svg
|
|---|
| 71 | [travis-url]: https://travis-ci.org/streamich/nano-css
|
|---|
| 72 | [travis-badge]: https://travis-ci.org/streamich/nano-css.svg?branch=master
|
|---|
