scss boilerplate

install package

yarn add bo_style -D

usage

1. create config like this default-config
2. import package and your config

@import 'bo_style';
@import './your-config.scss';

simple example, how to use:

$rem-baseline: 18px;
$breakpoints: ('mob': 0, 'xs': 600px, 'xl': 1200px);

.div {
  @include width(('mob': 20px, 'xl': 300px));
  @include display(('mob': block, 'xs': flex));
}

compiles to:

.div {
  width: 1.111rem;
  display: block;
}

@media (min-width: 600px) {
  .div {
    display: flex;
  }
}

@media (min-width: 1200px) {
  .div {
    width: 16.667rem;
  }
}

list of mixins, functions and placeholders

_

• Main Mixin - _

mixins

• abs-center
• circle
• common
• container
• font
• margin-(x/y)
• padding-(x/y)
• pseudo
• wh

functions

• mq
• rem

helpers

• btn-reset
• full-size
• list-reset
• spread

TODO

• [ ] sassdoc
• [ ] mixins with breakpoints(wh, abs-center e.t.c)