Utility Helpers

Below is a list of all the utilites and their description within Karma CSS.

Alignment

`align-top`	Vertically align to the top
`align-bottom`	Vertically align to the bottom
`align-middle`	Vertically align to the middle
`align-baseline`	Vertically align to the baseline

Clearfix

clearfix Clear a floating element

Colour

Note

The colour helpers are created from the colours defined within the variables. By adding more, these will also be created as helpers.

The below are just a selection:

white
black
primary
secondary

You can also get a colour by using the provided function. See the colours section for more details.

`b-white`	Sets the background color to white
`b-black`	Sets the background color to black
`b-primary`	Sets the background color to primary
`b-secondary`	Sets the background color to secondary
`c-white`	Sets the text color to white
`c-black`	Sets the text color to black
`c-primary`	Sets the text color to primary
`c-secondary`	Sets the text color to secondary

Cursor

`disabled`	Show the `not-allowed` cursor
`move`	Show the `move` cursor
`pointer`	Show the `pointer` cursor

Display

`d-block`	Display as a block element
`d-hidden`	Display as a hidden element, includes `[x-cloak]` for alpine.js
`d-flex`	Display as a flex element
`d-grid`	Display as a grid element
`d-inline`	Display as an inline element
`d-inline-block`	Display as an inline block element
`d-inline-flex`	Display as an inline flex element
`d-table`	Display as a table element
`d-table-cell`	Display as a table-cell element

Flex

Note

Use all the below with d-flex on the container of the items to be flexed.

A good resource on flex can be found at css-tricks.com.

`flex-row`	Sets the direction to row
`flex-column`	Sets the direction to column
`flex-row-reverse`	Sets the direction to row reverse
`flex-column-reverse`	Sets the direction to column reverse

`justify-content-start`	Justify child items to start
`justify-content-end`	Justify child items to end
`justify-content-center`	Justify child items to center
`justify-content-between`	Justify child items to between
`justify-content-around`	Justify child items to end

`align-items-start`	Align child items to start
`align-items-end`	Align child items to end
`align-items-center`	Align child items to center
`align-items-basline`	Align child items to basline
`align-items-stretch`	Align child items to stretch

`flex-nowrap`	Single-line which may cause the container to overflow
`flex-wrap`	Multi-lines, direction is defined by `flex-direction`
`flex-wrap-reverse`	Multi-lines, opposite to direction defined by `flex-direction`

Float

`pull-left`	Float an element to the left
`pull-right`	Float an element to the right

Image

img-fluid Make an image responsive and use the full width but no more

Lists

`list-style-none`	Remove bullets from lists `ul` and `ol`
`list-style-reset`	Remove list style, padding and margin from lists `ul` and `ol`

Overflow

`noscroll`	Sets overflow to hidden
`scroll-x`	Allow scrolling horizontally when required

Position

`fixed`	Sets position to fixed
`relative`	Sets position to relative
`absolute`	Sets position to absolute

Print

no-print Hides this element when printing

Sizing

`full-height`	Sets the height to 100%
`full-visual-height`	Sets the height to 100% if the visual height
`full-width`	Sets the width to 100%
`max-full-width`	Sets the maximum width to 100%

Spacing

`margin-zero`	Sets margin to zero
`m-auto`	Sets margin to auto
`mt-auto`	Sets margin top to auto
`mr-auto`	Sets margin right to auto
`mb-auto`	Sets margin bottom to auto
`ml-auto`	Sets margin left to auto
`push-auto`	Sets margin left and right to auto

Text

`text-left`	Sets text alignment to left
`text-right`	Sets text alignment to right
`text-center`	Sets text alignment to center
`text-just`	Sets text alignment to justify
`strong`	Sets font weight as `$strong-font-weight`
`lead`	Sets font weight to `$lead-font-weight`
`muted`	Sets the opacity as `$muted-opacity`
`nowrap`	Stops the text from wrapping
`small`	Sets the font size to `$small-font-size`
`uppercase`	Makes the text uppercase
`text-shadow`	Applies a shadow to the text

Transform

`flip-x`	Flips an element on its horizontal axis
`flip-y`	Flips an element on its vertical axis
`flip-both`	Flips an element on both axis

Transition

preload-transitions Sets all transitions to none, tipically used during page loads then removed when loaded to stop a flickering effect. See usage below.

<body class="preload-transitions">
    <!-- place at end of body -->
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded",function(){
            let node = document.querySelector(".preload-transitions");
            node.classList.remove("preload-transitions");
        });
    </script>
</body>

Visibility

Note

The below depends on the configured grid breakpoints xs, sm, md, lg, xl

For more details on breakpoints see the grid section.

`hidden-xs`	Hide this element on the xs breakpoint only
`hidden-sm`	Hide this element on the sm breakpoint only
`hidden-md`	Hide this element on the md breakpoint only
`hidden-lg`	Hide this element on the lg breakpoint only
`hidden-xl`	Hide this element on the xl breakpoint only
`hidden-xs-down`	Hide this element on the xs breakpoint and lower
`hidden-sm-down`	Hide this element on the sm breakpoint and lower
`hidden-md-down`	Hide this element on the md breakpoint and lower
`hidden-lg-down`	Hide this element on the lg breakpoint and lower
`hidden-xl-down`	Hide this element on the xl breakpoint and lower
`hidden-xs-up`	Hide this element on the xs breakpoint and higher
`hidden-sm-up`	Hide this element on the sm breakpoint and higher
`hidden-md-up`	Hide this element on the md breakpoint and higher
`hidden-lg-up`	Hide this element on the lg breakpoint and higher
`hidden-xl-up`	Hide this element on the xl breakpoint and higher