Документация по паттернам

Основа

Основой для всего этого неистового веселья вытступает блок .random. Блок с классом .random определяет размер и то, какого цвета будет фон всего прямоугольника.

Второй класс на этом блоке определяет его цвет:

• .random__green — зелёный #00e2b6;
• .random__pink — розовый #eb038b;
• .random__red — красный #f7431a;
• .random__violet — фиолетовый #6223db;
• .random__yellow — жёлтый #ffe31a;

В целом, то все цвета, котоыре используются в проекте и могут быть применены к следующим блокам.

Геометрический блок

Геометрический блок, это вторая фигура, которая накладывается сверху. Она определяется классом .random__rect.

Положение фигуры определяется её кординатами слева и сверху, а так же размерами и задётся через style. Любое свойство кратно 25%. Ширина и высота не могут быть равны 0%. Верх и низ не могут быть равны 100%. Ширина и высота не может одновремнно быть равна 100%.

• top: 0%/25%/50%/75%;
• left: 0%/25%/50%/75%;
• width: 25%/50%/75%/100%;
• height: 25%/50%/75%/100%;

Цвет фигуры задаёт классы:

• .random__green — зелёный #00e2b6;
• .random__pink — розовый #eb038b;
• .random__red — красный #f7431a;
• .random__violet — фиолетовый #6223db;
• .random__yellow — жёлтый #ffe31a;

При этом действуют некоторые правила. Геометрический блок не может быть того же цвета, что и основа. При этом два правила соответствия цвета:

• .random__pink — как основа не может сочетаться с .random__red как фигура;
• .random__red — как основа не может сочетаться с .random__pink как фигура;

Для Геометрического блока так же может бюыть задан наклон.

• none - нет наклона.
• .random__skew-plus — влево;
• .random__skew-minus — вправо;

Паттерн

Паттерн накладывается сверху и имеет пять параметров. Размер и положение, цвет, тип, размер паттерна.

Основа паттерна определяется классом .random__shape. Размер самих иконок в паттерне классами:

• .random__pattern-small;
• .random__pattern-medium;
• .random__pattern-large;

Чтобы определить тип паттерна и его цвет надо добавить класс собрав его по принципу — .random__{тип}-{цвет};

Где тип:

• bracket;
• plus;
• slash;
• tag;

Цвета:

• green — зелёный #00e2b6;
• pink — розовый #eb038b;
• red — красный #f7431a;
• violet — фиолетовый #6223db;
• yellow — жёлтый #ffe31a;

Таким образом мы получаем набор из следующих вариаций:

• .random__bracket-green

• .random__bracket-pink

• .random__bracket-red

• .random__bracket-violet

• .random__bracket-yellow

• .random__plus-green

• .random__plus-pink

• .random__plus-red

• .random__plus-violet

• .random__plus-yellow

• .random__slash-green

• .random__slash-pink

• .random__slash-red

• .random__slash-violet

• .random__slash-yellow

• .random__tag-green

• .random__tag-pink

• .random__tag-red

• .random__tag-violet

• .random__tag-yellow

Цветовые варианты работают таким образом, что цвет основы, цвет фигуры и паттерна должен отличаться. При этом, если в основе или фигуре есть pink или red, то в паттерне эти цвета вместе использовтаься не могут.

Положение фигуры определяется её кординатами слева и сверху, а так же размерами и задётся через style. Любое свойство кратно 25%. Ширина и высота не могут быть равны 0%. Верх и низ не могут быть равны 100%. Ширина и высота не может одновремнно быть равна 100%.

• top: 0%/25%/50%/75%;
• left: 0%/25%/50%/75%;
• width: 25%/50%/75%/100%;
• height: 25%/50%/75%/100%;

Документация по хранению

Чтобы в точности воспроизвести паттерн нам необходимо знать следующий параметры:

• цвет блока (green, pink, red, violet, yellow);
• цвет геометрического блока (green, pink, red, violet, yellow);
• скос геометрического блока (none, plus, minus)
• позиция и размер геометрического блока:
  • top (0%, 25%, 50%, 75%);
  • left (0%, 25%, 50%, 75%);
  • width (25%, 50%, 75%, 100%);
  • height (25%, 50%, 75%, 100%);
• тип паттерна (bracket, plus, slash, tag);
• цвет паттерна (green, pink, red, violet, yellow);
• масштаб паттерна (small, medium, large);
• позиция и размер паттерна:
  • top (0%, 25%, 50%, 75%);
  • left (0%, 25%, 50%, 75%);
  • width (25%, 50%, 75%, 100%);
  • height (25%, 50%, 75%, 100%);

В формате JSON это можно описать как:

{
  "block_color": "red",
  "geometric_color": "green",
  "geometric_scew": "minus",
  "geometric_size": {
    "top": "0%",
    "left": "25%",
    "width": "100%",
    "height": "50%"
  },
  "pattern_type": "plus",
  "pattern_color": "yellow",
  "pattern_zoom": "small",
  "pattern_size": {
    "top": "0%",
    "left": "25%",
    "width": "100%",
    "height": "50%"
  }
}