Mixins & Functions ​

Functions ​

• REM function. Transform PX to REM.

font-size: rem(12);

• Longshadow. Creates a long shadow given a specific color.

text-shadow: longshadow($orange-color-100);

Mixins ​

• Responsive Ratio. We use this for creating scalable elements (usually images or background images) that should maintain a specific ratio.

img {
    @include responsive-ratio(16, 9);
}

• Triangle. This mixin takes all the hassle out of creating that triangle you'll see coming out of most traditional tooltips, all without images, you just specify it's colour, how big you want it, the direction it's going to come out of your element and you're done.

div {
    @include triangle(16px, $greyscale-color-10, left);
}

• Hardware acceleration. Simple and effective trick for when you need to trigger hardware acceleration for some animation, keeping everything fast, slick and flicker-free. Use it with will-change for bests results.

div {
    @include hardware-acceleration;
}

• Fluid typography. This mixin lets you achieve a concept commonly known as fluid-type, the concept is to linearly increase (or decrease) font-size between 2 breakpoints.

.example {
    @fluid-typography(16px, 24px, 320px, 1200px)
}

That would scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 24px (at a 1200px viewport).

• Fluid properties. This mixin is the same as the previous but it lets you increase any property, not just font-size.

.example {
    @fluid-properties(16px, 24px, 320px, 1200px, padding-left, padding-right)
}

That would scale padding-left and padding-right from a minimum of 16px (at a 320px viewport) to a maximum of 24px (at a 1200px viewport).

• Text overflow ellipsis. Remember, you need to provide a max-width.

@include text-overflow-ellipsis;

• Transition height. Makes a transition height and smooth it.

@include transition-height;

• Button reset browser tap styles on mobile. Disables the blue tingling when clicking something on mobile.

@include button-reset-browser-tap-styles;

• Button reset styles. Reset browser button styles.

@include button-reset-styles;

• Disable user select. Disables text selection/highlighting of an element.

@include disable-user-select;