v0.9.0-63180da9

Appearance

CSS ​

Типографика ​

В данный момент Дизайн-Система не предоставляет атомы гайдлайна в виде утилитарных классов CSS для типографики. Используйте поставленный компонент Text.

html
<!-- Так делать больше не надо! -->
<span class="my-custom-class-for-typography">Я продолжаю верстать как хочу!</span>

<!-- Так правильно! -->
<ds-text token="mascarpone" color="harakiri" value="Я использую компоненты ДС!"></ds-text>

Палитра, нерозрачности и скругления ​

Вы можете использовать CSS Custom Properties для нанесения цветов, прозрачностей и скруглений по гайду на любые элементы в вашей верстке. С помощью компонента Theme можно переключать темы.

css
/* Custom Properties */
:root {
  /* Скругления */
  --jade: 0;
  --akbu: 2px;
  --rajol: 4px;
  --theku: 6px;
  --bana: 8px;
  --sylilis: 12px;
  --kurza: 16px;
  --eluno: 20px;
  --geban: 24px;
  --nemea: 32px;
  /* Непрозрачности */
  --odo: 1;
  --pake: 0.96;
  --pudre: 0.88;
  --tesa: 0.8;
  --ekas: 0.72;
  --zeton: 0.64;
  --qarta: 0.56;
  --anie: 0.48;
  --puzo: 0.4;
  --biqe: 0.32;
  --hemza: 0.24;
  --sedra: 0.16;
  --dere: 0.12;
  --kima: 0.08;
  --imi: 0;
}

.selector {
  color: var(--harakiri);
  opacity: var(--ekas);
  border-radius: var(--bana);
}

Тени ​

Тени предоставляются в виде классов CSS на разметку. Требует подключения глобальных стилей библиотеки.

css
.bigShadow,
.bigShadowStatic {
  box-shadow: 0 8px 32px 0 var(--hamilton);
}
.bigShadow:hover {
  box-shadow: 0 8px 32px 0 var(--hamiltonHover);
}
.bigShadow:active {
  box-shadow: 0 8px 32px 0 var(--hamiltonPressed);
}
.mediumShadow,
.mediumShadowStatic {
  box-shadow: 0 4px 16px 0 var(--hamilton);
}
.mediumShadow:hover {
  box-shadow: 0 4px 16px 0 var(--hamiltonHover);
}
.mediumShadow:active {
  box-shadow: 0 4px 16px 0 var(--hamiltonPressed);
}
.smallShadow,
.smallShadowStatic {
  box-shadow: 0 4px 4px -2px var(--hamilton);
}
.smallShadow:hover {
  box-shadow: 0 4px -2px 0 var(--hamiltonHover);
}
.smallShadow:active {
  box-shadow: 0 4px -2px 0 var(--hamiltonPressed);
}
.zelipea {
  box-shadow: 0 2px 8px 0 var(--rockyOpacity);
}
.kalypise {
  box-shadow: 0 2px 8px 0 var(--matrixOpacity);
}
.ambrosia {
  box-shadow: 0 2px 8px 0 var(--lebowskiOpacity);
}
.meilitae {
  box-shadow: 0 2px 8px 0 var(--fargoOpacity);
}
.asteria {
  box-shadow: 0 2px 8px 0 var(--gentelmenOpacity);
}
.menodice {
  box-shadow: 0 2px 8px 0 var(--metropolisOpacity);
}
.pontoporeia {
  box-shadow: 0 2px 8px 0 var(--fightclubOpacity);
}
.plephione {
  box-shadow: 0 2px 8px 0 var(--aquamanOpacity);
}
.leuciphia {
  box-shadow: 0 2px 8px 0 var(--goodfellasOpacity);
}
.creasi {
  box-shadow: 0 0 0 4px var(--avengers);
}
.mango {
  box-shadow: 0px 0px 4px 0px var(--shindler);
}

Утилитарные классы для адаптивной разметки ​

Дизайн-Система предоставляет полезные утилитарные классы для быстрого "дублирования" вариантов разметки в шаблоне на различных стандартных типоразмерах. Этот раздел документации призван максимально доступно обьяснить что это, и как это можно использовать.

Предположим, вы верстаете красивый лендинг, и поведение различных крупных блоков, или даже просто переносы в текстовом контенте, очень сильно отличается на графических прототипах для разных устройств и экранов. Разрабочик ДС, на своем продолжительном опыте в верстке, достоверно выяснил, что некоторые подобные требования, не то что намного проще, но иногда даже практически невозможно реализовать "без какого-то такого стандартного средства". Доставлять их "с помощью джаваскрипта" и утилитарной функции Screen, о который было рассказано в разделе Основное документации - кажется излишним и неудобным (хотя при желании и допустимо, конечно). Вот тут нам на помощь приходит CSS.

Вам доступно использование утилитарных классов, надежно переключающих видимость элементов с учетом их типа отображения и типоразмеров обьявленных в гайдлайне. Селекторы формируются по простому соглашению:

.[видимость элемента]--[тип отображения элемента]--[типоразмер]

Списки доступных значений:

$visibility = "visible" "hidden"
$displayType = "block" "inline-block" "inline" "flex" "inline-flex" "grid"
$screenType = "widest" "wide" "not-gadgets" "middle" "narrow" "gadgets" "not-narrow"

Препроцессор в ДС генерирует следующие конструкции для всех возможных сочетаний этих значений:

css
@media only screen and (min-width: 1360px) {
  .visible--block--widest {
    display: block !important;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
  .visible--block--widest {
    display: none !important;
  }
}
@media only screen and (max-width: 1023px) {
  .visible--block--widest {
    display: none !important;
  }
}
@media only screen and (min-width: 1360px) {
  .hidden--block--widest {
    display: none !important;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
  .hidden--block--widest {
    display: block !important;
  }
}
@media only screen and (max-width: 1023px) {
  .hidden--block--widest {
    display: block !important;
  }
}
/* И все остальные варианты сочетаний ... */

Предположим, у вас есть кастомная сетка (элемент с типом отображения display: grid;), и макеты требуют перестроения порядка дочерних элементов на мобильных устройствах, смартфонах:

css
.grid-element {
  diplay: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 24px;
}

@media only screen and (max-width: 599px) {
  .grid-element {
    grid-template-columns: 1fr;
    gap: 16px 0;
  }
}

На всех десктопах и планшетах должен быть порядок дочерних блоков 1 - 2 - 3, а на наладонниках - 3 - 2 - 1, "дизайнеру так захотелось". Вы можете легко добиться этого, с помощью дублирования сетки в шаблоне и утилитарных классов переключающих видимость:

html
<div class="grid-element hidden--grid--narrow">
  <div id="grid-block--1">A</div>
  <div id="grid-block--2">B</div>
  <div id="grid-block--3">C</div>
</div>
<div class="grid-element visible--grid--narrow">
  <div id="grid-block--3">C</div>
  <div id="grid-block--2">B</div>
  <div id="grid-block--1">A</div>
</div>

Что эквивалентно:

html
<ds-grid
  class="visible--grid--not-narrow"
  gap-widest="0 24px"
  gap-wide="0 24px"
>
  <div id="grid-block--1" slot="1">A</div>
  <div id="grid-block--2" slot="2">B</div>
  <div id="grid-block--3" slot="3">C</div>
</ds-grid>
<ds-grid
  class="hidden--grid--not-narrow"
  gap-middle="16px 0"
  gap-narrow="16px 0"
  columns-middle="1fr"
>
  <div id="grid-block--3" slot="1">C</div>
  <div id="grid-block--2" slot="2">B</div>
  <div id="grid-block--1" slot="3">A</div>
</ds-grid>

Или даже так, смотрите на порядок-имена слотов:

html
<ds-grid
  gap-widest="0 24px"
  gap-wide="0 24px"
  gap-middle="0 24px"
  gap-narrow="16px 0"
  columns-middle="1fr 1fr 1fr"
>
  <div class="visible--block--not-narrow" id="grid-block--1" slot="1">A</div>
  <div class="visible--block--not-narrow" id="grid-block--2" slot="2">B</div>
  <div class="visible--block--not-narrow" id="grid-block--3" slot="3">C</div>

  <div class="hidden--block--not-narrow" id="grid-block--1" slot="3">A</div>
  <div class="hidden--block--not-narrow" id="grid-block--2" slot="2">B</div>
  <div class="hidden--block--not-narrow" id="grid-block--3" slot="1">C</div>
</div>

В реальной ситуации ожидается, что вы будете использовать компонент сетки из ДС, но это, в любом случае, просто условный, максимально доступный и наглядный пример. Показывающий, что в некоторых ситуациях, вместо того чтобы, "писать много CSS ручками", намного проще и надежнее просто "взять пару готовых стилевых классов для адаптива из ДС".

Или еще один, крайне распрастраненный случай, где такие классы крайне удобны и эффективны - разный перенос и разрывы строки в простом тектовом потоке:

html
<div>
  Платформа для автоматизации основных бизнес-процессов<br
    class="hidden--inline--gadgets"
  /><span class="hidden--inline--not-gadgets">&nbsp;</span>ресурсоснабжающих
  предприятий и создания единого<br class="hidden--inline--gadgets" /><span
    class="hidden--inline--not-gadgets"
    >&nbsp;</span
  >информационного пространства.
</div>