https://github.com/cdek-it/typography
https://github.com/cdek-it/typography
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/cdek-it/typography
- Owner: cdek-it
- Created: 2025-11-14T08:19:01.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-05-18T08:46:54.000Z (25 days ago)
- Last Synced: 2026-05-18T10:43:44.732Z (25 days ago)
- Language: CSS
- Size: 35.2 KB
- Stars: 0
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @cdek-it/typography
`@cdek-it/typography` — пакет с глобальными типографическими стилями для веб-приложений.
Подключается один раз и применяется ко всему проекту.
---
## Подключение через HTML (рекомендуется)
Для улучшения производительности рекомендуется использовать preconnect:
```html
```
> ⚠️ Подключение должно идти **до** ваших кастомных стилей, если вы планируете их переопределять.
---
## Альтернативные способы подключения
### Установка через npm/yarn
```bash
npm install @cdek-it/typography
```
или
```bash
yarn add @cdek-it/typography
```
Импорт в CSS/SCSS файл:
```css
@import '@cdek-it/typography/dist/index.min.css';
```
### Поддерживаемые фреймворки (популярные)
#### Vue 3 (Vite)
`src/assets/main.css`
```css
@import '@cdek-it/typography/dist/index.min.css';
```
`src/main.ts`
```ts
import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';
createApp(App).mount('#app');
```
#### React (Vite / Create React App)
`src/main.tsx` или `src/index.tsx`
```ts
import '@cdek-it/typography/dist/index.min.css';
import App from './App';
export default App;
```
#### Next.js
`pages/_app.tsx` **или** `app/layout.tsx`
```ts
import '@cdek-it/typography/dist/index.min.css';
export default function App({ Component, pageProps }) {
return ;
}
```
#### Nuxt 3
`nuxt.config.ts`
```ts
export default defineNuxtConfig({
css: [
'@cdek-it/typography/dist/index.min.css',
],
});
```
#### Angular
`angular.json`
```json
{
"styles": [
"node_modules/@cdek-it/typography/dist/index.min.css",
"src/styles.css"
]
}
```
---
## Переопределение стилей
Вы можете переопределять стили typography в своих файлах:
```html
h1 {
font-weight: 700;
}
```
---
## Рекомендации
* Подключайте стили **один раз** на уровне приложения
* Используйте `typography.min.css` в продакшене
* Не подключайте typography в `scoped` / `module` стилях
* Переопределяйте стили **после** подключения пакета
* Используйте preconnect для улучшения производительности загрузки
---
## Темная тема (хак)
Для включения темной темы используйте JavaScript:
```javascript
document.documentElement.dataset.theme = 'dark';
```
> ⚠️ Это решение-хак для случаев, когда не используются библиотеки Prime для переключения темы. В штатных ситуациях рекомендуется использовать встроенные механизмы управления темами.