KARMA CSS


Absolute Positioning

Position an element absolutely

Mixin:

@mixin abs-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: absolute;
}

Usage:

.my-div {
    @include abs-position(0, 0, 0, 0);
}

Box Shadow

Create a box shadow

Mixin:

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
    @if $inset {
        box-shadow:inset $top $left $blur $color;
    } @else {
        box-shadow: $top $left $blur $color;
    }
}

Usage:

.my-div {
    @include box-shadow(5px, 5px, 10px, #000, false);
}

Buttons

There are four mixins used internally to create the button styles.

Three of which are used when creating the default .button and the additional coloured variations you define in the variables. The default variations are .button-primary and .button-secondary.

They can then be used within your own components.

// the base styles for a button
@mixin button {
    ...
}
// the styles required to create a coloured variation
@mixin button-color-variation($color, $background-color, $border-color) {
    color: $color;
    background-color: $background-color;
    border-color: $border-color;
}
// hover and focus state 
@mixin button-hover(
        $color: $font-color,
        $background-color: $button-default-bg-color, 
        $border-color: darken($border-color, $darken-hover-percent)) {
    &:hover,
    &:focus {
        color: $color;
        background-color: $background-color;
        border-color: $border-color;
        outline: 0;
    }
}
// create a button size variation
@mixin button-size(
        $padding-y: $button-padding-y, 
        $padding-x: $button-padding-x, 
        $font-size: $button-font-size) {
    font-size: $font-size;
    padding: $padding-y $padding-x;
}

Clearfix

Clear a floating element

Usage:

.my-div {
    @include clearfix;
}

Inputs

There are four mixins used internally to create the styles for inputs, selects and textareas.

They can then be used within your own components.

// the base styles for an input
@mixin input {
    ...
}
// input focus state 
@mixin input-focus(
        $background: $input-background-focus, 
        $border-color: $input-border-color-focus) {
    &:focus {
        background: $background;
        border-color: $border-color;
        outline: 0;
    }
}
// returns the width of the form fields based on the variable used
@mixin input-width {
    @if $input-use-full-width {
        width: 100%;
    } @else {
        max-width: 100%;
    }
}
// create an input size variation
@mixin input-size(
        $padding-y: $input-padding-y, 
        $padding-x: $input-padding-x, 
        $font-size: $input-font-size, 
        $border-width: .1rem) {
    font-size: $font-size;
    padding: $padding-y $padding-x;
    height: input-height($padding-y, $font-size, $border-width);
}

Margin & Padding

Apply a margin or padding to any axis.

Axis codeApplies to
'' (blank)all
xleft and right
ytop and bottom
ttop
rright
bbottom
lleft

Margin:

.my-style {
    // add a margin of 1rem (10px) to the left and right
    @include margin('x', 1rem);

    // add a margin of 1.5rem (15px) to the right only
    @include margin('r', 1.5rem);

    // add a margin of 3rem (30px) to all sides
    @include margin('', 3rem);
}

Padding:

.my-style {
    // add a padding of 1rem (10px) to the left and right
    @include padding('x', 1rem);

    // add a padding of 1.5rem (15px) to the right only
    @include padding('r', 1.5rem);

    // add a padding of 3rem (30px) to all sides
    @include padding('', 3rem);
}

Another use case which we some times use for these is to define a set of basic classes that we can use in our templates.

Include in your sass somewhere the following:

// Spacing
//––––––––––––––––––––––––––––––––––––––––––––––––––

$spacers: (     
    '0':    0,      
    'h':    .5rem,      
    '1':    1rem
) !default;

@each $infix, $size in $spacers {       
    @each $axis in ('', 'x', 'y', 't', 'r', 'b', 'l') { 
        .p#{$axis}-#{$infix} {      
            @include padding($axis, $size !important);      
        }       
        .m#{$axis}-#{$infix} {      
            @include margin($axis, $size !important);       
        }       
    }       
}

this will then generate all padding and margin classes on all axis you define like below:

.p-0{ padding:0 !important; }
.m-0{ margin:0 !important; }
.px-0{ padding-left:0 !important; padding-right:0 !important; }
.mx-0{ margin-left:0 !important; margin-right:0 !important; }
...

Though caution this will soon bloat out your css which is why we only include the mixins

Modernizr

Mixin:

// https://www.npmjs.com/package/modernizr

/*
 * Provide a hover effect for non-touch devices, turn it into an Active state for mobile, and maintain a fallback. 
 * @requires Modernizr as a JS dependency to get .no-touch classes
 * Adds styles via @content
 *
 * To apply it to a specific class, the mixin must be applied inside that class, like so (since it relies on the & operator):
 * .anchor {
 *     @include touch-hover() {
 *         color: purple; 
 *     }
 * }
 */
@mixin touch-hover() {
    .no-js &:hover, // the fallback
    .no-js &:focus, 
    .js.no-touch &:hover, // enhanced for no-touch
    .js.no-touch &:focus,
    .js.touch &:active { // relay same styles to active for touch devices
        @content; 
    }
}

Usage:

.anchor {
   @include touch-hover() {
       color: purple; 
   }
}
/*
 * Applies transition to element but removes it from the same element on touch devices.
 * Useful for making all pseudo hover effects on mobile instant on click.
 *
 * @requires Modernizr
 */
@mixin transition-no-touch($properties) {
    transition: $properties;
    .js.touch & { 
        transition: none; 
    }
}

Pseudo

Useful when adding either a ::before or ::after.

Mixin:

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

Usage:

.my-div {
    @include pseudo;
}

Push Auto

This will centrally align an element to the middle of the parent element like a .container does by setting the left and right margin to auto.

Usage:

.my-div {
    @include push--auto;
}

Triangle

Easily create a css triangle.

Usage:

// $direction: up, down, left, right
// mixin defaults:
// $size: 6px
// $position: absolute
// $round: false
.my-div:after {
    @include css-triangle($color, $direction, $size, $position, $round);
}

Truncate

Truncate some text at a defined width. Perfect to stop wrapping when required.

Usage:

.my-text {
    @include truncate(250px);
}

Vertical Align

Use to vertically align an element to the center

Mixin:

@mixin vertical-align($position: relative) {
    position: $position;
    top: 50%;
    transform: translateY(-50%);
}

Usage:

.my-div {
    @include vertical-align;
}