Axis Twelve

v1.0.1

Build faster, center easier. The 12-column solution.

Welcome to Axis Twelve

Axis Twelve is a professional CSS framework with SCSS support featuring a powerful 12-column grid system, comprehensive flexbox utilities, powerful centering components, and extensive spacing utilities. Everything you need to build modern, responsive web layouts quickly and easily.

Key Features

📐

12-Column Grid

Powerful responsive grid system with breakpoints and offsets

Flexbox Ready

Complete flexbox utilities for modern layouts

🎯

Easy Centering

Powerful centering utilities for perfect alignment

📏

Spacing Utilities

Comprehensive padding, margin, and gap utilities

Interactive Examples

Complete Feature Demo

A comprehensive showcase of all Axis Twelve features including grid layouts, flexbox utilities, centering components, and spacing utilities.

Topics Covered:
  • ✓ Grid system (all column splits)
  • ✓ Flexbox layouts
  • ✓ Centering methods
  • ✓ Quick reference
Grid Layouts

Master the 12-column grid system with basic layouts, complex designs, offsets, gap utilities, and nested grids.

Topics Covered:
  • ✓ Basic grid layouts
  • ✓ Column splits & gaps
  • ✓ Offsets & alignment
  • ✓ Nested grids
Flexbox Utilities

Explore flexbox layouts with direction control, alignment options, gap utilities, and practical components.

Topics Covered:
  • ✓ Flex direction & wrapping
  • ✓ Justify content options
  • ✓ Align items utilities
  • ✓ Practical patterns
Centering Components

Learn multiple ways to center content: row component, column component, flexbox, grid offsets, and hero sections.

Topics Covered:
  • ✓ Row & column components
  • ✓ Flexbox centering
  • ✓ Grid offset centering
  • ✓ Hero sections & modals
Spacing Utilities

Master spacing with padding, margin, and gap utilities. Learn named sizes, numeric scale, and responsive spacing.

Topics Covered:
  • ✓ Padding & margin utilities
  • ✓ Named & numeric sizes
  • ✓ Responsive spacing
  • ✓ Practical patterns
Real-World Examples

See Axis Twelve in action with real-world layouts including headers, hero sections, features, products, and more.

Topics Covered:
  • ✓ Website headers
  • ✓ Hero sections
  • ✓ Product showcases
  • ✓ Blog layouts

Quick Start

Get started with Axis Twelve in seconds. Simply include the CSS file and start building:

<link rel="stylesheet" href="dist/axis-twelve.css">

📚 View Full Documentation →