Headings, inline text, blockquote, lists, code blocks.
FAP CSS
A lightweight, classless-first CSS framework. Semantic HTML. Zero classes required. Dark mode. HTMX-ready. 87 FABCONS icons.
Getting Started
Bundle (recommended)
One CSS file includes the full framework, Public Sans font, and all 87 FABCONS icons:
<link rel="stylesheet" href="fap.bundle.css">
<link rel="stylesheet" href="fap.themes.css">
<script src="fap.js" defer></script>Individual files
For more control, load each part separately:
<!-- Core framework -->
<link rel="stylesheet" href="fap.min.css">
<!-- Self-hosted Public Sans font (optional) -->
<link rel="stylesheet" href="fap.public-sans.css">
<!-- FABCONS icons (optional) -->
<link rel="stylesheet" href="fabcons.min.css">
<!-- Theme overrides (user-editable) -->
<link rel="stylesheet" href="fap.themes.css">
<!-- JS utilities: theme toggle, dialog, accordion, copy, scroll-top (optional) -->
<script src="fap.js" defer></script>Or install via npm:
npm install fap-cssBase
Core HTML elements styled without classes.
Variants, states, icons in buttons.
Text inputs, selects, checkboxes, radios, file inputs.
Search bars, URL copy, email subscribe.
Responsive tables with overflow wrapper.
Components
Interactive UI components — mostly classless.
Horizontal nav, dropdown menus, avatar summary.
Image, initials, and icon avatars.
Card layouts with header, footer, and grid.
Details/summary with auto-close and exclusive modes.
Native modal dialog.
Progress bars, meters, and output elements.
CSS-only tabs via radio buttons.
Semantic badges and pill variants.
CSS-only tooltips via data attributes.
Toast notifications with JS variants.
Accessible breadcrumb navigation.
Vertical timeline with semantic dots and zigzag variant.
Native popover element — no JS needed.
Layout
Auto grid, sidebar, app shell, overflow, embed, cluster, sticky.
Scroll-snap carousel, lightbox, thumbnail grid, masonry.
Icons
87 FABCONS SVG icons. Inherit currentColor. Scale with font-size.
Normalized native emoji. Zero bytes shipped.
Features
Figure, video, abbreviation, address, content editable, inert.
Built-in HTMX lifecycle classes. Indicators, settle, error shake.
Skeleton loading, lazy images, print stylesheet.
10 CSS custom properties drive all colors. Light/dark toggle.