Instead of writing long media-queries declarations, you can use breakpoints <a href="/docs/features/directives">directives</a>. You can either use the default breakpoints or create your own.
You will get auto-completion will using TypeScript, even with custom breakpoints.
<h2 id="table-of-contents"><a href="#table-of-contents" aria-hidden="true" tabindex="-1"></a>Table of Contents</h2>
<ul>
<li><a href="#default-breakpoints">Default breakpoints</a></li>
<li><a href="#creating-custom-breakpoints">Creating custom breakpoints</a></li>
</ul>
<h2 id="default-breakpoints"><a href="#default-breakpoints" aria-hidden="true" tabindex="-1"></a>Default breakpoints</h2>
Below are the default breakpoints keys and values, which are simply short-hands:
<pre><code class="hljs language-typescript">// @media (min-width: 640px)
$sm: '640px'
// @media (min-width: 768px)
$md: '768px'
// @media (min-width: 1024px)
$lg: '1024px'
// @media (min-width: 1280px)
$xl: '1280px'
// @media (min-width: 1536px)
$xxl: '1536px'</code></pre>
To use a breakpoint, simply write his name, and give it an object containing the rules for this breakpoint:
<pre><code class="hljs language-typescript">css({
 flexDirection: 'column',
 $lg: {
 flexDirection: 'row',
 },
});</code></pre>
This code will generate the following CSS:
<pre><code class="hljs language-css">.nifty-1yoq70y {
 flex-direction: column;
}
@media (min-width: 1024px) {
 .nifty-1yoq70y {
 flex-direction: row;
 }
}</code></pre>
<h2 id="creating-custom-breakpoints"><a href="#creating-custom-breakpoints" aria-hidden="true" tabindex="-1"></a>Creating custom breakpoints</h2>
Custom breakpoints are simple key-value objects. The key must start by a <code>$</code> since it is used as a <a href="/docs/directives">directive</a>.
Once your breakpoint object is created, pass it as the value of the <code>breakpoints</code> property of your <code>NiftyOptions</code>:
<pre><code class="hljs language-typescript">const breakpoints = {
 $phone: '640px',
 $tablet: '768px',
 $desktop: '1024px',
};

export const { css } = createNifty({
 breakpoints,
 // Same as
 // breakpoints: breakpoints,
});</code></pre>
Use it the same way:
<pre><code class="hljs language-typescript">css({
 flexDirection: 'column',
 $desktop: {
 flexDirection: 'row',
 },
});</code></pre>

Breakpoints


## Table of Contents

## flexCenter 

Layout with flex and center horizontally and vertically.



### Output
 ```css
display: flex;
justify-content: center;
align-items: center;
```



### Example 
```typescript
import { flexCenter } from '@niftycss/css';

css({
    ...flexCenter
});
```

## flexColumn 

Layout with flex and align in column.



### Output
 ```css
display: flex;
flex-direction: column;
```



### Example 
```typescript
import { flexColumn } from '@niftycss/css';

css({
    ...flexColumn
});
```

## flexRow 

Layout with flex and align in row.



### Output
 ```css
display: flex;
flex-direction: row;
```



### Example 
```typescript
import { flexRow } from '@niftycss/css';

css({
    ...flexRow
});
```


Flex

Grid


The `@niftycss/css` package provides many CSS utilities and helpers. It's optional but can help you create styles faster.

## Installation
Install the `@niftycss/css` package with your package manager of choice:

```bash
# Yarn
yarn add @niftycss/css

# NPM
npm install @niftycss/css
```


Installation

## Table of Contents

## marginX 

Add the same margin amount in the X direction, which represents left and right.



### Output
 ```css
margin-left: <amount>;
margin-right: <amount>;
```



### Parameters
- ` amount` The margin amount


### Example 
```typescript
import { marginX } from '@niftycss/css';

css({
 ...marginX`10px`,
 ...marginX`${inset}`
});
```

## marginY 

Add the same margin amount in the X direction, which represents top and bottom.



### Output
 ```css
margin-top: <amount>;
margin-bottom: <amount>;
```



### Parameters
- ` amount` The margin amount


### Example 
```typescript
import { marginY } from '@niftycss/css';

css({
 ...marginY`10px`,
 ...marginY`${inset}`
});
```

Margin

## Table of Contents

## calc 

Generate the [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc())
method with the given expression.



### Output
 ```css
calc(<expression>)
```



### Parameters
- ` expression` The expression to calculate


### Example 
```typescript
import { calc } from '@niftycss/css';

css({
 ...calc`100vw - 50px`,
 ...calc`100vh - ${navHeight}`
});
```

## box 

Generate a box of `width` x `height | width` with the given width and height.
You can omit the height to generate a square of `width` x `width`



### Output
 ```css
width: <width>;
height: <height | width>
```



### Parameters
- ` width` The width of the box
- ` height` (optional) The height of the box


### Example 
```typescript
import { box } from '@niftycss/css';

css({
 ...box`40px`,
 ...box('2rem', '1rem')
});
```

Methods

## Table of Contents

## paddingX 

Add the same padding amount in the X direction, which represents left and right.



### Output
 ```css
padding-left: <amount>;
padding-right: <amount>;
```



### Parameters
- ` amount` The padding amount


### Example 
```typescript
import { paddingX } from '@niftycss/css';

css({
 ...paddingX`10px`,
 ...paddingX`${inset}`
});
```

## paddingY 

Add the same padding amount in the X direction, which represents top and bottom.



### Output
 ```css
padding-top: <amount>;
padding-bottom: <amount>;
```



### Parameters
- ` amount` The padding amount


### Example 
```typescript
import { paddingY } from '@niftycss/css';

css({
 ...paddingY`10px`,
 ...paddingY`${inset}`
});
```

Padding


Instead of writing long media-queries declarations, you can use breakpoints [directives](/docs/features/directives). You can either use the default breakpoints or create your own.

You will get auto-completion will using TypeScript, even with custom breakpoints.

## Table of Contents

## Default breakpoints
Below are the default breakpoints keys and values, which are simply short-hands:

```typescript
//  @media (min-width: 640px)
$sm: '640px'
//  @media (min-width: 768px)
$md: '768px'
//  @media (min-width: 1024px)
$lg: '1024px'
//  @media (min-width: 1280px)
$xl: '1280px'
//  @media (min-width: 1536px)
$xxl: '1536px'
```

To use a breakpoint, simply write his name, and give it an object containing the rules for this breakpoint:
```typescript
css({
    flexDirection: 'column',
    $lg: {
        flexDirection: 'row',
    },
});
```

This code will generate the following CSS:
```css
.nifty-1yoq70y {
    flex-direction: column;
}
@media (min-width: 1024px) {
    .nifty-1yoq70y {
        flex-direction: row;
    }
}
```

## Creating custom breakpoints
Custom breakpoints are simple key-value objects. The key must start by a `$` since it is used as a [directive](/docs/directives).

Once your breakpoint object is created, pass it as the value of the `breakpoints` property of your `NiftyOptions`:

```typescript
const breakpoints = {
    $phone: '640px',
    $tablet: '768px',
    $desktop: '1024px',
};

export const { css } = createNifty({
    breakpoints,
    // Same as
    // breakpoints: breakpoints,
});
```

Use it the same way:
```typescript
css({
    flexDirection: 'column',
    $desktop: {
        flexDirection: 'row',
    },
});
```



NiftyCSS is easily extendible with plugins. There are very useful plugins created by Nifty, and others created by the community. Anyone can create a plugin, see [creating a plugin](#create-a-plugin).

## Table Of Contents

## Using plugins
To use a plugin, import it in your `nifty.ts` and add it to the `plugins` array of your `NiftyOptions` object:
```typescript
import { nifty } from '@nifty/core';
import awesome from 'nifty-plugin-awesome';

export const { css } = createNifty({
    plugins: [awesome],
});
```

If no errors are logged into the console, that means the plugins successfully registered! See below for a list of useful plugins.

## Plugins from NiftyCSS

### Autoprefixer
This plugin adds [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) to your CSS rules.

Install it with:

```bash
# Yarn
yarn add @niftycss/plugin-autoprefixer

# NPM
npm install @niftycss/plugin-autoprefixer
```

For this given CSS:

```typescript
css({
    transition: '200ms all linear',
    boxSizing: 'border-box',
    display: 'flex',
    color: 'blue',
});
```

The plugin will generate the following CSS properties:
```css
.nifty-140hxws {
    -webkit-transition: 200ms all linear;
    transition: 200ms all linear;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    color: 'blue';
}
```

This plugin uses the [inline-style-prefixer](https://github.com/robinweser/inline-style-prefixer) library. Huge thanks to Robin Weser for maintaining this library.
(Example taken from [README](https://github.com/robinweser/inline-style-prefixer#usage))

### !important
This plugin adds the `!important` modifier to any CSS rules. To mark a rule as important, simply add the `!` character at the end of the CSS value.

Install it with:

```bash
# Yarn
yarn add @niftycss/plugin-important

# NPM
npm install @niftycss/plugin-important
```

For this given CSS:

```typescript
css({
    flexDirection: 'row!',
});
```

The plugin will generate the following CSS properties:
```css
.nifty-140hxws {
    flexDirection: row !important;
}
```

## Plugins from the community


Plugins


In production (when the `NODE_ENV` environment variable is not set to `development`), Nifty will **minify** the CSS to reduce the size. This can reduce to up to **25%** the total size of the CSS.

Nifty will also make sure to not log debug in the console, even if `debug` in `NiftyOptions` is set to `true`.

> Nifty is not ready for production yet.


Production

You can use `props` to define style based on custom props declared at the usage-level, or component-level if you are using the [styled](/docs/features/styling#styled-api) API.

You will of course get auto-completion when you will use the prop style, but we recommend creating a `type` to also get auto-completion inside your style declaration. See [type-safety](#type-safety).

## Table of Contents

## With `css` API
To do so, you will need to update your `styleProvider` and change it to a callback wich takes one argument, the props, and returns the styles:

```typescript
const background = css(props => ({
 background: props.bg,
}))
```

To spectify the props when using the style, call the returned function with an object containing the props at the usage-level:

```tsx
<div class={background({ bg: 'red' })} />
```

## With `styled` API
Same as the `css` API, change your `styleProvider` the same way:

```typescript
const Box = styled('div', props => ({
 background: props.bg,
}))
```

Then, you can specify the styling props directly at the component level, same as any React props:

```tsx
<Box bg='red' />
```

## Type-safety
To add types-safety, you can create a `type` that specify the schema of the props:

```typescript
// css API
type Props = {
 size: string
};

const box = css<Props>(({ size }) => ({
 width: size,
 height: size,
 background: 'red',
}));

// styled API
type Props = {
 size: string
};

const Box = styled<Props>('div', ({ size }) => ({
 width: size,
 height: size,
 background: 'red',
}));
```

Styling props

## Table of Contents

## Basic styling
To create your first styles with NiftyCSS, create a new file named `nifty.ts` and start by importing the `nifty` method. You will need to provide a `NiftyOptions` object, but we will cover that later.

```typescript
import { nifty } from '@niftycss/core';

export const { css } = createNifty({});
```

As you can see, we used destructuration to get a `css` method, which will be used to create your styles. We also immediately export this method, to make it available on your project.

Then, use this `css` method to generate your first style. This will return you the class name corresponding to the styles you wrote.

Inside this method, you must provide a `style provider`, which is an object containing the styles you want to define (See [styling props](/docs/features/styling-props) for another use of the `style provider`). You will automatically get **auto-completion** from your IDE of all available CSS properties:

```typescript
import { css } from 'path/to/nifty.ts';

const style = css({
 backgroundColor: 'red',
 display: 'flex',
});
```

Then, to apply your newly created style, set the `class` name of your element to this `style` variable:
```html
// React
<div className={style}>
 // ...
</div>
```

That's it! Next, see how to use specific selectors underneath, or see how to use [themes](/docs/features/theming), [breakpoints](/docs/features/breakpoints) or [CSS utilities](/docs/features/css-utilities).

## Styled API
Nifty provides a `styled` API for React, inspired by [styled-components](https://styled-components.com/).

To use it, first, install the `@niftycss/react` package:

```bash
# Yarn
yarn add @niftycss/react

# NPM
npm install @niftycss/react
```

Then, replace your `createNifty` method by `createStyled` from this package. As you can see, we can get a `styled` function and we immediately export it:

```typescript
import { createStyled } from '@iftycss/react';

export const { css, styled } = createStyled({...}); 
```

To create a styled component, use this `styled` method, pass in first parameter the name of the HTML tag you want for this component and then a `styleProvider`:

```tsx
const Button = styled('button', {
 padding: '0.2rem 1rem',
 color: 'white',
 background: 'red',
});
// Use it as a normal React component
<Button>Hello</Button>
```

You can also define additional styles at the component-level with the `css` prop, to override or add styles on a per-component basis. You will get the same auto-completion:

```tsx
<Button>Hello</Button>
// Change the background for this button only
<Button css={{
 background: 'blue',
}}>Hello</Button>
```

Any `props` passed to the style component will be transmitted to the generated React component:

```tsx
<Button onClick={() => console.log('Clicked!')}>Hello</Button>
```

To define the style based on custom props, see [styling props](/docs/features/styling-props).

## Using class names or existing Nifty styles
To use any other class name along with your Nifty style, just add a string containing the classes after the `style provider`:

```typescript
css({
 display: 'flex',
}, 'pt-0 border-b');
```

You can also use an existing Nifty style here, to inherit it styles:
```typescript
const container = css({
 display: 'flex',
 margin: 'auto',
});

css({
 display: 'flex',
}, container);
```

It's also possible to combine Nifty styles and existing class name, since the `class provider` accept an array of strings:

```typescript
css({
 display: 'flex',
}, container, 'pt-0 border-b');
```

You can add any number of existing class names or Nifty styles.

## Targeting pseudo-classes/elements
To target any pseudo-class or pseudo-element, write its name, and create a new object to defines the styles:
```typescript
css({
 ':hover': {
 borderRadius: '2px', 
 },
 '::before': {
 content: '-',
 },
});
```

## Targeting selectors

### Class / id
To target a child component with the specified class / id, prefix it with a `.` for a class and a `#` for an id, and create a new object to defines the styles:

```typescript
css({
 borderColor: '@border',
 '.box': {
 borderColor: '@boxBorder',
 },
 '#container': {
 borderColor: '@containerBorder',
 },
});
```

### HTML elements
To target any child HTML element, prefix it with a `*`, and create a new object to defines the styles:

```typescript
css({
 listStyleType: 'none',
 '*li': {
 marginTop: '1rem',
 },
 '*li a': {
 color: '@link',
 },
});
```

### Attribute
To target an HTML attribute, write its name, and create a new object to defines the styles:

```typescript
css({
 '[href="https://example.org"]': {
 color: '@link',
 },
});
```

### Adjacent sibling
To target an adjacent sibling element, prefix it with a `+`, and create a new object to defines the styles:

```typescript
css({
 '+ p': {
 fontStyle: 'bold',
 },
});
```

### Child
To target a child element, prefix it with a `>`, and create a new object to defines the styles:

```typescript
css({
 '> li': {
 margin: '2rem',
 },
});
```

## Using media-queries
See [breakpoints](/docs/features/breakpoints).

## Using vendor prefixes
See [autoprefixer plugin](/docs/features/plugins#autoprefixer).

## Using `!important` modifier
See [important plugin](/docs/features/plugins#important).

Styling


By default, Nifty don't provide a default theme (unlike [breakpoints](/docs/features/breakpoints)).

## Table of Contents

## Creating a theme
A theme is a simple **key-value** object. To use your theme, pass it as the value of the `theme` property of your `NiftyOptions`:

```typescript
const theme = {
    bg: '#010101',
    fg: '#FFFFFF',
};

export const { css } = createNifty({
    theme,
    // Same as
    // theme: theme,
});
```

## Using a theme
To use your freshly created theme, append the `@` symbol and write the key of the theme value you want to use. Using TypeScript provides auto-completion for the theme keys:

```typescript
css({
    backgroundColor: '@bg',
    display: 'flex',
});
```

When Nifty will generate the CSS, the theme keys you wrote will automatically be transformed to the value of the current theme.

## Switching to another theme
To switch the current theme to another one (if you want white and dark theme support for instance), you can use the `setTheme` method from the `nifty` method. You can either pass the new theme object or use a function that gives you the current theme and return the new theme:

> Each theme variation should contain the same keys.

```typescript
const whiteTheme = {
    fg: '#FFFFFF',  
};

const darkTheme = {
    fg: '#000000',
};

export const { setTheme } = createNifty({
    theme: whitetheme,
});

// Set the new theme directly
setTheme(darkTheme);
// Set the new theme based on the current theme
setTheme(currentTheme => {
    
    return currentTheme === whiteTheme ? darkTheme : whiteTheme;
})
```


Theming


We use the [inline-style-prefixer](https://inline-style-prefixer.js.org/) library to automatically add vendor prefixes to your rules. Huge thanks to [Robin Weser](https://twitter.com/robinweser) for creating and maintaining this library.

Based on their documentation:
> It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.

> It will only add prefixes if a property still needs them in one of the above-mentioned versions.
Therefore, e.g. `border-radius` will not be prefixed at all.

List of supported browsers:
- Chrome: 55+
- Android (Chrome): 55+
- Android (Stock Browser): 5+
- Android (UC): 11+
- Firefox: 52+
- Safari: 9+
- iOS (Safari): 9+
- Opera: 30+
- Opera (Mini): 12+
- IE: 11+
- IE (Mobile): 11+
- Edge: 12+



Browser support


Currently, Nifty is only available through a [package manager](#installing-via-a-package-manager).

## Table of Contents

## Installing via a package manager
Install the `@niftycss/core` package with your package manager of choice:

```bash
# Yarn
yarn add @niftycss/core

# NPM
npm install @niftycss/core
```

Then, head over to [styling](/docs/features/styling) to learn how to create your first styles.

## Installing via a CDN
Not yet supported.

## Using with X
We have guides about how to use Nifty with popular frameworks and technologies.

The logic is roughly the same for each framework, so you can easily integrate Nifty with any other framework or library.

### Frameworks
- [NextJS](/docs/guides/nextjs) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ([Example code](https://github.com/QuiiBz/niftycss/tree/main/examples/nextjs))
- [Create-React-App](/docs/guides/create-react-app) &nbsp;&nbsp; ([Example code](https://github.com/QuiiBz/niftycss/tree/main/examples/create-react-app))
- [Gatbsy](/docs/guides/gatbsy) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ([Example code](https://github.com/QuiiBz/niftycss/tree/main/examples/gatbsy))
  
### Other technologies
- [TailwindCSS](/docs/guides/tailwindcss)



## Table of Contents

## Near-zero runtime
Coming soon

##  Benchmarks
Coming soon


Performances


Welcome to the documentation of **NiftyCSS**, a CSS-in-TS, framework-agnostic library to rapidly create reusable designs.

Head hover to [CSS-in-what?](#css-in-what) to get more informations about CSS-in-TS.

See [performances](/docs/getting-started/performances) to go deeper inside how NiftyCSS works.

## Table Of Contents

## Features

- ⚡️ Fast
  - [Near-zero runtime](/docs/getting-started/performances)
  - [SSR support](/docs/features/ssr)
  - [CSS utilities](/docs/css-utilities/installation)


- ⚗️ Framework-agnostic
  - Use with [Next.js](/docs/guides/nextjs), [CRA](/docs/guides/create-react-app), [Gatsby](/docs/guides/gatsby), [Tailwind](/docs/guides/tailwindcss)...
  - [`styled` API](https://niftycss.dev/docs/features/styling#styled-api)


- 🪄 Awesome DX
  - Type-safe [styles](https://github.com/frenic/csstype)
  - [Theming](/docs/features/theming) and [plugins](/docs/features/plugins)
  - [Responsiveness](/docs/features/breakpoints)

## CSS-in-what?
CSS-in-TS is the next generation of [CSS-in-JS](https://cssinjs.org/). It combines the power of CSS-in-JS and [TypeScript](https://www.typescriptlang.org/).

This allows for a better DX (developer experience) with type-safe styles: your IDE will alert you automatically if one of your CSS rules is wrong. And no need to install a third-party extension for your IDE - it's all thanks to TypeScript.

You also get powerful features like [theming](/docs/features/theming) with auto-completion of your theme keys, or auto-completion for [styling props](/docs/features/styling-props).

> You can still use NiftyCSS with plain JavaScript, however, it is not recommended.


Welcome


## Table of Contents

## SSR

## Example
You can find an example project using Create-react-app [here](https://github.com/QuiiBz/niftycss/tree/main/examples/create-react-app).


Using with Create-react-app


## Table of Contents

## SSR

## Example
You can find an example project using Gatsby [here](https://github.com/QuiiBz/niftycss/tree/main/examples/gatsby).


Using with Gatsby


## Table of Contents

## SSR

## Example
You can find an example project using Next.js [here](https://github.com/QuiiBz/niftycss/tree/main/examples/next).


Using with Next.js


You can easily use [TailwindCSS](https://tailwindcss.com) along with Nifty. To add Tailwind class to a Nifty style, do the same as if you were [using class names](/docs/features/styling#using-class-names-or-existing-nifty-styles).

Write them after the declaration of the styles in a `string`:

```typescript
css({
    background: '@bg',
}, 'p-4 rounded-full');
```

To keep all the styles from Tailwind when purging, you will need to add or modify the path to the files containing the Nifty styles in the `tailwind.config.js` file:

```typescript
// tailwind.config.js
module.exports = {
    // If the files with Nifty styles are in the
    // componentsfolder and are JavaScript files
    purge: ['./components/**/*.js'],
    // If the files with Nifty styles are in the
    // components folder and are TypeScript files
    purge: ['./components/**/*.ts'],
    // ...
};
```


getting started

features

css utilities

guides

getting started

features

css utilities

guides

Breakpoints

Table of Contents

Default breakpoints

Creating custom breakpoints