worko-mixins/README.md

Sass mixins to Worköholics dev team

# Worko Mixins

**Author:** Worköholics [workoholics.es](https://www.workoholics.es)

Sass mixins to resolve common CSS functionalities. This package is dependency of other packages developed by Worköholics

You can import each mixin file independently or import _mixins.scss if you need all the mixins of the package.

## Install

```console
npm install --save worko-mixins
```

## Usage

Import independently the file you need or import all mixins using ```_mixins.scss``` file.

```scss
// Enable mixins declared on transititons.scss
@import "./path/to/node_modules/worko-mixins/transitions.scss";
```

```scss
// Enable all mixins declared on the package
@import "./path/to/node_modules/worko-mixins/mixins.scss"
```


## Files

- **_animations.scss**: Mixins related with css animations
- **_grid.scss**: Mixins related with elements of the grid: columns, rows, containers...
- **_media-queries**: Mixins to manage css media queries and breakpoints
- **_transitions.scss**: Mixins to manage css transitions
- **_utils**: Mixins to solve different functionalities

- **_mixins.scss**: Import this file to use mixins of all files described above

## Animations

### keyframes

Add css keyframes supported by all browsers

```scss
@include keyframes(animationName) {
  0% { transform: translateY(0) }
  100%{ transform: translateY(-50%)}
}
```

### Media queries

Mixins to manage media queries

#### Default variables

You can override the default variables to manage your custom breakpoints. 

```scss
$breakpoint-sm: 576px !default; 
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;
```

#### mq_sm

Mixin to declare styles on screens bigger than ```$breakpoint-sm```

```scss
@include mq-sm {
  //your styles
}
```

#### mq_md

Mixin to declare styles on screens bigger than ```$breakpoint-md```

```scss
@include mq-md {
  //your styles
}
```

#### mq_lg

Mixin to declare styles on screens bigger than ```$breakpoint-lg```

```scss
@include mq-lg {
  //your styles
}
```

#### mq_xl

Mixin to declare styles on screens bigger than ```$breakpoint-xl```

```scss
@include mq-xl {
  //your styles
}
```

#### mq($breakpoint)

Mixin to declare styles on screens bigger than the value passed as ```$breakpoint``` parameter

**Parameters:**

| Arguments     | Description                        |
| ------------- | ---------------------------------- |
| $breakpoint   | Value of the breakpoint in pixels  |

<br/>

```scss
@include mq(500px) {
  //your styles
}
```

### Transitions

#### transition($args...)

Mixin to autoprefix transition property

**Parameters:**

| Arguments     | Description                |
| ------------- | -------------------------- |
| $args          | List of transition values  |

<br/>

```scss
@include transition(opacity .35s ease-in-out, color .5 ease-in);
```

#### defaultTransition

Mixin to add the transition "all .35 ease-in-out" prefixed

```scss
@include defaultTransition;
```

### Utils

#### prefixer($property, $value)

Mixin to auto-prefix properties

**Parameters:**

| Arguments     | Description                |
| ------------- | -------------------------- |
| $property     | Property to auto-prefix    |
| $value        | Value of the property      |

<br/>

```scss
@include prefixer(transform, translateY(-50%)); 
```

#### opacity($value)

| Arguments     | Description                               |
| ------------- | ----------------------------------------- |
| $value        | Value of the opacity property from 0 to 1 |

<br/>

Mixin to set opacity to elements compatible with different browsers

```scss
@include opacity(0.2); 
```

### Grid

#### Default variables

You can override the default variables to manage your custom properties. 

```scss
$cols: 12 !default;
$gutter: 15px !default;
$safe-area: 90px !default;
$safe-area-xs: 30px !default;
```

#### getWidthByCols($c)

Function that returns the value of the column width in percentage

**Parameters:**

| Arguments     | Description                               |
| ------------- | ----------------------------------------- |
| $c            | Column quantity from 0 to $cols           |

<br>

```scss
div {
  width: getWidthByCols(2);
}
```

#### getWidthByColsAndTotal($c, $total)

Function that returns the value of the column width in percentage from a total of columns

**Parameters:**

| Arguments     | Description                               |
| ------------- | ----------------------------------------- |
| $c            | Column quantity from 0 to $total          |
| $total        | Total of columns                          |

<br>

```scss
div {
  width: getWidthByColsAndTotal(2, 6);
}
```

#### setFlexWidth($width)

Mixin to set a fixed width element into the flexbox

**Parameters:**

| Arguments     | Description                               |
| ------------- | ----------------------------------------- |
| $width        | Width of the element                      |

<br>

```scss
@include setFlexWidth(80%);

//or

@include setFlexWidth(getWidthByCols(6)); 

//or

@include setFlexWidth(getWidthByColsAndTotal(6, 10)); 
```

### buildGrid($prefix)

Mixin to generate the css necesary to support the grid scaffolded with the attributes of ```.col``` elements

**Parameters:**

| Arguments     | Description                               |
| ------------- | ----------------------------------------- |
| $prefix       | Prefix of each breakpoint                 |

<br/>

```scss

.col {
  padding-left: $gutter;
  padding-right: $gutter;
  flex-grow: 1;

  @include buildGrid('xs');
  @include mq-sm {
    @include buildGrid('sm');
  }
  @include mq-md {
    @include buildGrid('md');
  }
  @include mq-lg {
    @include buildGrid('lg');
  }
  @include mq-xl {
    @include buildGrid('xl');
  }
}

```