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