@featherk/styles 0.1.1 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,8 +5,6 @@ FeatherK shared style assets (CSS, SCSS, fonts) for Kendo UI enhancements.
|
|
|
5
5
|
## Contents
|
|
6
6
|
|
|
7
7
|
- `css/` Pre-built vanilla CSS files
|
|
8
|
-
- `scss/` Source SCSS you can customize & compile
|
|
9
|
-
- `external-Styles/` Placeholder for 3rd-party or vendor styles you want distributed
|
|
10
8
|
- `fonts/` Any webfont files referenced by the CSS/SCSS
|
|
11
9
|
|
|
12
10
|
## Installation
|
|
@@ -15,29 +13,73 @@ FeatherK shared style assets (CSS, SCSS, fonts) for Kendo UI enhancements.
|
|
|
15
13
|
npm install @featherk/styles
|
|
16
14
|
```
|
|
17
15
|
|
|
18
|
-
##
|
|
16
|
+
## CSS Setup and Font Loading
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
### FeatherK Styles Integration
|
|
21
19
|
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
Use the `@featherk/styles` package to provide consistent styling and typography. The styles are imported in the main application entry point:
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
// src/main.ts
|
|
24
|
+
import { createApp } from 'vue'
|
|
25
|
+
import './style.css'
|
|
26
|
+
import App from './App.vue'
|
|
27
|
+
|
|
28
|
+
// Kendo UI theme (required for component functionality)
|
|
29
|
+
import "@progress/kendo-theme-default/dist/all.css"
|
|
30
|
+
|
|
31
|
+
// FeatherK custom styles with Inter font family
|
|
32
|
+
import "@featherk/styles/dist/css/featherk-q3-2024-v1.css"
|
|
33
|
+
|
|
34
|
+
createApp(App).mount('#app')
|
|
24
35
|
```
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
### Font Resolution
|
|
38
|
+
|
|
39
|
+
The FeatherK styles include the Inter font family with automatic font loading. The CSS file contains font-face declarations that use relative paths:
|
|
27
40
|
|
|
28
|
-
```
|
|
29
|
-
@
|
|
41
|
+
```css
|
|
42
|
+
@font-face {
|
|
43
|
+
font-family: 'Inter';
|
|
44
|
+
src: url("../fonts/Inter-Regular.woff2") format("woff2");
|
|
45
|
+
/* Additional font variants: Light, Bold, Italic, Medium, etc. */
|
|
46
|
+
}
|
|
30
47
|
```
|
|
31
48
|
|
|
32
|
-
|
|
49
|
+
#### How Font Loading Works
|
|
50
|
+
|
|
51
|
+
1. **Package Structure**: The `@featherk/styles` package includes both CSS and font files:
|
|
52
|
+
|
|
53
|
+
```text
|
|
54
|
+
node_modules/@featherk/styles/
|
|
55
|
+
├── dist/
|
|
56
|
+
│ ├── css/
|
|
57
|
+
│ │ └── featherk-q3-2024-v1.css
|
|
58
|
+
│ └── fonts/
|
|
59
|
+
│ ├── Inter-Regular.woff2
|
|
60
|
+
│ ├── Inter-Bold.woff2
|
|
61
|
+
│ ├── Inter-Light.woff2
|
|
62
|
+
│ └── [other Inter variants]
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
2. **Relative Path Resolution**: The CSS uses `../fonts/` paths that correctly resolve from `/dist/css/` to `/dist/fonts/`
|
|
66
|
+
|
|
67
|
+
3. **Vite Processing**:
|
|
68
|
+
- **Development**: Vite serves fonts directly from `node_modules` with correct path resolution
|
|
69
|
+
- **Production**: Vite copies font assets to the build output and updates CSS URLs automatically
|
|
70
|
+
|
|
71
|
+
4. **Browser Loading**: Fonts load seamlessly without additional configuration - the Inter font family is applied throughout the application according to the FeatherK design system.
|
|
72
|
+
|
|
73
|
+
### Import Order
|
|
33
74
|
|
|
34
|
-
|
|
75
|
+
The CSS import order is important for proper styling:
|
|
35
76
|
|
|
36
|
-
|
|
77
|
+
1. **Kendo Theme** (`@progress/kendo-theme-default`) - Provides base component styling
|
|
78
|
+
2. **FeatherK Styles** (`@featherk/styles`) - Applies custom design system and typography
|
|
37
79
|
|
|
38
|
-
|
|
80
|
+
This ensures that FeatherK customizations properly override Kendo defaults while maintaining component functionality.
|
|
39
81
|
|
|
40
|
-
|
|
82
|
+
---
|
|
41
83
|
|
|
42
84
|
## License
|
|
43
85
|
|