Briklab Docs

Applying Inline Styles to Elements ​

Learn practical techniques for applying inline CSS styles to HTML elements dynamically using InlineStyle.

Basic Element Styling ​

Apply styles directly to a single HTML element:

Console
No logs yet.

Creating Reusable Style Classes ​

Organize your inline styles into reusable classes:

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

class UIStyles {
  // Button styles
  static primaryButton(): InlineStyle {
    return new InlineStyle({
      backgroundColor: "#0066cc",
      color: "white",
      padding: "10px 20px",
      border: "none",
      borderRadius: "4px",
      cursor: "pointer",
      fontSize: "14px",
      fontWeight: "500"
    });
  }

  // Container styles
  static card(): InlineStyle {
    return new InlineStyle({
      border: "1px solid #e0e0e0",
      borderRadius: "8px",
      padding: "16px",
      backgroundColor: "#ffffff",
      boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
    });
  }

  // Text styles
  static heading(): InlineStyle {
    return new InlineStyle({
      fontSize: "24px",
      fontWeight: "600",
      color: "#1a1a1a",
      marginBottom: "12px"
    });
  }
}

// Apply to elements
const buttonEl = document.querySelector(".btn");
if (buttonEl) {
  UIStyles.primaryButton().applyTo(buttonEl);
}

const cardEl = document.querySelector(".card");
if (cardEl) {
  UIStyles.card().applyTo(cardEl);
}

Live demo of reusable styles:

Console
No logs yet.

Conditional Styling ​

Apply different styles based on conditions:

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

function applyStatusStyle(element: HTMLElement, status: "success" | "error" | "warning") {
  const statusStyles = {
    success: {
      backgroundColor: "#d4edda",
      color: "#155724",
      borderLeft: "4px solid #28a745"
    },
    error: {
      backgroundColor: "#f8d7da",
      color: "#721c24",
      borderLeft: "4px solid #dc3545"
    },
    warning: {
      backgroundColor: "#fff3cd",
      color: "#856404",
      borderLeft: "4px solid #ffc107"
    }
  };

  const styles = new InlineStyle(statusStyles[status]);
  styles.applyTo(element);
}

// Usage
applyStatusStyle(document.querySelector(".alert-success"), "success");
applyStatusStyle(document.querySelector(".alert-error"), "error");

Pseudo-Class Styles ​

Handle hover, focus, and other pseudo-classes:

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

class InteractiveStyles {
  static linkStyle(): InlineStyle {
    return new InlineStyle({
      color: "#0066cc",
      textDecoration: "none",
      cursor: "pointer",
      transition: "color 0.2s ease"
    });
  }

  static attachInteractivity(linkElement: HTMLElement) {
    const style = this.linkStyle();
    style.applyTo(linkElement);

    // Hover effect
    linkElement.addEventListener("mouseenter", () => {
      new InlineStyle({
        color: "#0052a3",
        textDecoration: "underline"
      }).applyTo(linkElement);
    });

    // Normal state
    linkElement.addEventListener("mouseleave", () => {
      this.linkStyle().applyTo(linkElement);
    });
  }
}

// Apply to all links
document.querySelectorAll("a").forEach(link => {
  InteractiveStyles.attachInteractivity(link);
});

Group Styling Multiple Elements ​

Apply the same style to multiple elements at once:

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

class BulkStyles {
  static styleElements(selector: string, styleObj: Record<string, string>) {
    const elements = document.querySelectorAll(selector);
    const style = new InlineStyle(styleObj);

    elements.forEach(element => {
      if (element instanceof HTMLElement) {
        style.applyTo(element);
      }
    });
  }

  static createGrid() {
    // Apply grid styles to all grid items
    this.styleElements(".grid-item", {
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      backgroundColor: "#f5f5f5",
      borderRadius: "8px",
      padding: "20px",
      minHeight: "120px"
    });
  }
}

// Usage
BulkStyles.createGrid();

Dynamic Style Updates ​

Update styles in response to user interactions or state changes:

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

class DynamicUI {
  private element: HTMLElement;
  private isActive = false;

  constructor(selector: string) {
    const el = document.querySelector(selector);
    if (!el || !(el instanceof HTMLElement)) {
      throw new Error(`Element not found: ${selector}`);
    }
    this.element = el;
  }

  toggle() {
    this.isActive = !this.isActive;
    this.updateStyle();
  }

  private updateStyle() {
    const style = new InlineStyle(
      this.isActive
        ? {
            backgroundColor: "#28a745",
            color: "white",
            transform: "scale(1.1)"
          }
        : {
            backgroundColor: "#e9ecef",
            color: "#000",
            transform: "scale(1)"
          }
    );

    style.applyTo(this.element);
  }
}

// Usage
const toggle = new DynamicUI(".toggle-btn");
document.querySelector(".toggle-btn")?.addEventListener("click", () => {
  toggle.toggle();
});

Responsive Inline Styles ​

Adapt styles based on viewport size:

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

class ResponsiveUI {
  static applyResponsiveStyles(element: HTMLElement) {
    const updateStyles = () => {
      const isMobile = window.innerWidth < 768;

      const styles = new InlineStyle(
        isMobile
          ? {
              width: "100%",
              padding: "12px",
              fontSize: "14px"
            }
          : {
              width: "50%",
              padding: "20px",
              fontSize: "16px"
            }
      );

      styles.applyTo(element);
    };

    // Apply on load
    updateStyles();

    // Reapply on window resize
    window.addEventListener("resize", updateStyles);
  }
}

// Usage
const container = document.querySelector(".responsive-container");
if (container instanceof HTMLElement) {
  ResponsiveUI.applyResponsiveStyles(container);
}

Next Steps ​