SCSS Stylize Toolbox

Grid mixin - intuitive grid system

This css grid system is based on percentage for getting a maximum of flexibility. The ordered parameters are "selector" (optional), "sized box" (they can be many if no selector was provided), and then "min-width" (optional) for the "@media-query". If the first parameter is a string with other or more characters than hyphen "-" or numbers, the grid will apply on a child selector and you need to pass just one other size parameter after.
The "sized box" parameter can be just one number corresponding to percentage or marginLeft-width-marginRight (eg: 1-98-1).
If you add margins you'll have to handle them on following queries.
Let's take a complete example:
body>header>h1>a{
    @?include grid(*, 2-96-2); //mobile first
    @?include grid(100     ,1-48-1, 1-48-1, 480px); //from 480px
    @?include grid(1-51-1  ,1-21-1, 1-21-1, 768px); //from 768px
}
            

Icon mixin

Icon is a Font Awesome mixin implementation without css class, and so, lighter. a.css3{
    @?include icon(css3);
}
            

The list of icons can be found on official Font Awesome documentation.

Helpers mixin

Here is a list of some helpers from bootstrap 3. There is some vendors prefix in the lot.

  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-timing-function
  • backface-visibility
  • border-bottom-radius
  • border-left-radius
  • border-right-radius
  • border-top-radius
  • box-shadow
  • box-sizing
  • button-size
  • button-variant
  • clearfix
  • content-columns
  • form-control-focus
  • gradient-directional
  • gradient-horizontal
  • gradient-horizontal-three-colors
  • gradient-radial
  • gradient-striped
  • gradient-vertical
  • gradient-vertical-three-colors
  • hyphens
  • img-responsive
  • img-retina
  • input-size
  • nav-divider
  • opacity
  • perspective
  • perspective-origin
  • placeholder
  • reset-filter
  • resizable
  • rotate
  • rotateX
  • rotateY
  • scale
  • scaleX
  • scaleY
  • skew
  • sr-only
  • sr-only-focusable
  • tab-focus
  • transform-origin
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • transition-transform
  • translate
  • translate3d
  • user-select
tags: