ocho

lightweight base-8 css framework

Introduction

ocho is a lightweight css framework designed around a base-8 system for clean, tight layouts.

Features

Base-8 spacing system
Mobile-first approach
Responsive design

Flexbox Layout

ocho provides a simple layout system that uses the grid system to create a responsive layout.

.col

.col-7

.col-3

.col-4

.col-2

CSS Grid

The grid system uses a 16-column layout that works consistently across all screen sizes. Blocks stack into a single column on very small screens (below 600px) for optimal mobile experience.

Use .full or .span-16 to span the full width, or .span-1 through .span-16 for specific column spans.

.full

.span-8

.span-4

.span-6

.span-10

.span-2

.span-12

.span-2

.span-12

.span-4

.span-2

.span-14

Responsive Behavior

All span classes maintain their proportions on tablets and desktops, but stack into a single column on small mobile screens (below 600px) for optimal readability.

Buttons

ocho uses the Geist font for headings and Space Mono for body text.

Forms

Typography

ocho uses the Geist font for headings and Space Mono for body text.

Heading 1

Heading 2

Heading 3

Paragraph