# @mdsnvst/web_common

> ## Список правил

Latest version **1.0.6** (published 2021-04-16) · 0 weekly downloads

## Install

```sh
npm install @mdsnvst/web_common
pnpm add @mdsnvst/web_common
yarn add @mdsnvst/web_common
bun add @mdsnvst/web_common
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-04-16 |
| First published | 2021-04-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mdsnvst |

## Links

- npm: https://www.npmjs.com/package/@mdsnvst/web_common
- npm.io page: https://npm.io/package/@mdsnvst/web_common

## Dependencies (1)

- [svelte](https://npm.io/package/svelte.md) ^3.35.0

## Recent versions

- 1.0.6 (latest) — 2021-04-16
- 1.0.5 — 2021-04-14
- 1.0.4 — 2021-04-13
- 1.0.3 — 2021-04-12
- 1.0.2 — 2021-04-06
- 1.0.1 — 2021-04-05
- 1.0.0 — 2021-04-05

## README

# Common Frontend Components

## Список правил

Правила компонентов:
 - Название: UpperCamelCase (PascalCase)
 - Название компонента, импорт компонента и т.д везде должны совпадать
 - Название пропсов и событий: camelCase
 - Переменные (и пропсы) передаются через style корневому элементу компонента
 - Использование пропсов (и значений по умолчанию), отвечающих за стили:
```svelte
<span {style}><slot /></span>

<script>
export let op = 1
$: style = `
--op:${op};
`
</script>

<style>span {
opacity: var(--op);
}</style>
```

Правила стилей:
 - Отступы, цвета задаются через глобальные переменные
 - Если ты хочешь, чтобы цвет наследовался, используй значение initial, тем самым обнулив переменную  
 Пример:  
 ```
  <!-- this text will inherit color -->
  <Text col="initial">Some text</Text>
  <!-- this won't -->
  <Text col="inherit">Some more text</Text> 
 ```  
 Такое поведение обосновано тем, что var() не принимает в себя значение inherit, а может быть лишь указано как fallback значение  
 - Запрещено:
   * `transition all`
   * Анимация таких свойств как `margin`, `padding`, `top` etc.
   * Прятать svg при помощи `display none`, `visibility hidden`
   * Инлайн стили. Исключение: css custom properties
   * `!important` Без поясняющего комментария рядом
   * z-index больше, чем z-index header'а (указан в `src/vars/z-index.json`)
 - Необходимо:
   * `will-change` при анимации
   * `filter opacity()`, а не `opacity`
   * Указывать z-index в `z-index.json` и затем импортировать значение оттуда
   * Перед использованием цвета проверить его наличие в `vars.json`

Правила страниц:
 - Шаблон страницы:
 ```html
<Header />
<div class="app-wrap">
  <div class="app__content">
    <!-- Here content goes -->
  </div>
</div>
 ```

---
_Source: https://npm.io/package/@mdsnvst/web_common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._