# magic-tricks

> Utility belt of magic tricks

Latest version **0.4.0** (published 2021-04-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install magic-tricks
pnpm add magic-tricks
yarn add magic-tricks
bun add magic-tricks
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2021-04-21 |
| First published | 2020-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 85.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Ian Hatcher-Williams |
| Maintainers | ian_dot_exe |

## Links

- npm: https://www.npmjs.com/package/magic-tricks
- Repository: git@github.com:gardener-nyc/magic-tricks
- npm.io page: https://npm.io/package/magic-tricks

## Recent versions

- 0.4.0 (latest) — 2021-04-21
- 0.3.2 — 2021-04-21
- 0.3.1 — 2020-11-10
- 0.3.0 — 2020-10-27
- 0.2.1 — 2020-10-12
- 0.2.0 — 2020-10-10
- 0.1.14 — 2020-05-10
- 0.1.13 — 2020-03-19
- 0.1.12 — 2020-03-19
- 0.1.11 — 2020-02-07
- 0.1.10 — 2020-02-02
- 0.1.9 — 2020-02-02
- 0.1.8 — 2020-02-01
- 0.1.7 — 2020-02-01
- 0.1.5 — 2020-02-01
- … 4 more at https://npm.io/package/magic-tricks/versions

## README

# magic tricks

A light bag of tricks to make building websites quick and fun.
* SASS toolkit is 7kb gzipped
* JS tools are _individually_ transpiled via babel. There is no "opt into all".

## Documentation

[https://magic-tricks.netlify.app/](https://magic-tricks.netlify.app/)


## Getting Started

### Installation

Install `magic-tricks` via yarn or npm.


```terminal
$ npm i magic-tricks --save
```

### Importing Scripts

All scripts are compiled and found in the `lib` directory. 

```js
import capitalize from 'magic-tricks/lib/capitalize';
import centsToPrice from 'magic-tricks/lib/centsToPrice';

capitalize('sup') // Sup
centsToPrice(100) // '$1.00'
```

### Importing SASS

All styles are found in the `sass` directory. You can electively import the utilities you'd like to use like so. _Make sure your compiler is set up to alias `~` to `node_modules`_. Check out [SASS](/docs/sass) for more info.

```scss
// Configuration
@import '~magic-tricks/sass/config';

//                                          //
// === Put Configuration Overrides Here === //
//                                          //

// Mixins
@import '~magic-tricks/sass/mixins';

// CSS Reset
@import '~magic-tricks/sass/reset';

// Utilities
@import '~magic-tricks/sass/utils/alignment';
@import '~magic-tricks/sass/utils/background';
@import '~magic-tricks/sass/utils/border';
@import '~magic-tricks/sass/utils/color';
@import '~magic-tricks/sass/utils/cursor';
@import '~magic-tricks/sass/utils/display';
@import '~magic-tricks/sass/utils/float';
@import '~magic-tricks/sass/utils/font-weight';
@import '~magic-tricks/sass/utils/margin';
@import '~magic-tricks/sass/utils/opacity';
@import '~magic-tricks/sass/utils/overflow';
@import '~magic-tricks/sass/utils/pointer-events';
@import '~magic-tricks/sass/utils/position';
@import '~magic-tricks/sass/utils/text-align';
@import '~magic-tricks/sass/utils/transform';
@import '~magic-tricks/sass/utils/transitions';
@import '~magic-tricks/sass/utils/whitespace';
@import '~magic-tricks/sass/utils/z-index';
@import '~magic-tricks/sass/utils/flex';

// Utility Components
@import '~magic-tricks/sass/components/grid';
@import '~magic-tricks/sass/components/grid-container';
@import '~magic-tricks/sass/components/inline-grid';
@import '~magic-tricks/sass/components/list';
@import '~magic-tricks/sass/components/media';
@import '~magic-tricks/sass/components/spacer';
@import '~magic-tricks/sass/components/visibility';
```

----

### Todo

- Add docs
- Test in prod
- Testing?

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