Briklab Docs

Stylesheet Examples ​

Real-world examples and common patterns for using Stylesheet in your applications.

Bootstrap-style Components ​

Create reusable component styles:

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

class Components {
  static button(variant: "primary" | "secondary" | "danger"): InlineStyle {
    const colors = {
      primary: { bg: "#007bff", text: "white" },
      secondary: { bg: "#6c757d", text: "white" },
      danger: { bg: "#dc3545", text: "white" }
    };

    const color = colors[variant];
    return new InlineStyle({
      backgroundColor: color.bg,
      color: color.text,
      padding: "8px 16px",
      border: "none",
      borderRadius: "4px",
      cursor: "pointer",
      fontSize: "14px"
    }, "boundary");
  }

  static card(): InlineStyle {
    return new InlineStyle({
      border: "1px solid #ddd",
      borderRadius: "8px",
      padding: "16px",
      backgroundColor: "white",
      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
    }, "boundary");
  }

  static badge(color: string): InlineStyle {
    return new InlineStyle({
      display: "inline-block",
      backgroundColor: color,
      color: "white",
      padding: "4px 8px",
      borderRadius: "12px",
      fontSize: "12px",
      fontWeight: "bold"
    }, "boundary");
  }
}

// Usage
Components.button("primary").applyTo(document.querySelector(".btn-primary"));
Components.card().applyTo(document.querySelector(".card"));

Live Demo - Component Styling ​

Console
No logs yet.

Form Styling ​

Style form elements consistently:

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

class FormStyles {
  static input(): InlineStyle {
    return new InlineStyle({
      width: "100%",
      padding: "8px 12px",
      border: "1px solid #ddd",
      borderRadius: "4px",
      fontSize: "14px",
      fontFamily: "inherit"
    }, "boundary");
  }

  static label(): InlineStyle {
    return new InlineStyle({
      display: "block",
      marginBottom: "4px",
      fontWeight: "500",
      color: "#333"
    }, "boundary");
  }

  static formGroup(): InlineStyle {
    return new InlineStyle({
      marginBottom: "16px",
      display: "flex",
      flexDirection: "column"
    }, "boundary");
  }

  static applyToForm(formElement: HTMLElement): void {
    formElement.querySelectorAll("input").forEach(input => {
      this.input().applyTo(input);
    });

    formElement.querySelectorAll("label").forEach(label => {
      this.label().applyTo(label);
    });

    formElement.querySelectorAll(".form-group").forEach(group => {
      this.formGroup().applyTo(group);
    });
  }
}

FormStyles.applyToForm(document.querySelector("form"));

Grid Layout ​

Create flexible grid layouts:

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

class GridLayout {
  static container(columns: number): InlineStyle {
    return new InlineStyle({
      display: "grid",
      gridTemplateColumns: `repeat(${columns}, 1fr)`,
      gap: "16px",
      padding: "16px"
    }, "boundary");
  }

  static item(): InlineStyle {
    return new InlineStyle({
      padding: "16px",
      backgroundColor: "#f5f5f5",
      borderRadius: "8px"
    }, "boundary");
  }
}

const container = document.querySelector(".grid");
if (container) {
  GridLayout.container(3).applyTo(container);

  container.querySelectorAll(".grid-item").forEach(item => {
    GridLayout.item().applyTo(item);
  });
}

Flexbox Components ​

Build flexbox-based components:

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

class FlexboxComponents {
  static row(): InlineStyle {
    return new InlineStyle({
      display: "flex",
      flexDirection: "row",
      gap: "8px",
      alignItems: "center"
    }, "boundary");
  }

  static column(): InlineStyle {
    return new InlineStyle({
      display: "flex",
      flexDirection: "column",
      gap: "8px"
    }, "boundary");
  }

  static spacer(): InlineStyle {
    return new InlineStyle({
      flex: "1"
    }, "boundary");
  }

  static centerContent(): InlineStyle {
    return new InlineStyle({
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      height: "100vh"
    }, "boundary");
  }
}

// Apply to navigation
FlexboxComponents.row().applyTo(document.querySelector("nav"));

Animation Support ​

Add animation properties:

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

class AnimatedStyles {
  static fadeIn(): InlineStyle {
    return new InlineStyle({
      animation: "fadeIn 0.3s ease-in",
      opacity: "1"
    }, "boundary");
  }

  static slideIn(): InlineStyle {
    return new InlineStyle({
      animation: "slideIn 0.5s ease-out",
      transform: "translateX(0)"
    }, "boundary");
  }

  static pulseEffect(): InlineStyle {
    return new InlineStyle({
      animation: "pulse 2s infinite"
    }, "boundary");
  }
}

// Note: Add @keyframes animations to global CSS

Next Steps ​