@ktsstudio/mediaproject-style

Пакет с общими стилями для медиапроектов.

Использование

npm install @ktsstudio/mediaproject-style

yarn add @ktsstudio/mediaproject-style

Содержимое

Утилиты

• markup — утилита для адаптивной верстки на rem

Чтобы использовать адаптивную верстку на rem, необходимо при инициализации приложения вызвать функцию initMarkup и передать в нее нужные параметры:

import { initMarkup } from '@ktsstudio/mediaproject-style';

...

initMarkup();

Утилита создает объект типа Markup и экспортирует его в виде переменной markup. При необходимости к ней можно обратиться:

import { markup } from '@ktsstudio/mediaproject-style';

...

console.log(markup.currentHtmlFontSize);

Миксины и анимации

• mixins.ts — миксины для styled-components
• animations.ts — анимации для styled-components
• mixins.scss — миксины для Sass
• animations.scss — анимации для Sass

Чтобы использовать миксин или анимацию в проекте с styled-components, импортируйте нужный объект из библиотеки:

import { mixins } from '@ktsstudio/mediaproject-style';

...

${mixins.centerPos()};

Чтобы использовать миксин или анимацию в проекте с Sass, импортируйте файл с ними:

@import '~@ktsstudio/mediaproject-style/dist/mixins';

...

@include centerPos;

Использование с SSR на примере Next.js

Для корректной работы утилиты markup с Next.js необходимо вызывать функцию инициализации в useEffect.

Пример:

import { initMarkup } from '@ktsstudio/mediaproject-style';

...

React.useEffect(() => {
  initMarkup();
}, []);

Импорт миксинов и анимаций в SSR не меняется.

Обратная связь

Любой фидбэк вы можете передать нам на почту hello@ktsstudio.ru в письме с темой "mediaproject-style"