Functional SASS Utilities

The following are a collection of atomic/functional styles designed to limit writing brand new CSS.

With 2 colors, 5 breakpoints, and all components enabled, the baseline size is 7kb gzipped.

Installation

Make sure you first have magic-tricks installed. Check out the Getting Started guide for more details.

1$ yarn install magic-tricks
2

In your main SASS entrypoint, paste the contents of sass/base.scss.

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

Configuration

To override any default config, import a config file just under the default config import. Some components use loops to create utility classes. You may reduce the size of your final bundle by reducing the number of breakpoints & colors. You can also comment out any components you do not need.

1// Configuration
2@import '~magic-tricks/sass/config';
3
4//                                          //
5// === Put Configuration Overrides Here === //
6//                                          //
7@import 'config';
8

1// example config.scss
2
3$sides: (
4    t : top,
5    b : bottom,
6    l : left,
7    r : right,
8    j : justify,
9);
10
11$alignments: (
12    l : left,
13    r : right,
14    c : center,
15);
16
17//
18// === Colors ===
19//
20
21$all-colors: (
22    white : #FFF,
23    black : #000,
24);
25
26//
27// === Breakpoints ===
28//
29
30$breakpoints : (
31    xs : 400px,
32    sm : 600px,
33    md : 800px,
34    lg : 1000px,
35    xl : 1200px,
36);
37
38//
39// === Components ===
40//
41
42// Spacer
43$spacer-max: 10;
44$spacer-size: 10px;
45
46// Grid
47$inline-grid-breakpoint: md;
48$inline-grid-column-size: 12;
49$inline-grid-gutter-mobile: 10px;
50$inline-grid-gutter-desktop: 10px;
51
52$inline-grid-gutter-extra: (
53    none : 0px,
54);
55
56$grid-padding-mobile: 10px;
57$grid-padding-desktop: 20px;
58$grid-max-width: 1920px;
59
60
61//
62// === Typography ===
63//
64
65$typography-breakpoint: md;
66
67$font-size-body-mobile: 16px;
68$font-size-body-desktop: 16px;
69
70$line-height-body-mobile: 24px;
71$line-height-body-desktop: 24px;
72

Reset

There is a complete CSS reset included in magic tricks. It resets all block/inline elements to remove padding/margin etc. It does not reset the button or input elements.

1@import '~magic-tricks/sass/reset';
2

Mixins

1@import '~magic-tricks/sass/mixins';
2

1@mixin font-smoothing() {}
2

Without font smoothing.

1@mixin multiLineEllipsis($line-height, $lines-to-show) {} // allows for a multi-line ellipsis
2

Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

1@mixin selection() {} // targets text selection for styling
2

Select me

1@mixin placeholder() {} // targets placeholder for styling
2

1@mixin clearfix() {} // clears all child floats
2

Without clear

With clear

1@mixin scrollbar($scrollbar-height: 5px, $scrollbar-padding: 0px, $thumb-color: black, $track-color: gray) {} // styles overflow scrollbars
2

Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.

1@mixin aspect-ratio($width: 1, $height: 1) {} // forces an aspect ratio for a div
2    .aspect__content {} // Use this class to display content within a forced aspect div
3

centered square

centered 2:1 rectangle

1@mixin body-font-size() {} // responsive body size with a single breakpoint
2

Next: JS