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
}

Dependencies

• wocss-settings-defaults