https://github.com/ktsstudio/mediaproject-style
Common styles for media projects
https://github.com/ktsstudio/mediaproject-style
Last synced: 12 months ago
JSON representation
Common styles for media projects
- Host: GitHub
- URL: https://github.com/ktsstudio/mediaproject-style
- Owner: ktsstudio
- Created: 2021-10-11T12:56:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T04:18:44.000Z (about 2 years ago)
- Last Synced: 2025-06-12T17:20:03.153Z (about 1 year ago)
- Language: TypeScript
- Size: 285 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @ktsstudio/mediaproject-style
Пакет с общими стилями для медиапроектов.
## Использование
`npm install @ktsstudio/mediaproject-style`
`yarn add @ktsstudio/mediaproject-style`
## Содержимое
### Утилиты
* [markup](./src/markup) — утилита для адаптивной верстки на rem
Чтобы использовать адаптивную верстку на rem, необходимо при инициализации приложения вызвать функцию initMarkup и передать в нее нужные параметры:
```typescript
import { initMarkup } from '@ktsstudio/mediaproject-style';
...
initMarkup();
```
Утилита создает объект типа Markup и экспортирует его в виде переменной markup. При необходимости к ней можно обратиться:
```typescript
import { markup } from '@ktsstudio/mediaproject-style';
...
console.log(markup.currentHtmlFontSize);
```
### Миксины и анимации
* [mixins.ts](./src/mixins.ts) — миксины для styled-components
* [animations.ts](./src/animations.ts) — анимации для styled-components
* [mixins.scss](./src/mixins.scss) — миксины для Sass
* [animations.scss](./src/animations.scss) — анимации для Sass
Чтобы использовать миксин или анимацию в проекте с styled-components, импортируйте нужный объект из библиотеки:
```typescript
import { mixins } from '@ktsstudio/mediaproject-style';
...
${mixins.centerPos()};
```
Чтобы использовать миксин или анимацию в проекте с Sass, импортируйте файл с ними:
```scss
@import '~@ktsstudio/mediaproject-style/dist/mixins';
...
@include centerPos;
```
### Использование с SSR на примере Next.js
Для корректной работы утилиты markup с Next.js необходимо вызывать функцию инициализации в useEffect.
Пример:
```typescript
import { initMarkup } from '@ktsstudio/mediaproject-style';
...
React.useEffect(() => {
initMarkup();
}, []);
```
Импорт миксинов и анимаций в SSR не меняется.
## Обратная связь
Любой фидбэк вы можете передать нам на почту [hello@ktsstudio.ru](mailto:hello@ktsstudio.ru) в письме с темой "mediaproject-style"