Briklab Docs

Advanced Stylesheet Usage ​

Learn advanced CSS generation, dynamic styling, and complex stylesheet patterns.

Dynamic Style Generation ​

Generate styles programmatically:

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

function generateButtonStyles(primaryColor: string): InlineStyle {
  return new InlineStyle({
    backgroundColor: primaryColor,
    color: "white",
    padding: "8px 16px",
    border: "none",
    borderRadius: "4px",
    cursor: "pointer",
    fontSize: "14px"
  }, "boundary");
}

const buttonStyle = generateButtonStyles("#007bff");
const element = document.querySelector("button");
if (element) {
  buttonStyle.applyTo(element);
}

Chainable Style Modifications ​

Build complex styles with method chaining:

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

const style = new InlineStyle({
  color: "blue",
  fontSize: "16px"
}, "boundary");

style
  .addStyleWithObject({ fontWeight: "bold" })
  .addStyleWithObject({ backgroundColor: "lightblue" })
  .removeStyle("color")
  .applyTo(document.getElementById("myElement"));

Live Demo - Dynamic Styles ​

Console
No logs yet.

Responsive Style Generation ​

Create responsive styles:

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

class ResponsiveLayout {
  getMobileStyles(): InlineStyle {
    return new InlineStyle({
      display: "flex",
      flexDirection: "column",
      width: "100%",
      padding: "8px"
    }, "boundary");
  }

  getDesktopStyles(): InlineStyle {
    return new InlineStyle({
      display: "grid",
      gridTemplateColumns: "1fr 1fr 1fr",
      width: "1200px",
      padding: "20px"
    }, "boundary");
  }

  applyStyles(isMobile: boolean, element: HTMLElement): void {
    const styles = isMobile ? this.getMobileStyles() : this.getDesktopStyles();
    styles.applyTo(element);
  }
}

const layout = new ResponsiveLayout();
const container = document.getElementById("layout");
if (container) {
  layout.applyStyles(window.innerWidth < 768, container);
}

StyleSheet Management ​

Manage multiple CSS rules:

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

const sheet = new StyleSheet();

// Add base styles
sheet.set("body", new InlineStyle({
  margin: "0",
  padding: "0",
  fontFamily: "Arial, sans-serif"
}));

sheet.set(".container", new InlineStyle({
  maxWidth: "1200px",
  margin: "0 auto",
  padding: "20px"
}));

sheet.set(".button", new InlineStyle({
  padding: "8px 16px",
  backgroundColor: "#007bff",
  color: "white",
  border: "none"
}));

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

Theme Management ​

Create and switch themes:

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

class Theme {
  light = {
    background: "white",
    text: "black",
    primary: "#007bff"
  };

  dark = {
    background: "#1e1e1e",
    text: "white",
    primary: "#0d6efd"
  };

  applyTheme(isDark: boolean, element: HTMLElement): void {
    const theme = isDark ? this.dark : this.light;
    const style = new InlineStyle({
      backgroundColor: theme.background,
      color: theme.text
    }, "boundary");
    style.applyTo(element);
  }
}

const theme = new Theme();
const app = document.getElementById("app");
if (app) {
  theme.applyTheme(true, app); // Apply dark theme
}

Next Steps ​