Documentation Overview

FineCSS documentation is HTML-first and copy-paste friendly. Consume the CDN bundle, drop the markup, and your enterprise UI retains accessible defaults without a build step.

The following sections cover the grid system, typography, utilities, core components, and interactive helpers that ship with FineCSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gsazad/finecss@v0.1.0/finecss/css/finecss.css">
<script src="https://cdn.jsdelivr.net/gh/gsazad/finecss@v0.1.0/finecss/js/finecss.js"></script>
<script>FineCSS.init()</script>

Grid system

Containers and rows pair with the 12-column helpers to provide predictable breakpoints and gutters.

<div class="fc-container">
  <div class="fc-row fc-g-3">
    <div class="fc-col-6">Primary</div>
    <div class="fc-col-6">Secondary</div>
  </div>
</div>

<div class="fc-row fc-g-4">
  <div class="fc-col-sm-6 fc-col-md-4">A</div>
  <div class="fc-col-sm-6 fc-col-md-4">B</div>
  <div class="fc-col-sm-12 fc-col-md-4">C</div>
</div>

Typography

Typography tokens include font stacks, line heights, and weight helpers. Combine them with spacing utilities for balanced copy.

<p class="fc-lead">Lead text</p>
<p class="fc-text-muted">Muted caption</p>

<p class="fc-text-center">Center</p>
<p class="fc-text-end">End</p>

Utilities

Utility helpers cover spacing, flex, borders, and focus treatments so you can layer structure without custom CSS.

<div class="u-fc-p-3">Padding</div>
<div class="u-fc-p-4">More padding</div>

<div class="u-fc-d-flex u-fc-gap-3">...</div>

<button class="fc-btn fc-focus-ring">Focusable</button>

Components

<button class="fc-btn fc-btn--primary">Primary</button>
<button class="fc-btn fc-btn--outline">Outline</button>

<div class="fc-card">
  <p class="fc-card__header">Component</p>
  <p>Body copy</p>
</div>

<label class="fc-form-label" for="email">Email</label>
<input class="fc-form-control" id="email" type="email">

<table class="fc-table fc-table--striped fc-table--hover">...</table>

<div class="fc-alert fc-alert--success">
  Success message.
  <button class="fc-alert__close" aria-label="Close">×</button>
</div>

<header class="fc-navbar fc-navbar--primary">...</header>

Interactive JS helpers

The same CDN bundle delivers JS for dropdowns, modals, toasts, carousels, and scrollspy. Call FineCSS.init() once after the script tag.

<script src="https://cdn.jsdelivr.net/gh/gsazad/finecss@v0.1.0/finecss/js/finecss.js"></script>
<script>FineCSS.init()</script>

Accessibility

FineCSS ships with focus-visible outlines, reduced-motion preferences, and WCAG contrast tokens. ARIA roles and keyboard-first interactions are baked into dropdowns, modals, and alerts.

Teams can layer their own landmarks, but rely on the provided utilities to maintain a consistent tab order.

Utilities reference