UI Library Starter

# _stylebase.styl

Глобальный медиатор стилей собирает не компилируемые /utils, компилируемые /core сущности и необходимые глобально кастомизации используемых сторонних модулей /libs (но, те которые позволяют это сделать без scoped - стоит разместить в SFC-обертках).

@/src/stylus/_stylebase.styl библиотеки:

// utils
@import "utils/_variables";
@import "utils/_placeholders";
@import "utils/_mixins";
@import "utils/_typography";

// core
@import "core/_base"; // normalize
@import "core/_animations";

Теперь можно использовать всю эту кухню на компонентах:

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

...
</style>

Это можно назвать «глобальными стилями-невидимками», что-то такое - они, с одной стороны - участвуют в правильном оформлении везде, но, при этом, «их не видно». Мы предоставляем глобальные константы гайдлайна и всю прочую мощь препроцессора всем компонентным системам - библиотеке и всем ее «читателям».

# Mixins and placeholders

UI Library Starter дает надежду на то, что в вашей разметке код будет полностью оптимальный и консистентный. Это способно сделать даже крупную систему из нескольких проектов базирующихся на одном визуальном языке - и полностью управляемой, и, в тоже время - гибкой.

WARNING

Не копируйте код кусками по компонентам - оптимизируйте очевидно одинаковые наборы в миксинах и плейсхолдерах!

@/src/stylus/utils/_placeholders.styl

@import "./_mixins";
@import "./_typography";

// Project placeholders
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////

// Utilities
//////////////////////////////////////////////////////

$flex--center
  display flex
  align-items center
  justify-content center

// Ellipsis to long string
$lineOverflow
  display block
  white-space nowrap
  overflow hidden
  text-overflow ellipsis

// Защита для больших блоков текста, например в гридах
$longLettersProtection
  -ms-word-break break-all
  word-break break-all
  word-break break-word
  -webkit-hyphens auto
  -moz-hyphens auto
  -ms-hyphens auto
  hyphens auto


// Elements
//////////////////////////////////////////////////////

// Buttons
$button
  user-select none
  cursor pointer
  border none
  text-decoration none
  white-space nowrap
  outline none
  text-align center
  transition background $effects.duration


// Forms

$input__background($background)
  background $background

  &:hover
    background lighten($background, $effects.amount)

  &:active,
  &:focus
    background darken($background, $effects.amount)

$input
  width 100%
  appearance none
  -webkit-appearance inherit
  border none
  padding-left $inputs.padding
  padding-right $inputs.padding
  $border-radius("swimming")
  $text("alena")
  $input__background($inputs.background--default)

  &__wrapper
    position relative
    width 100%
    padding-bottom 32px

    &--disabled
      pointer-events none
      cursor default
      user-select none
      $opacity("psy")

    &--error
      .input__control,
      .textarea__control
        color $colors.prestige
        $input__background($inputs.background--error)

      .vs__dropdown-toggle
        $input__background($inputs.background--error)

      .vs__selected
        color $colors.bird

  &__error
    @extend $lineOverflow
    position absolute
    left $inputs.padding
    max-width "calc(100% - %s)" % $inputs.padding
    color $colors.bird
    $text("natasha")


// Shadows
$shadow
  box-shadow 0 10px 32px $colors.shadows

Или вы можете делать примеси без параметров для того чтобы - забегая вперед (см. раздел Breakpoints) - такой же пассаж стал доступен внутри медиа-миксинов:

@/src/stylus/utils/_mixins.styl

// Utilities
//////////////////////////////////////////////////////
// Mixins without arguments duplicate placeholders,
// so it can be passed to media mixins

$flex--center()
  display flex
  align-items center
  justify-content center

Теперь:

.selector
  +$tablet()
    $flex--center()

← Colors →