Absolute

cssowl-absolute-inside

Mixin to position an element absolutely *inside* the bounding box.

.example-absolute-inside
  > .top-center
    +cssowl-absolute-inside(10px, 10px, top, center)
  > .middle-right
    +cssowl-absolute-inside(10px, 10px, middle, right)
  > .bottom-center
    +cssowl-absolute-inside(10px, 10px, bottom, center)
  > .middle-left
    +cssowl-absolute-inside(10px, 10px, middle, left)

cssowl-absolute-outside

Mixin to position an element absolutely *outside* the bounding box.

.example-absolute-outside
  > .top-center
    +cssowl-absolute-outside(10px, 10px, top, center)
  > .middle-right
    +cssowl-absolute-outside(10px, 10px, middle, right)
  > .bottom-center
    +cssowl-absolute-outside(10px, 10px, bottom, center)
  > .middle-left
    +cssowl-absolute-outside(10px, 10px, middle, left)

cssowl-absolute

Extendable placeholder and mixin to position an element absolutely.

.example-absolute
  +cssowl-absolute(20px false false 20px)

After

cssowl-after-absolute-inside

Mixin to add content with the `:after` pseudo selector and position it absolutely *inside* the bounding box.

.example-after-absolute-inside
  +cssowl-after-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

cssowl-after-absolute-outside

Mixin to add content with the `:after` pseudo selector and position it absolutely *outside* the bounding box.

.example-after-absolute-outside
  +cssowl-after-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

cssowl-after-absolute

Mixin to add content with the `:after` pseudo selector and position it absolutely.

.example-after-absolute
  +cssowl-after-absolute("*", 17px false false 20px)

cssowl-after-float

Mixin to add content with the `:after` pseudo selector and position it with `float: $float`.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
.example-after-float
  +cssowl-after-float("*", 4px 0 0 10px)

Before

cssowl-before-absolute-inside

Mixin to add content with the `:before` pseudo selector and position it absolutely *inside* the bounding box.

.example-before-absolute-inside
  +cssowl-before-absolute-inside("*", 5px, 5px, middle, center, 0, -2px)

cssowl-before-absolute-outside

Mixin to add content with the `:before` pseudo selector and position it absolutely *outside* the bounding box.

.example-before-absolute-outside
  +cssowl-before-absolute-outside("*", 5px, 5px, middle, right, -5px, -2px)

cssowl-before-absolute

Mixin to add content with the `:before` pseudo selector and position it absolutely.

.example-before-absolute
  +cssowl-before-absolute("*", 17px false false 20px)

cssowl-before-float

Mixin to add content with the `:before` pseudo selector and position it with `float: $float`.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
.example-before-float
  +cssowl-before-float("*", 4px 10px 0 0)

Coords

cssowl-coords-inside

Set an element's `top`, `right`, `bottom` and `left` properties to position it *inside* the bounding box.

.example-coords-inside
  width: 10px
  height: 10px
  position: absolute
  background: #59371f
  &.top-center
    +cssowl-coords-inside(10px, 10px, top, center)
  &.middle-right
    +cssowl-coords-inside(10px, 10px, middle, right)
  &.bottom-center
    +cssowl-coords-inside(10px, 10px, bottom, center)
  &.middle-left
    +cssowl-coords-inside(10px, 10px, middle, left)

cssowl-coords-outside

Set an element's `top`, `right`, `bottom` and `left` properties to position it *outside* the bounding box.

.example-coords-outside
  width: 10px
  height: 10px
  position: absolute
  background: #59371f
  &.top-center
    +cssowl-coords-outside(10px, 10px, top, center)
  &.middle-right
    +cssowl-coords-outside(10px, 10px, middle, right)
  &.bottom-center
    +cssowl-coords-outside(10px, 10px, bottom, center)
  &.middle-left
    +cssowl-coords-outside(10px, 10px, middle, left)

cssowl-coords

Set an element's `top`, `right`, `bottom` and `left` properties.

.example-coords
  +cssowl-coords(20px false false 20px)

Relative

cssowl-relative

Extendable placeholder and mixin to position an element relatively.

.example-relative
  +cssowl-relative(20px false false 20px)

Sprite

cssowl-sprite-absolute-inside

Place a sprite element with `position: absolute;` *inside* the bounding box.

.example-sprite-absolute-inside
  > .top-center
    +cssowl-sprite-absolute-inside($sprite-arrow-down, top, center)
  > .middle-right
    +cssowl-sprite-absolute-inside($sprite-arrow-left, middle, right)
  > .bottom-center
    +cssowl-sprite-absolute-inside($sprite-arrow-up, bottom, center)
  > .middle-left
    +cssowl-sprite-absolute-inside($sprite-arrow-right, middle, left)

cssowl-sprite-absolute-outside

Place a sprite element with `position: absolute;` *outside* the bounding box.

.example-sprite-absolute-outside
  > .top-center
    +cssowl-sprite-absolute-outside($sprite-arrow-up, top, center)
  > .middle-right
    +cssowl-sprite-absolute-outside($sprite-arrow-right, middle, right)
  > .bottom-center
    +cssowl-sprite-absolute-outside($sprite-arrow-down, bottom, center)
  > .middle-left
    +cssowl-sprite-absolute-outside($sprite-arrow-left, middle, left)

cssowl-sprite-absolute

Place a sprite element with `position: absolute;`.

.example-sprite-absolute
  +cssowl-sprite-absolute($sprite-owl-up, 10px 0 0 10px)

cssowl-sprite-after-absolute-inside

Add a sprite element with the `:after` pseudo selector and place it absolutely *inside* the bounding box.

Quia sint quis
.example-sprite-after-absolute-inside
  +cssowl-sprite-after-absolute-inside($sprite-arrow-down, top, center)

cssowl-sprite-after-absolute-outside

Add a sprite element with the `:after` pseudo selector and place it absolutely *outside* the bounding box.

Quia sint quis
.example-sprite-after-absolute-outside
  +cssowl-sprite-after-absolute-outside($sprite-arrow-up, top, center)

cssowl-sprite-after-absolute

Add a sprite element with the `:after` pseudo selector and place it absolutely.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after-absolute
  +cssowl-sprite-after-absolute($sprite-owl-up, 2px -20px false false)

cssowl-sprite-after-float

Add a sprite element with the `:after` pseudo selector and place it with the `float` attribute.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after-float
  +cssowl-sprite-after-float($sprite-owl-up, 0 5px 0 0)

cssowl-sprite-after

Add a sprite element with the `:after` pseudo selector.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-after
  +cssowl-sprite-after($sprite-owl-up, 0 0 -2px 10px)

cssowl-sprite-before-absolute-inside

Add a sprite element with the `:before` pseudo selector and place it absolutely *inside* the bounding box.

Quia sint quis
.example-sprite-before-absolute-inside
  +cssowl-sprite-before-absolute-inside($sprite-arrow-down, top, center)

cssowl-sprite-before-absolute-outside

Add a sprite element with the `:before` pseudo selector and place it absolutely *outside* the bounding box.

Quia sint quis
.example-sprite-before-absolute-outside
  +cssowl-sprite-before-absolute-outside($sprite-arrow-up, top, center)

cssowl-sprite-before-absolute

Add a sprite element with the `:before` pseudo selector and place it absolutely.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before-absolute
  +cssowl-sprite-before-absolute($sprite-owl-up, 2px false false -20px)

cssowl-sprite-before-float

Add a sprite element with the `:before` pseudo selector and place it with the `float` attribute.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before-float
  +cssowl-sprite-before-float($sprite-owl-up, 0 5px 0 0)

cssowl-sprite-before

Add a sprite element with the `:before` pseudo selector.

Quia sint quis nam et quia ducimus consequatur cumque.
.example-sprite-before
  +cssowl-sprite-before($sprite-owl-up, 0 10px -2px 0)

cssowl-sprite-display

Add a sprite element with its `width`, `height`, `background-image` and `background-position`.

Lorem ipsum dolor sit atem
.example-sprite-display
  +cssowl-sprite-display($sprite-owl-up)

cssowl-sprite-replace

Add a sprite element and hide the element's content.

Lorem ipsum dolor sit atem
.example-replace
  +cssowl-sprite-replace($sprite-owl-up)

Text

cssowl-text-hide

Extendable placeholder and mixin to hide an element's content.

Lorem ipsum dolor sit atem
.example-text-hide
  @extend %cssowl-text-hide