css-exp

css-exp

Dynamic CSS property binding using JavaScript expressions. Bind CSS properties to element dimensions, create responsive layouts, and implement conditional styling.

Installation

npm install css-exp

CDN

<script src="https://unpkg.com/css-exp@latest/dist/css-exp.min.js"></script>

Usage

Basic Example

<div id="container" style="width: 1000px;">
  <div data-expression="this.width = el('#container').width * 0.5"></div>
</div>

<script type="module">
  import { cssExp } from 'css-exp';
  cssExp.start();
</script>

Responsive Layout

<div data-expression="
  this.display = el('#sidebar').width > 768 ? 'flex' : 'block';
  this.fontSize = this.width < 480 ? 14px : 16px;
"></div>

Expression Syntax

Access element properties using el('#selector') or reference the current element with this:

// Element dimensions  
this.width = el('#container').width * 0.5;
this.height = this.baseHeight * 1.2;

// Conditional styling
this.display = el('#menu').width > 768 ? 'block' : 'none';

// Logical operators
this.fontSize = this.width > 500 && this.height > 300 ? 18px : 14px;

Available Properties

• width, height, top, left, right, bottom
• fontSize, lineHeight, letterSpacing, fontWeight
• Base values: baseWidth, baseHeight, baseFontSize, etc.

API

import { cssExp } from 'css-exp';

cssExp.start();                                    // Initialize
cssExp.addBinding(element, 'width', 'this.baseWidth * 2');  // Add binding
cssExp.removeBindings(element);                    // Remove bindings
cssExp.destroy();                                  // Cleanup

Development

npm install
npm test
npm run build

License

MIT