pole-foundation v1.0.1

Pole-foundation

Дизайн система тестируем молекулы и атомы

Установка

Прописать в консоли

npm i --save-dev pole-foundation

Использование

@import '~pole-foundation/scss';

/*
** Молекулы
*/
.text {
  &-largetitle {
    font-weight: variables.$font-b;
    font-size: variables.$font-s1;
    line-height: variables.$font-lh1;
  }
}
/*
** Атомы
*/
//font weight
$font-b: 700;
//font size
$font-s1: 36px;
//font line-height
$font-lh1: 44px;

Классы(молекулы) собираются из атомов(variables)

Пример

<h1 class="text-largetitle>
  Hello
</h1>

Использование variables

Пример

@use '~pole-foundation/scss/variables/code' as variables;

.test {
  color: $сolor-default-text-primary;

  &:hover {
    color: $сolor-default-text-black_hover;
  }
}