# instyll

**Repository Path**: mirrors_iansinnott/instyll

## Basic Information

- **Project Name**: instyll
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Instyll

Instill your stylus with super powers 🎨✨📈

A collection of mixins to make your Stylus trend upwards!

## Install

```
npm install --save instyll
```

Then `use` it wherever you use `stylus`:

```js
const instyll = require('instyll');

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .use(instyll());
}
```

## Mixins

#### `tween(properties, timing, easing)`

An alias for `transition`, but with better defaults and semantics (IMO). All arguments are optional. Defaults are:

```
properties = all
timing = 0.8s
easing = cubic-bezier(0, 0, 0.25, 1)
```

Example:

```stylus
.button
  background green
  tween()

  &:hover
    background red

.box
  position absolute
  top 0
  left 0
  transform translateX(0px)
  tween transform

  &:hover
    transform translateX(200px)

.boxFadeTwoSecondEase
  position absolute
  top 0
  left 0
  transform translateX(0px)
  opacity 1
  tween transform opacity, 2s, ease

  &:hover
    transform translateX(200px)
    opacity 0
```

#### `uninteractive()`

Completely disable an element. Useful for disabling form fields and UI controls.

Example:

```stylus
.disabled
  uninteractive()
```