Unit

Updated on 04 November 2016

Docs are work in progress, check open issues and see how you can help!

Unit is a single measurement used across whole Vinted UI, which currently is 4px/4dp/4pt. We use this measurement in order to have a flexibility and power to change spacings/paddings/margins and other metrics with single-digit change.

In the Styleguide we use measurement function, which multiplies default unit accordingly:

Specifications

// Unit
$unit-base                                 : 4px;

@function unit($multiplier) {
  @if type-of($multiplier) == 'number' {
    @return $unit-base * $multiplier
  }
}

// Example
$checkbox-border-width                     : unit(0.25); // 1px
$checkbox-size                             : unit(6); // 24px
$checkbox-label-margin-left                : unit(2); // 8px