A single CSS file with no JavaScript and no runtime overhead. Just pure CSS that works everywhere.
Built entirely on flexbox for predictable, powerful layouts without the complexity of float or grid hacks.
Grid columns, gap steps, padding, container width, transitions, and more. Every aspect is controlled via SCSS variables.
From small mobile to ultrawide monitors: sm, md, lg, sp, mg, ut. Full control at every screen size.
Responsive padding, margin, gap, alignment, visibility, and more. All following a consistent naming convention.
Debug your layouts instantly with a single ID. See column boundaries, sizes, and breakpoint info at a glance.
Column widths are calculated accounting for gaps automatically. No more broken layouts from spacing math.
No JavaScript frameworks required. Use the prebuilt CSS directly or customize via SCSS with your preferred build tool.
Build complex layouts in seconds with a flexible grid system that defaults to 16 columns but can be configured to any number you need. Gaps, padding steps, container widths, and transitions are all customizable via SCSS variables. Every width calculation accounts for gaps automatically, and six responsive breakpoints let you adapt any layout from mobile to ultrawide.
Enable wireframe mode with a single ID on the body tag and instantly see your grid structure highlighted with colored outlines. Each column shows its breakpoint name and size, making it easy to spot alignment issues and fine-tune your responsive layouts before going to production.
Each breakpoint uses a mobile-first approach with min-width media queries. Classes follow the pattern fl-{breakpoint}-{property}-{value} for a consistent, predictable API.
smmdlgspmgutChoose your preferred method: install via npm to customize grid columns, gaps, padding, container width, transitions and more via SCSS — or include the CDN link for zero configuration.
npm install @daveaki/flexocss<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">