README
This module is DEPRECATED
Now each mixin has its own module.
Mixins
The wocss-tools-mixins
module contains a few framework mixins that are required for using any of the rest of wocss.
Install using npm:
$ npm install --save wocss-tools-mixins
Usage
Bem constructor
Breakpoints
Simple media queries mixins.
from($size)
Styles take effect from the provided measure and above.
@include from('lg') { ... }
to($size)
Styles take effect from zero up to the provided measure.
@include to('md') { ... }
from-to($desde, $hasta)
When the screen size is between the two provided measure, the styles in the block will take effect.
@include from-to(500px, 800px) { ... }
Layout
A few mixins to help tame those layouts.
layout-center($max-width, $padding-x)
Center the element.
.container {
@include layout-center(1000px, 0);
}
layout-wrapper()
It makes an element a container as the container bootstrap.
.container {
@include layout-wrapper();
}
layout-block()
It makes an element a block.
.container {
@include layout-block();
}
Resets
reset-input()
Removes any styles that were previously set on a input.
.form-control {
@include reset-input();
// more code
}
reset-list()
Removes any styles that were previously set on a list, clearing out all the margins and padding that are there by default.
.items {
@include reset-list();
// more code
}
reset-link()
Removes any styles that were previously set on links, even that annoying text-decoration.
.article {
@include reset-link();
// more code
}