Add comprehensive library expansion with new components and demos
- Add new libraries: ui-accessibility, ui-animations, ui-backgrounds, ui-code-display, ui-data-utils, ui-font-manager, hcl-studio - Add extensive layout components: gallery-grid, infinite-scroll-container, kanban-board, masonry, split-view, sticky-layout - Add comprehensive demo components for all new features - Update project configuration and dependencies - Expand component exports and routing structure - Add UI landing pages planning document 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
224
projects/ui-font-manager/README.md
Normal file
224
projects/ui-font-manager/README.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# UI Font Manager
|
||||
|
||||
A comprehensive Angular library for dynamic font management with runtime theme switching, Google Fonts integration, and extensible custom font support.
|
||||
|
||||
## Features
|
||||
|
||||
- **🎨 Runtime Font Themes**: Switch font themes dynamically without rebuilds
|
||||
- **📦 Google Fonts Presets**: 75+ popular Google Fonts with URLs ready to use
|
||||
- **🔧 Custom Font Support**: Add Typekit, self-hosted, or any external fonts
|
||||
- **⚡ Performance Optimized**: Lazy loading, preloading, and caching strategies
|
||||
- **🎯 Theme Management**: Create, save, and apply font theme combinations
|
||||
- **📱 CSS Variables Integration**: Seamless integration with your design system
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install ui-font-manager
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Basic Usage
|
||||
|
||||
```typescript
|
||||
import { UiFontManagerService, FontThemeService } from 'ui-font-manager';
|
||||
|
||||
@Component({...})
|
||||
export class MyComponent {
|
||||
constructor(
|
||||
private fontManager: UiFontManagerService,
|
||||
private themeService: FontThemeService
|
||||
) {}
|
||||
|
||||
// Load a Google Font
|
||||
loadFont() {
|
||||
this.fontManager.loadFont('Inter').subscribe(success => {
|
||||
console.log('Font loaded:', success);
|
||||
});
|
||||
}
|
||||
|
||||
// Apply a predefined theme
|
||||
applyTheme() {
|
||||
this.themeService.applyTheme('Modern Clean').subscribe();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. CSS Variables Integration
|
||||
|
||||
Your CSS automatically uses the new fonts:
|
||||
|
||||
```scss
|
||||
.my-component {
|
||||
font-family: var(--font-family-sans); // Updates dynamically
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
```
|
||||
|
||||
## Google Fonts Presets
|
||||
|
||||
Access 75+ popular Google Fonts instantly:
|
||||
|
||||
```typescript
|
||||
// Get all available Google Fonts
|
||||
const fonts = this.fontManager.getGoogleFontsPresets();
|
||||
|
||||
// Load specific fonts
|
||||
this.fontManager.loadFonts(['Inter', 'Playfair Display', 'JetBrains Mono']);
|
||||
|
||||
// Use predefined combinations
|
||||
const combinations = this.fontManager.getFontCombinations();
|
||||
// 'Modern Clean', 'Classic Editorial', 'Friendly Modern', 'Professional'
|
||||
```
|
||||
|
||||
### Available Google Fonts by Category
|
||||
|
||||
**Sans-serif (35 fonts)**: Inter, Roboto, Open Sans, Poppins, Lato, Montserrat, Nunito, Source Sans Pro, Raleway, Ubuntu, Work Sans, Rubik, Kanit, DM Sans, Mulish, Hind, Quicksand, Karla, Manrope, Comfortaa, Outfit, Lexend, Plus Jakarta Sans, Space Grotesk, Figtree, Barlow, Epilogue, Sora, Red Hat Display, Satoshi, Heebo, Exo 2, Commissioner, Archivo, Public Sans
|
||||
|
||||
**Serif (20 fonts)**: Playfair Display, Merriweather, Lora, EB Garamond, Crimson Text, Source Serif Pro, Noto Serif, Vollkorn, Libre Baskerville, Arvo, Zilla Slab, Cormorant Garamond, PT Serif, Alegreya, Spectral, Old Standard TT, Cardo, Gentium Plus, Neuton, Bitter
|
||||
|
||||
**Monospace (10 fonts)**: JetBrains Mono, Fira Code, Source Code Pro, Roboto Mono, IBM Plex Mono, Space Mono, Inconsolata, PT Mono, Fira Mono, Ubuntu Mono
|
||||
|
||||
**Display (10 fonts)**: Oswald, Bebas Neue, Anton, Righteous, Fredoka One, Archivo Black, Cabin, Prompt, Fjalla One, Patua One
|
||||
|
||||
**Handwriting (10 fonts)**: Dancing Script, Great Vibes, Pacifico, Kaushan Script, Satisfy, Caveat, Amatic SC, Indie Flower, Shadows Into Light, Permanent Marker
|
||||
|
||||
## Custom Font Support
|
||||
|
||||
### Add External Fonts
|
||||
|
||||
```typescript
|
||||
import { fontPresetManager } from 'ui-font-manager';
|
||||
|
||||
// Add Typekit fonts
|
||||
fontPresetManager.addTypekitFont('abc123', [
|
||||
{ name: 'My Custom Font', family: 'MyFont', weights: [400, 700] }
|
||||
]);
|
||||
|
||||
// Add custom CDN fonts
|
||||
fontPresetManager.addExternalFont('Custom Sans', {
|
||||
family: 'CustomSans',
|
||||
url: 'https://mycdn.com/fonts/custom.css',
|
||||
weights: [300, 400, 600],
|
||||
category: 'sans-serif'
|
||||
});
|
||||
|
||||
// Add self-hosted fonts
|
||||
fontPresetManager.addSelfHostedFont('My Font', {
|
||||
family: 'MyFont',
|
||||
basePath: '/assets/fonts/myfont',
|
||||
formats: ['woff2', 'woff'],
|
||||
weights: [400, 700],
|
||||
category: 'serif'
|
||||
});
|
||||
```
|
||||
|
||||
## Theme Management
|
||||
|
||||
### Create Custom Themes
|
||||
|
||||
```typescript
|
||||
// Create theme from font combination
|
||||
const theme = this.themeService.createThemeFromCombination(
|
||||
'My Theme',
|
||||
'Modern Clean',
|
||||
'Clean and modern design'
|
||||
);
|
||||
|
||||
// Create fully custom theme
|
||||
const customTheme = this.themeService.createCustomTheme('Custom Theme', {
|
||||
sans: 'Inter',
|
||||
serif: 'Playfair Display',
|
||||
mono: 'JetBrains Mono',
|
||||
display: 'Oswald'
|
||||
});
|
||||
|
||||
// Apply the theme
|
||||
this.themeService.applyTheme('My Theme').subscribe();
|
||||
```
|
||||
|
||||
### Export/Import Themes
|
||||
|
||||
```typescript
|
||||
// Export theme configuration
|
||||
const config = this.themeService.exportTheme('My Theme');
|
||||
|
||||
// Import theme from JSON
|
||||
const theme = this.themeService.importTheme(jsonString);
|
||||
```
|
||||
|
||||
## Performance Features
|
||||
|
||||
### Font Loading Strategies
|
||||
|
||||
```typescript
|
||||
// Configure font manager
|
||||
this.fontManager.configure({
|
||||
preloadFonts: true,
|
||||
fallbackTimeout: 3000,
|
||||
cacheEnabled: true
|
||||
});
|
||||
|
||||
// Preload fonts for performance
|
||||
this.fontManager.preloadFonts(['Inter', 'Roboto']);
|
||||
|
||||
// Load with specific options
|
||||
this.fontManager.loadFont('Inter', {
|
||||
display: 'swap',
|
||||
weights: [400, 600],
|
||||
subsets: ['latin']
|
||||
});
|
||||
```
|
||||
|
||||
## Integration with Design Systems
|
||||
|
||||
Works seamlessly with existing CSS custom properties:
|
||||
|
||||
```scss
|
||||
// In your existing design system
|
||||
:root {
|
||||
--font-family-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-family-serif: 'Playfair Display', Georgia, serif;
|
||||
--font-family-mono: 'JetBrains Mono', Consolas, monospace;
|
||||
--font-family-display: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
// Font manager updates these variables at runtime
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### UiFontManagerService
|
||||
|
||||
- `loadFont(name, options?)`: Load single font
|
||||
- `loadFonts(names, options?)`: Load multiple fonts
|
||||
- `applyTheme(theme)`: Apply font theme
|
||||
- `getGoogleFontsPresets()`: Get Google Fonts collection
|
||||
- `getFontCombinations()`: Get predefined combinations
|
||||
- `addCustomFont(name, definition)`: Add custom font
|
||||
|
||||
### FontThemeService
|
||||
|
||||
- `applyTheme(name)`: Apply theme by name
|
||||
- `getThemes()`: Get all themes
|
||||
- `createCustomTheme()`: Create custom theme
|
||||
- `exportTheme()` / `importTheme()`: Export/import themes
|
||||
|
||||
### FontPresetManager
|
||||
|
||||
- `addCustomFont()`: Add single custom font
|
||||
- `addTypekitFont()`: Add Adobe Typekit fonts
|
||||
- `addSelfHostedFont()`: Add self-hosted fonts
|
||||
- `getFontsByCategory()`: Filter fonts by category
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user