Getting Started

• SASS toolkit is 7kb gzipped
• JS tools are individually transpiled via babel. There is no "opt into all".

Installation

Install magic-tricks via yarn or npm.

1$ npm i magic-tricks --save
2

Importing Scripts

All scripts are compiled and found in the lib directory.

1import capitalize from 'magic-tricks/lib/capitalize';
2import centsToPrice from 'magic-tricks/lib/centsToPrice';
3
4capitalize('sup') // Sup
5centsToPrice(100) // '$1.00'
6

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 for more info.

1// Configuration
2@import '~magic-tricks/sass/config';
3
4//                                          //
5// === Put Configuration Overrides Here === //
6//                                          //
7
8// Mixins
9@import '~magic-tricks/sass/mixins';
10
11// CSS Reset
12@import '~magic-tricks/sass/reset';
13
14// Utilities
15@import '~magic-tricks/sass/utils/alignment';
16@import '~magic-tricks/sass/utils/background';
17@import '~magic-tricks/sass/utils/border';
18@import '~magic-tricks/sass/utils/color';
19@import '~magic-tricks/sass/utils/cursor';
20@import '~magic-tricks/sass/utils/display';
21@import '~magic-tricks/sass/utils/float';
22@import '~magic-tricks/sass/utils/font-weight';
23@import '~magic-tricks/sass/utils/margin';
24@import '~magic-tricks/sass/utils/opacity';
25@import '~magic-tricks/sass/utils/overflow';
26@import '~magic-tricks/sass/utils/pointer-events';
27@import '~magic-tricks/sass/utils/position';
28@import '~magic-tricks/sass/utils/text-align';
29@import '~magic-tricks/sass/utils/transform';
30@import '~magic-tricks/sass/utils/transitions';
31@import '~magic-tricks/sass/utils/whitespace';
32@import '~magic-tricks/sass/utils/z-index';
33@import '~magic-tricks/sass/utils/flex';
34
35// Utility Components
36@import '~magic-tricks/sass/components/grid';
37@import '~magic-tricks/sass/components/grid-container';
38@import '~magic-tricks/sass/components/inline-grid';
39@import '~magic-tricks/sass/components/list';
40@import '~magic-tricks/sass/components/media';
41@import '~magic-tricks/sass/components/spacer';
42@import '~magic-tricks/sass/components/visibility';
43