Getting Started

Home/Getting Started

Installation

Choose the method that fits your project.

npm / pnpm

pnpm add archcss
# or
npm install archcss

Then link the stylesheet in your HTML:

<link rel="stylesheet" href="node_modules/archcss/dist/index.css">

CDN (unpkg)

<link rel="stylesheet" href="https://unpkg.com/archcss@3.0.0-beta.1/dist/ui/style.css">

Compiled CSS

The published package is designed for direct usage with compiled assets. Link the CSS file from your installed package or copy the compiled file into your public assets.

<link rel="stylesheet" href="node_modules/archcss/dist/index.css">

Configuration

The published package ships as compiled CSS and JavaScript, pre-configured with sensible defaults - there's nothing to set up before you start. The tables below describe the flags and tokens baked into that build.

Coming soon. Overriding these values yourself by compiling ArchCSS from its SCSS source will be supported in an upcoming release. For now, the values below reflect the published CSS as-is.

Feature flags

Variable	Default	Description
`$enable_google-fonts`	`true`	Load Google Fonts via CDN `@import`
`$enable_fontawesome`	`true`	Load bundled Font Awesome CSS
`$enable_lucide`	`true`	Load Lucide icon base CSS + helper utilities
`$enable_webkit`	`true`	Include webkit-prefixed properties
`$enable_outline`	`false`	Enable outline border variant utilities
`$enable_fonts-minify`	`true`	Use minified webfont CSS files

Design tokens

Variable	Default	Description
`$primary`	`#03A9F4`	Brand primary color
`$secondary`	`#333333`	Brand secondary color
`$spacer`	`1rem`	Base spacing unit (grid-gutter-width)
`$border-radius`	`4px`	Default border radius
`$font-size`	`1em`	Base font size
`$grid-design`	`12`	Number of grid columns

Responsive variants

Almost every utility in ArchCSS ships with responsive variants using a mobile-first approach. Prefix any class with a breakpoint name followed by \:.

<!-- hidden on mobile, flex from md up -->
<div class="hidden md:flex items-center">...</div>

<!-- text-left on mobile, text-center from lg up -->
<p class="text-left lg:text-center">...</p>

Breakpoints

Prefix	Min-width	Device
`xs:`	375px	Small phones
`sm:`	544px	Mobile
`md:`	768px	Tablet
`lg:`	992px	Desktop
`xl:`	1200px	HD desktop
`xxl:`	1440px	Full HD

Mobile-first. Responsive prefixes apply from the breakpoint and up - md:flex means flex on tablets and wider, not only on tablets.

Your first page

A minimal HTML template using ArchCSS utilities:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="dist/index.css">
</head>
<body>

  <nav class="flex items-center justify-between px-4 py-3 bg-dark">
    <span class="fs-5 fw-700 text-white">My App</span>
    <a href="#" class="bg-primary text-white px-4 py-2 rounded">Sign in</a>
  </nav>

  <main class="px-4 py-5 text-center">
    <h1 class="fs-1 fw-700">Welcome</h1>
    <p class="text-secondary">Built with ArchCSS.</p>
  </main>

  <script src="dist/webfonts/lucide/js/lucide.min.js"></script>
  <script>lucide.createIcons();</script>

</body>
</html>