My Website

OpenWeb Pages

Attendance Chat Email Upload

Other Pages

OJT Attendance LUXOWASH

Live Pages

AUTOLANDIA Automatic System Service Bad Phone Number Inputs Black Blog Next Chatbot Code Notes Code Chatbot DCI DOC to PDF Electronic Gadget Store | School Work Expenses and Savings Flask Web App Live HTML LUXOWASH Multiplication Table | School Work My old HTML practice website My old code collection Number Memory Game Personal Webpage | School Work PDF to DOC POS Sample QR Generator Rainbow React Web App Simple Web Calculator Site This website's old version Test Website Typey WebBook Web OTP Website Observation 1 | School Work Women with Baskets | School Work

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:

color-red

backgroundColor-blue

margin-10px

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

ectable

ectable-alternate

ectable-contrast

Horizontal Lists

eclisth

eclisthc-20

eclisthf-10

Vertical Lists

eclistv

eclistvc-20

eclistvf-10

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.