ECStyleSheet Demo

A client-side utility CSS engine.

How to Import & Use

1. Add the script to your HTML <head>:

<head>
    <script src="js/ECStyleSheet.js"></script>
</head>

2. Use utility style classes directly in your HTML elements:

<div class="backgroundColor-blue color-white padding-10px hover:opacity-0.8">
    Styled Element
</div>

1. Basic Property Styling

Use standard CSS properties mapped to class names. Spaces are written as underscores (_).

class="backgroundColor-#007bff color-white padding-15px borderRadius-8px fontWeight-bold textAlign-center"

2. Hover & State Modifiers

Prefix classes with pseudo-selectors like hover:.

3. Built-in Special Classes

Use native shortcuts like eccard, ecgrid-XxY, and ecbounce-N.

Bounce 5%

Hover & click this card to see transition animations.

Bounce 10%

Bigger scaling effect on hover and active click states.

Static Card

Standard eccard class without bounce modifier.

Responsive Breakpoints

Resize your screen width. (Note: Put larger breakpoints first in your class list so smaller media queries correctly override them):

Default View (Gray) / Tablet <= 1024px (Yellow) / Mobile <= 768px (Red)

5. Dynamic Dynamic Class Injection

The observer automatically registers and generates styles for classes injected at runtime via JavaScript.

This box has no custom background/text styles until you click the button above.