axis-twelve
v2.3.0
Published
Build faster, center easier. Modular CSS framework with grid, flexbox, utilities, typography, behavior components, and comprehensive UI toolkit.
Maintainers
Readme
Axis Twelve
Build faster, center easier. Modular CSS framework.
Interactive Documentation | Examples
Axis Twelve is a professional, modular CSS framework featuring a powerful 12-column grid system, comprehensive flexbox utilities, and a complete set of UI components.
✨ Key Features
- Modular Architecture - Import only what you need with separate builds
- 12-Column Grid System - Responsive, flexible, and easy to use
- Complete UI Components - Buttons, forms, modals, tooltips, tables, cards, toggle switches, star ratings
- Enhanced Dark Mode - System preference detection, 25+ CSS custom properties, component-specific overrides
- Animation Utilities - 20+ preset animations, timing controls, state management
- CSS-Only - No JavaScript required for core functionality
- Accessibility First - WCAG 2.1 compliant, keyboard navigation support, reduced motion support
- LTR & RTL Support - Native support for all text directions via CSS Logical Properties
- Responsive Breakpoints - xs, sm, md, lg, xl, xxl
- Ultra-Lightweight - Modular builds from 1KB to 18KB minified
🚀 Quick Start
Installation
Via npm:
npm install axis-twelveVia pnpm:
pnpm install axis-twelveVia CDN:
<!-- Full framework -->
<link rel="stylesheet" href="https://unpkg.com/axis-twelve/dist/axis-twelve.min.css" />
<!-- Or individual modules -->
<link rel="stylesheet" href="https://unpkg.com/axis-twelve/dist/modules/axis-buttons.min.css" />
<link rel="stylesheet" href="https://unpkg.com/axis-twelve/dist/modules/axis-forms.min.css" />📦 Module Sizes
All sizes are approximate and measured from the actual compiled CSS files.
Core Modules
| Module | Uncompressed | Minified | Gzipped | | ---------------------- | ------------ | -------- | ------- | | axis-twelve (full) | 110 KB | 84 KB | 13 KB | | axis-layout | 95 KB | 69 KB | 10 KB | | axis-utilities | 45 KB | 36 KB | 6 KB | | axis-typography | 21 KB | 16 KB | 3 KB | | axis-behavior | 19 KB | 16 KB | 4 KB | | axis-indicators | 13 KB | 11 KB | 3 KB |
Component Modules
| Module | Uncompressed | Minified | Gzipped | | -------------------------- | ------------ | -------- | ------- | | axis-forms | 10 KB | 9 KB | 2 KB | | axis-navigation | 9 KB | 8 KB | 2 KB | | axis-range-slider | 9 KB | 8 KB | 2 KB | | axis-buttons | 7 KB | 6 KB | 2 KB | | axis-file-upload | 8 KB | 7 KB | 2 KB | | axis-container-queries | 7 KB | 6 KB | 2 KB | | axis-print | 8 KB | 6 KB | 2 KB | | axis-toasts | 6 KB | 5 KB | 2 KB | | axis-cards | 4 KB | 4 KB | 1 KB | | axis-modals | 4 KB | 4 KB | 1 KB | | axis-empty-states | 4 KB | 4 KB | 1 KB | | axis-tooltips | 5 KB | 5 KB | 1 KB | | axis-tables | 4 KB | 3 KB | 1 KB | | axis-skeletons | 4 KB | 3 KB | 1 KB | | axis-motion | 16 KB | 13 KB | 3 KB | | axis-dark-mode | 13 KB | 12 KB | 2 KB | | axis-toggle-switch | 6 KB | 5.5 KB | 1 KB | | axis-rating | 6 KB | 5 KB | 1 KB |
🔗 Links
- Documentation: docs/v2/
- Examples: examples
- GitHub: github.com/dale-tomson/axis-twelve
- npm: www.npmjs.com/package/axis-twelve
- Changelog: CHANGELOG.md
MIT Licensed | Copyright © 2023 Dale Tomson
