@mediamonks/scss-utils

A SCSS library of mixins and functions that are used within projects.

Installation

yarn

$ yarn add -D @mediamonks/scss-utils

npm

npm i -S @mediamonks/scss-utils

Included functionalities

Mixins

• aspect-ratio
• font-face
• hover
• ir
• placeholder
• position
• offset
• pseudo
• respond-to
• size
• text-ellipsis
• arrow

Functions

• asset / image / font
• index
• em-size
• font-weight
• strip-unit
• remify
• fluid-size

Variables

• variables
  • $pathAsset: default project asset path (..)
  • $pathFont: default project font path (font, prefixed with $pathAsset)
  • $pathImage: default project image path (image, prefixed with $pathAsset)
  • $zLayout: default list of zIndex names (default)
  • $mediaQueries: default list of mediaQueries (empty list)
  • $minimumFluidSizeViewportWidth: default value for minumum viewport width used in fluid size (480px)
  • $maximumFluidSizeViewportWidth: default value for maximum viewport width used in fluid size (1440px)
  • $useRem: default value for using/converting pixels into REM units in fluid size (true)
  • $useClamp: default value for using clamp (otherwise max) in fluid size (true)
  • $ease{name}: List of easing bezier curves
    • $easeLinear
      • $ease
      • $easeIn
      • $easeOut
      • $easeInOut
      • $easeInQuad
      • $easeOutQuad
      • $easeInCubic
      • $easeOutCubic
      • $easeInQuart
      • $easeOutQuart
      • $easeInQuint
      • $easeOutQuint
      • $easeInSine
      • $easeOutSine
      • $easeInExpo
      • $easeOutExpo
      • $easeInCirc
      • $easeOutCirc
      • $easeInBack
      • $easeOutBack
      • $easeInOutQuad
      • $easeInOutCubic
      • $easeInOutQuart
      • $easeInOutQuint
      • $easeInOutSine
      • $easeInOutExpo
      • $easeInOutCirc
      • $easeInOutBack

Contribute

View CONTRIBUTING.md

Changelog

View CHANGELOG.md

Authors

View AUTHORS.md

LICENSE

MIT © MediaMonks