General mixins/general

px2em(px, [ref = 16px])
Convert a pixel size into em according to the reference.
px2rem(px, [ref = 10px])
Convert a pixel size into rem according to the reference.
rem-fs(px)
Convert a pixel size into rem with a px fallback. The html base font should be 10px (font-size: 62.5%)
crisp-font-smoothing()
Non-standard property which change the way the browser render the font.
use when letters should be rendered thinner (icons, dark background, some fonts, …).
see here for more details.
reset-form()
Try to reset the default input style
placeHolder(color)
Change an input placeholder text color
css-filter(properties)
Fix conflict with the build-in stylus saturate() function This mixin use the stylus unquote function, so properties has to be a string
blanc([opacity = 0.5])
Shortcut for rgba(white, .5)
noir([opacity = 0.5])
Shortcut for rgba(black, .5)
bg-cover()
Tile the background to the borders with background-size: cover
v-align()
Vertical align in a fixed height container
flex-row()
Flex-box row Compatibility issues: Adobe new flexbox article
stem([direction = "top", color = $h-components-border, width = .5em])
generate a stem that can be applied on pseudo elements The stem is not positioned
A brilliant stem example
percentCenter()
absolute center using this css-tricks trick

I'm centered without having a height defined

Type here to try !

angle2xy([angle = 0deg], [distance = 1])
Retreive x & y with an angle + distance
angle2topLeft([angle = 0deg], [distance = 1em; $$shiftX = false, $$shiftY = false])
Retreive top & left with an angle + distance
  • 0
  • 30
  • -45
  • 90
  • -90
  • 180
  • 585
circle()

Excessive round corner

Easing functions mixins/h-easing

  • linear

  • ease

  • ease-in

  • ease-out

  • ease-in-out

  • easeInQuad

  • easeInCubic

  • easeInQuart

  • easeInQuint

  • easeInSine

  • easeInExpo

  • easeInCirc

  • easeInBack

  • easeOutQuad

  • easeOutCubic

  • easeOutQuart

  • easeOutQuint

  • easeOutSine

  • easeOutExpo

  • easeOutCirc

  • easeOutBack

  • easeInOutQuad

  • easeInOutCubic

  • easeInOutQuart

  • easeInOutQuint

  • easeInOutSine

  • easeInOutExpo

  • easeInOutCirc

  • easeInOutBack

IE8 compatible mixins mixins/ie

bg-full-page(url)
Fit a background to 100% of the viewport
Shouldn't be used on html or body for ie8. See css-trick article.
t-matrix(a, c, b, d)
Matrix transform without translation. See matrix transform article on MDN

Buttons mixins/buttons

h-btn-color(light, medium, dark)
Give 3 colors to have all :active & :hover state background-colors
Text color (white or black) is defined with the darkest color
h-btn()
Main mixin to have a h-btn style
h-inset-button()
Main mixin to have a h-btn inset style

Forms mixins/form-elements

h-input()
Main mixin to have a h-input style
h-search()
Additional styles for search inputs
h-select()
Additional styles for select inputs
h-textarea()
Additional styles for textareas
h-fieldset()
Main mixin to have a h-fieldset style
h-label()
Main mixin to have a h-label style
h-legend()
Main mixin to have a h-legend style

Box mixins/box

h-box([border-color], [background-color], [shadow-color])
Main mixin to have a h-box style
h-box-inset([border-color], [background-color], [shadow-color])
Main mixin for having a inset h-box style

Scrollbox mixins/scrollbox

h-scrollbox()
Main mixin to have a scrollbox style