Coffeekraken.io 0.0.1

Helpers

Pull

.pull-left

Allows you to pull an element to the left side

.pull-right

Allows you to pull an element to the right side

Position

.relative

Set an element position as ```relative```

.absolute

Set an element position as ```absolute```

Float

.clear-left

Clear the left float on the element

.clear-right

Clear the right float on the element

.clear

Clear both float on the element

Pointer events

.pointer-events-none

Disable any pointer events

.pointer-events-all

Disable any pointer events

Display

.block

Display the element as ```block```

.inline

Display the element as ```inline```

.inline-block

Display the element as ```inline-block```

.show

Display the element as ```block```

.show-inline

Display the element as ```inline-block```

.hidden

Hide the element by setting the display to ```none```

.hide

Hide the element by setting the display to ```none```

.visible

Display the element by setting the visibility to ```visible```

.invisible

Display the element by setting the visibility to ```hidden```

.visually-hidden

Hide the element from display but not for SEO. This class use some tricks to make the element dissapear without using some ```display:none;```, etc...

Text

.t-hidden

Hide the text

.t-truncate

Hide the text

.t-left

Align the text to the left

.t-right

Align the text to the right

.t-center

Align the text to the center

.t-justify

Make the text justified

.t-lowercase

Transform the text to lowercase

.t-uppercase

Transform the text to uppercase

.t-capitalize

Capizalize the words

Font

.f-bold

Set the font-weight to ```bold```

.f-lighter

Set the font-weight to ```lighter```

.f-bolder

Set the font-weight to ```bolder```

.f-normal

Set the font-weight to ```normal```

.f-italic

Set the font-style to ```italic```

.f-oblique

Set the font-style to ```oblique```

.f-small-caps

Set the font-variant to ```small-caps```

Block

.block-center

Set the element to as ```display:block``` and center it

Sizes

.abs-cover

Set a size that will cover the entire parent surface by positionning it in absolute

.abs-contain

Set a size that will contain the entire parent surface by positionning it in absolute

Clearfix

.clearfix

Apply the micro clearfix on the element

.clearfix-float

Apply the float clearfix on the element

.clearfix

Apply the micro clearfix on the element

.clearfix-overflow

Apply the overflow clearfix on the element

.clearfix-facebook

Apply the facebook clearfix on the element

Ratios

.ratio-16-9

Keep a 16/9 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 16 * 9

.ratio-4-3

Keep a 4/3 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100% / 4 * 3

.ratio-1-1

Keep a 1/1 ratio on a particular element. Applied by setting height to 0 and paddingtop to 100%

Transitions

.no-transitions

Disable the transitions only on the element

.clear-transitions

Disable the transitions on the element and all his children

.tr-fast

.tr-default

.tr-slow

Animations

.no-animations

Disable the animations only on the element

.clear-animations

Disable the transitions on the element and all his children

Transmations

.no-transmations

Disable the animations and transitions only on the element

.clear-transmations

Disable the animations and transitions on the element and all his children

Filters

.fi-shadowed

.fi-blured