Briklab Docs

Getting Started with Stylesheet ​

Stylesheet provides utilities for creating and managing CSS styles programmatically in JavaScript/TypeScript.

What is Stylesheet? ​

The InlineStyle class lets you build inline styles with a chainable API, and the StyleSheet class helps you manage CSS rules programmatically.

ts
import { InlineStyle, StyleSheet } from "@briklab/lib/stylesheet";

// Create inline styles
const style = new InlineStyle({ color: "red", fontSize: "16px" }, "boundary");
style.applyTo(document.getElementById("element"));

// Manage stylesheets
const sheet = new StyleSheet();
sheet.set(".title", new InlineStyle({ fontWeight: "bold" }));
console.log(sheet.generate());

Basic Usage ​

InlineStyle Class ​

ts
import { InlineStyle } from "@briklab/lib/stylesheet";

// Create a style
const style = new InlineStyle({
  color: "blue",
  backgroundColor: "white",
  padding: "10px"
}, "boundary");

// Add more styles (chainable)
style.addStyleWithObject({
  fontSize: "14px",
  fontWeight: "bold"
});

// Remove styles
style.removeStyle("backgroundColor");

// Apply to an element
style.applyTo(document.getElementById("myDiv"));

StyleSheet Class ​

ts
import { InlineStyle, StyleSheet } from "@briklab/lib/stylesheet";

const sheet = new StyleSheet();

// Add rules
sheet.set(".button", new InlineStyle({ 
  padding: "8px 16px",
  border: "1px solid #ccc"
}));

sheet.set(".button:hover", new InlineStyle({
  backgroundColor: "#f0f0f0"
}));

// Generate CSS
const css = sheet.generate();
console.log(css);

Live Demo ​

Console
No logs yet.

Features ​

  • Chainable API: Fluent interface for style building
  • Dynamic Styling: Apply styles programmatically
  • CSS Generation: Generate complete stylesheets
  • Safe Updates: Type-safe style property names
  • Protection Levels: Control strictness

Common Properties ​

Common CSS properties you can use:

  • Layout: width, height, padding, margin, display, flexDirection
  • Colors: color, backgroundColor, borderColor
  • Typography: fontSize, fontFamily, fontWeight, lineHeight
  • Borders: border, borderRadius, borderWidth
  • Positioning: position, top, left, zIndex

Next Steps ​

Learn more about Stylesheet: