https://github.com/ktsstudio/mediaproject-styled-components
Mixins and animations for styled-components
https://github.com/ktsstudio/mediaproject-styled-components
Last synced: about 1 year ago
JSON representation
Mixins and animations for styled-components
- Host: GitHub
- URL: https://github.com/ktsstudio/mediaproject-styled-components
- Owner: ktsstudio
- Created: 2024-06-05T04:20:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T05:04:11.000Z (about 2 years ago)
- Last Synced: 2025-01-24T20:16:58.105Z (over 1 year ago)
- Language: TypeScript
- Size: 119 KB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 1
-
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"