About
This website serves as an amalgamation of a little bit of everything I know.
ECStyleSheet
ECStyleSheet is a lightweight JavaScript-powered styling engine that automatically generates CSS rules based on class names found in the DOM. Instead of writing traditional CSS files, developers can apply utility-style classes directly in HTML, and the script dynamically converts those classes into real CSS rules at runtime.
The system scans the page for class names, interprets predefined patterns and property-value utilities, and injects the corresponding styles into a generated <style> tag. It also observes DOM changes, ensuring that newly added elements automatically receive the correct styles without requiring manual CSS updates.
Key Features
1. Dynamic CSS Generation
The script parses class names in the DOM and converts them into CSS rules on the fly. For example:
These are automatically transformed into valid CSS declarations and inserted into a stylesheet.
2. Responsive Breakpoints
Classes can include breakpoint prefixes to apply styles conditionally:
mobile:
→ applies styles up to 767px
backgroundColor-blue
→ applies styles between 768px-1023px
margin-10px
→ applies styles 1024px and above
Example:
mobile:fontSize-14px
pc:fontSize-18px
3. Pseudo-Class Support
You can chain pseudo-classes in class names:
hover:backgroundColor-blue
active:transform-scale(0.95)
These are translated into proper CSS selectors.
4. Built-in Component Utilities
The script includes several predefined UI utilities:
Grid System
ecgrid-3x2
→ creates a 3-column × 2-row CSS grid.
Bounce Interaction Animation
ecbounceanimation-10
→ scales elements slightly on hover and active states.
Table Styling
Horizontal Lists
Vertical Lists
5. Automatic DOM Monitoring
A MutationObserver watches for newly added elements. When new nodes appear, their classes are scanned and converted into CSS rules instantly, making it compatible with dynamically rendered content (e.g., SPA frameworks).
6. Performance Optimizations
Processed classes are stored in a cache (Set) to prevent duplicate CSS rule generation, improving performance.
How it works
1. When the page loads, the script creates a <style id="ec-styles"> tag.
2. It scans all DOM elements for class names.
3. Each class is parsed to determine its corresponding properties.
4. The corresponding CSS rule is generated and injected.
5. A MutationObserver continues watching for future DOM changes.
ECElements
This script provides a set of lightweight, JavaScript-powered UI components that integrate seamlessly with ECStyleSheet. Instead of manually writing CSS and HTML structures, developers can instantiate components directly in JavaScript and inject them into the DOM.
Each component is self-contained, dynamically styled, and automatically injects required CSS rules when first used. This makes the system ideal for rapid UI development and dynamic applications.
Available Components
1. ECModal
A customizable modal dialog with dynamic content and buttons.
content
→ modal body content
buttonAmount
→ number of buttons
Example:
const modal = new ECModal({ title: "Hello", content: "World" });
modal.show();
2. ECToggle
A switch toggle component with built-in animation and state control.
const toggle = new ECToggle({ content: "Enable feature" });
document.body.appendChild(toggle.build());
Methods:
setToggleState(true/false)
getToggleState()
3. ECCheckbox
A styled checkbox with smooth animations and label support.
const checkbox = new ECCheckbox({ content: "Accept terms" });
document.body.appendChild(checkbox.build());
Methods:
setCheckedState(true/false)
getCheckedState()
4. ECButton
A reusable button with bounce animation and customizable styling.
const btn = new ECButton({ content: "Click me" });
document.body.appendChild(btn.build());
Supports:
5. ECRadio
A flexible radio button group with customizable layout and colors.
const radio = new ECRadio({ content: ["A", "B", "C"] });
document.body.appendChild(radio.build());
Methods:
setChecked(index)
getSelectedValue()
Key Features
Dynamic Style Injection
Each component injects its required CSS only once, ensuring minimal overhead and avoiding duplicate styles.
Instance-Based Architecture
Global counters ensure each component instance is uniquely identifiable, preventing conflicts in dynamic applications.
Built-in Animations
Components include subtle animations such as bounce effects, hover states, and transitions for better UX.
Dark Mode Support (Modal)
ECModal includes built-in dark mode styling that can be toggled programmatically.
Reusable & Composable
All components return DOM elements via build(), making them easy to insert anywhere in your application.
How it works
1. A component instance is created using its class constructor.
2. Required HTML structure is generated dynamically.
3. Styles are injected once per component type.
4. The component is appended to the DOM using build().
5. Methods allow runtime interaction and updates.