UI Library Starter

# Typography

Абстрагируйте все гарнитуры из гайдлайна в короткие имена-маркеры.

  • elena
  • olga
  • anna
  • maria
  • katya
  • alena
  • natasha
  • nina

~/src/stylus/utils/_typography.styl

// Typography
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////
//////////////////////////////////////////////////////

// Typographic Variables
//////////////////////////////////////////////////////

// Guide

$font-family = "Ubuntu"

$font-weight = {
  regular: 400,
  bold: 700,
}

$letter-spacing = {
  normal: normal
}

// Universal Typographic Mixin
//////////////////////////////////////////////////////

// We use one, only one, Karl, a universal mixin for all cases!

$text($name)
  font-family $font-family
  letter-spacing $letter-spacing.normal

  if $name == "elena"
    font-size 72px
    line-height 72px
    font-weight $font-weight.bold
  if $name == "olga"
    font-size 56px
    line-height 56px
    font-weight $font-weight.bold
  if $name == "anna"
    font-size 40px
    line-height 44px
    font-weight $font-weight.bold
  if $name == "maria"
    font-size 32px
    line-height 36px
    font-weight $font-weight.bold
  if $name == "katya"
    font-size 24px
    line-height 28px
    font-weight $font-weight.regular
  if $name == "alena"
    font-size 20px
    line-height 28px
    font-weight $font-weight.regular
  if $name == "natasha"
    font-size 16px
    line-height 28px
    font-weight $font-weight.regular
  if $name == "nina"
    font-size 13px
    line-height 16px
    font-weight $font-weight.regular

Test component:

@/src/components/tests/TestTypography/TestTypography.vue

<template>
  <ul class="typo">
    <li class="typo__1">elena</li>
    <li class="typo__2">olga</li>
    <li class="typo__3">anna</li>
    <li class="typo__4">maria</li>
    <li class="typo__5">katya</li>
    <li class="typo__6">alena</li>
    <li class="typo__7">natasha</li>
    <li class="typo__8">nina</li>
  </ul>
</template>

<script>
export default {
  name: 'TestTypography',
};
</script>

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

.typo
  padding 0
  list-style none

  > li
    margin-bottom 30px

  &__1
    $text("elena")

  &__2
    $text("olga")

  &__3
    $text("anna")

  &__4
    $text("maria")

  &__5
    $text("katya")

  &__6
    $text("alena")

  &__7
    $text("natasha")

  &__8
    $text("nina")
</style>

← Others →