Getting Started with FineCSS

FineCSS is a dependency-free CSS framework designed for teams that prioritize accessibility, predictable grids, and enterprise polish.

What is FineCSS

FineCSS is a modular CSS system that bundles design tokens, layout utilities, and components in a single CDN-ready package so that you can start styling pages without preprocessing.

When to use FineCSS

Use FineCSS when you need a consistent visual language, accessible defaults, and a lightweight footprint that integrates seamlessly with plain HTML or component-based frameworks.

Enterprise dashboards requiring predictable spacing and color systems.
Documentation sites that must stay dependency-free.
Teams who prefer semantic HTML backed by utility helpers.

How to include FineCSS

Drop these two tags in your <head> and immediately gain access to styling and JS helpers.

<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>

Basic layout example

Combine the container utilities with grid columns for responsive structure.

<div class="fc-container">
  <div class="fc-row">
    <div class="fc-col fc-col-md-4">Navigation</div>
    <div class="fc-col fc-col-md-8">Content</div>
  </div>
</div>

Component examples

Button

Card

Fine-tuned padding, border, and shadow for fast layout.

Form

Name

JS initialization

Call FineCSS.init() after the script bundle to enable interactive helpers such as carousels, dropdowns, and alerts.

The init call is idempotent, so it can safely be invoked multiple times during hydration or SPA navigation.

Accessibility best practices

Prefer semantic landmarks (main, section, footer) when assembling FineCSS layouts.
Rely on :focus-visible support shipped by the framework for clear keyboard cues.
Use the accessible color tokens and avoid overriding them unless you verify WCAG contrast ratios.

FineCSS respects prefers-reduced-motion and provides a consistent tab order across components.