HStrap

px2em(px, [ref = 16px])

Convert a pixel size into em according to the reference.

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 !

circle()

Excessive round corner

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.

underline()

Use gradient to make an underline like in medium

this is a demo link

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

reset-form()

Try to reset the default input style

reset-select()

Try to reset the default selectbox style

placeHolder(color)

Change an input placeholder text color

Stylus don't let you have variables in media queries.
Here is a bunch of clumsy mixins to help solve this issue. Don't forget to close the query by calling media-query-end() Don't indent after calling the mixin

media-query-max(width)

@media screen and (max-width: width ) {

media-query-min(width)

@media screen and (min-width: width ) {

media-query-end()

}

example:

media-query-max(320)
main
  width auto
media-query-end()
          

• 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

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

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

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

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

h-scrollbox()

Main mixin to have a scrollbox style