KARMA CSS

Generic Helpers

Though we do not recommend over using helpers within templates as this can quickly become difficult to manage. You loose the ability of what a style sheet gives you which is one place to change all referenses of a style. But there will be the odd time where these are useful.

The below is a list of all the current helpers defined:

// Helpers
//––––––––––––––––––––––––––––––––––––––––––––––––––

/* clearfix */
.clearfix                   { @include clearfix; }

/* width and height */
.full-height                { height: 100%; }
.full-visual-height         { height: 100vh; }
.full-width                 { width: 100%; box-sizing: border-box; }
.max-full-width             { max-width: 100%; box-sizing: border-box; }

/* margin */
.margin-zero                { margin: 0; }

/* alignment */
.pull-left                  { float: left !important; }
.pull-right                 { float: right !important; }
.push-auto                  { @include push--auto; }

.text-left                  { text-align: left; }
.text-right                 { text-align: right; }
.text-center                { text-align: center; }
.text-just                  { text-align: justify; }

.align-top                  { vertical-align: top; }
.align-bottom               { vertical-align: bottom; }
.align-middle               { vertical-align: middle; }
.align-baseline             { vertical-align: baseline; }
.align-self-center          { align-self: center; }
.justify-content-center     { justify-content: center; }

/* positions */
.fixed                      { position: fixed; }
.relative                   { position: relative; }
.absolute                   { position: absolute; }

/* list */
.list-style-none            { list-style: none !important; }

/* typography */
.muted                      { opacity: .7; }
.nowrap                     { white-space: nowrap; }
.uppercase                  { text-transform: uppercase; }
.small                      { font-size: 80%; }
.lead                       { font-weight: 300; }
.text-shadow                { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }

/* dont increase lead font size on mobiles */
@media (min-width: 768px) { 
    .lead                   { font-size: 120%; } 
}

/* display */
.hidden                     { display: none !important; }
.inline                     { display: inline; }
.inline-block               { display: inline-block; }
.block                      { display: block; }
.flex                       { display: flex; }

/* display prefix to avoid confusion with any table.table */
.display-table              { display: table; }
.display-table-cell         { display: table-cell; }

/* images */
.img-fluid                  { max-width: 100%; height: auto; }

/* scroll */
.scroll-x                   { overflow-x: auto; }
.noscroll                   { overflow:hidden; }

/* cursors */
.disabled                   { cursor: not-allowed; }
.pointer                    { cursor: pointer; }

Colours

Within variables there are colors defined. below is an example:

// colors
$colors: (
        white:            rgb(255, 255, 255),
        black:            rgb(0, 0, 0),
        primary:          rgb(51, 195, 240),
        secondary:        rgb(240, 240, 240),
) !default;

Any colors that are defined here will generate helpers to set both the background-color and the color css properties.

From the above taking primary as an example will create the following:

.b-primary { background-color: #33c3f0; }
.c-primary { color: #33c3f0; }

Add further colors to generate your own.