@featherk/styles

FeatherK shared style assets (CSS, fonts) for Kendo UI enhancements.

Contents

• css/ Pre-built vanilla CSS files
• fonts/ Any webfont files referenced by the CSS/SCSS

Installation

npm install @featherk/styles

CSS Setup and Font Loading

FeatherK Styles Integration

Use the @featherk/styles package to provide consistent styling and typography. The styles are imported in the main application entry point:

// src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// FeatherK custom styles with Inter font family
import "@featherk/styles/dist/v1/css/featherk-q3-2024-v1.css"

createApp(App).mount('#app')

Font Resolution

The FeatherK styles include the Inter font family with automatic font loading. The CSS file contains font-face declarations that use relative paths:

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  /* Additional font variants: Light, Bold, Italic, Medium, etc. */
}

How Font Loading Works

1. Package Structure: The @featherk/styles package includes both CSS and font files:

   node_modules/@featherk/styles/
   ├── dist/
   │   ├── v7.2.0/
   │   │   ├── css/
   │   │   │   ├── feather-ks.css
   │   │   │   └── feather-k override.css
   │   │   └── fonts/
   │   │       ├── Inter-Regular.woff2
   │   │       ├── Inter-Bold.woff2
   │   │       ├── Inter-Light.woff2
   │   │       └── [other Inter variants]
   │   ├── v8.2.0/
   │   │   ├── css/
   │   │   │   └── featherk.css
   │   │   ├── fonts/
   │   │   │   ├── Inter-Regular.woff2
   │   │   │   ├── Inter-Bold.woff2
   │   │   │   ├── Inter-Light.woff2
   │   │   │   └── [other Inter variants]
   │   │   ├── scss/
   │   │   │   ├── _externalStyles.scss
   │   │   │   ├── _fonts.scss
   │   │   │   ├── _kendo.scss
   │   │   │   ├── _tokens.scss
   │   │   │   ├── index.scss
   │   │   │   └── [other .scss files]

2. Relative Path Resolution: The CSS uses ../fonts/ paths that correctly resolve from /dist/v1/css/ to /dist/v1/fonts/

3. Vite Processing:

   • Development: Vite serves fonts directly from node_modules with correct path resolution
   • Production: Vite copies font assets to the build output and updates CSS URLs automatically

4. Browser Loading: Fonts load seamlessly without additional configuration - the Inter font family is applied throughout the application according to the FeatherK styles.

License

MIT