# bukwild-stylus-library

> Stylus utility mixins

Latest version **3.2.1** (published 2022-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install bukwild-stylus-library
pnpm add bukwild-stylus-library
yarn add bukwild-stylus-library
bun add bukwild-stylus-library
```

## 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 | 3.2.1 |
| Published | 2022-02-17 |
| First published | 2016-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Bukwild |
| Maintainers | weotch, jonjahr |
| Keywords | stylus |

## Links

- npm: https://www.npmjs.com/package/bukwild-stylus-library
- Repository: https://github.com/BKWLD/stylus-library
- Homepage: https://github.com/BKWLD/stylus-library#readme
- Issues: https://github.com/BKWLD/stylus-library/issues
- npm.io page: https://npm.io/package/bukwild-stylus-library

## Dependencies (2)

- [stylus-easing](https://npm.io/package/stylus-easing.md) ^1
- [stylus-type-utils](https://npm.io/package/stylus-type-utils.md) ^0

## Recent versions

- 3.2.1 (latest) — 2022-02-17
- 3.2.0 — 2022-01-24
- 3.1.0 — 2021-07-09
- 3.0.0 — 2021-03-02
- 2.4.0 — 2021-02-18
- 2.3.0 — 2020-10-05
- 2.2.2 — 2020-06-30
- 2.2.1 — 2020-06-23
- 2.2.0 — 2020-06-22
- 2.1.3 — 2020-02-19
- 2.1.2 — 2020-01-30
- 2.1.1 — 2020-01-24
- 2.1.0 — 2020-01-24
- 2.0.1 — 2020-01-14
- 2.0.0 — 2020-01-14
- … 14 more at https://npm.io/package/bukwild-stylus-library/versions

## README

# Bukwild Stylus Library

Components:

- **index.styl** - The package.json `main`, this glob loads all mixins from the "lib" directory.  It also imports other stylus npm dependencies.  These dependencies are generally functions and mixins that have utility for all projects.
- **lib/** - Contains .styl files that define functions / imports. None of these files should contain any css selectors.  Read the comments within the individual files for details.
- **boilerplate.styl** - CSS rules that are intended to be loaded after a CSS reset or normalize on a project.  Essentially, this is a set of global Bukwild conventions.

## Settings

See [index.styl](index.styl) for some default vars.

## Recommendations

- Install https://github.com/WICG/focus-visible

## Examples

#### Fluid

`fluid()` uses media queries + viewport units to scale property values between an upward and lower limit as the viewport is resized.

```styl
.btn
  fluid padding, 20
```

Padding will be 20px when the viewport is 1440px wide (`fluid-default-max-break`) and 14px (`fluid-auto-min-size-factor`) when the viewport is 375px wide (`fluid-default-min-break`), linearly interpolated in between.

```styl
.btn
  fluid padding, 20, 10
```

Padding will be 20px when the viewport is 1440px wide and **10px** when the viewport is 375px wide, linearly interpolated in between.

```styl
.btn
  fluid(padding, 20, 10, min-break: 768px)
```

Padding will be 20px when the viewport is 1440px wide and 10px when the viewport is **768px** wide, linearly interpolated in between.


```styl
.btn
  fluid(padding, 20, 10, min-break: 768px, max-break: 1024px)
```

Padding will be 20px when the viewport is **1024px wide** and 10px when the viewport is 768px wide, linearly interpolated in between.


```styl
body
  fluid(--site-pad, 20, 10)
.btn
  padding calc(10px + var(--site-pad))
```

Use fluid to set a CSS custom variable that can be used inside of a `calc`.

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