|
|
|
|
@@ -6,15 +6,15 @@ Modern web development made elegant. `@design.estate/dees-domtools` provides a p
|
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
|
|
|
|
|
🚀 **Smart DOM Management** - Singleton-based DomTools instance with race-condition-free initialization
|
|
|
|
|
📱 **Responsive Breakpoints** - Built-in support for desktop, tablet, phablet, and phone viewports with container queries
|
|
|
|
|
🎭 **Theme Management** - Automatic dark/light mode detection and switching with RxJS observables
|
|
|
|
|
⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
|
|
|
|
|
📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
|
|
|
|
|
🎯 **State Management** - Integrated state management with smartstate
|
|
|
|
|
🧭 **Routing** - Client-side routing with smartrouter
|
|
|
|
|
🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
|
|
|
|
|
💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
|
|
|
|
|
- 🚀 **Smart DOM Management** - Singleton-based DomTools instance with race-condition-free initialization
|
|
|
|
|
- 📱 **Responsive Breakpoints** - Built-in support for desktop, tablet, phablet, and phone viewports with container queries
|
|
|
|
|
- 🎭 **Theme Management** - Automatic dark/light mode detection and switching with RxJS observables
|
|
|
|
|
- ⌨️ **Keyboard Shortcuts** - Elegant keyboard event handling with combo support
|
|
|
|
|
- 📜 **Smooth Scrolling** - Native and Lenis-powered smooth scrolling with automatic detection
|
|
|
|
|
- 🎯 **State Management** - Integrated state management with smartstate
|
|
|
|
|
- 🧭 **Routing** - Client-side routing with smartrouter
|
|
|
|
|
- 🌐 **WebSetup** - Easy management of website metadata, favicons, and SEO tags
|
|
|
|
|
- 💅 **CSS Utilities** - Grid helpers, breakpoint utilities, and base styles for web components
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
|
|
@@ -114,7 +114,8 @@ const myStyles = litCss`
|
|
|
|
|
`;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Available breakpoint helpers:
|
|
|
|
|
**Available breakpoint helpers:**
|
|
|
|
|
|
|
|
|
|
- `cssForDesktop(css)` - Styles for 1600px and above
|
|
|
|
|
- `cssForNotebook(css)` - Styles for 1240px and below
|
|
|
|
|
- `cssForTablet(css)` - Styles for 1024px and below
|
|
|
|
|
@@ -184,6 +185,7 @@ keyboard.stopListening();
|
|
|
|
|
**Available Keys:**
|
|
|
|
|
|
|
|
|
|
All standard keyboard keys are available in the `Key` enum, including:
|
|
|
|
|
|
|
|
|
|
- Modifiers: `Ctrl`, `Shift`, `Alt`
|
|
|
|
|
- Letters: `A` through `Z`
|
|
|
|
|
- Numbers: `Zero` through `Nine`
|
|
|
|
|
@@ -298,7 +300,8 @@ class MyElement extends LitElement {
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
The `elementBasic.staticStyles` includes:
|
|
|
|
|
**The `elementBasic.staticStyles` includes:**
|
|
|
|
|
|
|
|
|
|
- Box-sizing reset
|
|
|
|
|
- Smooth transitions for background and color
|
|
|
|
|
- Custom scrollbar styles
|
|
|
|
|
@@ -455,12 +458,12 @@ Targets the latest version of Chrome. For other browsers, you may need to includ
|
|
|
|
|
|
|
|
|
|
## Why @design.estate/dees-domtools?
|
|
|
|
|
|
|
|
|
|
✅ **Race-condition free** - Carefully designed initialization prevents common timing issues
|
|
|
|
|
✅ **TypeScript first** - Full type safety and IntelliSense support
|
|
|
|
|
✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
|
|
|
|
|
✅ **Batteries included** - Everything you need for sophisticated web apps
|
|
|
|
|
✅ **Production ready** - Used in real-world applications at design.estate
|
|
|
|
|
✅ **Well maintained** - Active development and support
|
|
|
|
|
- ✅ **Race-condition free** - Carefully designed initialization prevents common timing issues
|
|
|
|
|
- ✅ **TypeScript first** - Full type safety and IntelliSense support
|
|
|
|
|
- ✅ **Modern APIs** - Built on Lit, RxJS, and other modern web standards
|
|
|
|
|
- ✅ **Batteries included** - Everything you need for sophisticated web apps
|
|
|
|
|
- ✅ **Production ready** - Used in real-world applications at design.estate
|
|
|
|
|
- ✅ **Well maintained** - Active development and support
|
|
|
|
|
|
|
|
|
|
## Related Packages
|
|
|
|
|
|
|
|
|
|
|