Getting Started

The armpitMFG theme is a comprehensive design system delivered via CDN, making it easy to create consistent, beautiful interfaces across all your projects.

Installation

The theme is served from our CDN and requires no npm installation. Simply add the stylesheet links to your HTML or layout file:

<!-- In your HTML <head> -->
<link rel="stylesheet" href="https://cdn.armpitmfg.com/theme/v1/css/variables.css" />
<link rel="stylesheet" href="https://cdn.armpitmfg.com/theme/v1/css/base.css" />
<link rel="stylesheet" href="https://cdn.armpitmfg.com/theme/v1/css/components.css" />
<link rel="stylesheet" href="https://cdn.armpitmfg.com/theme/v1/css/utilities.css" />

With Cache Busting (Recommended)

For Next.js or dynamic applications, use a cache-buster to ensure you get fresh styles after theme updates:

// In your layout.tsx
const getCacheBuster = () => {
  const fourHours = 4 * 60 * 60 * 1000;
  return Math.floor(Date.now() / fourHours);
};

const THEME_BASE = `https://cdn.armpitmfg.com/theme/v1`;
const v = getCacheBuster();

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="dark">
      <head>
        <link rel="stylesheet" href={`${THEME_BASE}/css/variables.css?v=${v}`} />
        <link rel="stylesheet" href={`${THEME_BASE}/css/base.css?v=${v}`} />
        <link rel="stylesheet" href={`${THEME_BASE}/css/components.css?v=${v}`} />
        <link rel="stylesheet" href={`${THEME_BASE}/css/utilities.css?v=${v}`} />
      </head>
      <body>{children}</body>
    </html>
  );
}

CSS Files

FileDescriptionRequired
variables.cssCSS custom properties (colors, spacing, typography)Yes
base.cssReset and base element stylesYes
components.cssPre-built component styles (buttons, cards, forms)Recommended
utilities.cssUtility classes (flex, grid, spacing, text)Recommended

Theme Modes

The theme supports light and dark modes via the data-theme attribute:

<!-- Dark mode (default) -->
<html data-theme="dark">

<!-- Light mode -->
<html data-theme="light">

<!-- System preference -->
<html data-theme="system">

Next Steps