Original utility CSS system

Utility Canvas gives EduSmartUp an original utility-first teaching layer.

This guide covers the same broad problem space people usually expect from lightweight CSS utility frameworks, but with a distinct naming system, original presentation, and a starter file you can extend inside the site.

Downloadable starter Responsive utilities No external dependency

01starter CSS file

10core utility groups

30+example class patterns

02responsive prefixes

Philosophy

Utility Canvas uses small, readable classes for structure and state while leaving room for page-level custom styling. It is not meant to replace semantic naming everywhere. Instead, it speeds up scaffolding, prototyping, and tutorial demos.

What it optimizes for

Fast layout assembly
Consistent spacing
Predictable responsive behavior
Readable class families
Low ceremony in examples
Easy extension per project

What it does not try to be

A giant full design system
A component library with JS plugins
A replacement for semantic HTML
A one-class-per-everything framework
A copy of any third-party naming model
A visual identity lock-in

Install and Use

The starter file already lives in this project at:

utility-canvas/canvas.css

HTML

<link rel="stylesheet" href="canvas.css">

<section class="uc-container uc-stack-4 uc-py-2">
  <div class="uc-badge">Utility Canvas</div>
  <div class="uc-grid-3">
    <article class="uc-card uc-p-3">Card one</article>
    <article class="uc-card uc-p-3">Card two</article>
    <article class="uc-card uc-p-3">Card three</article>
  </div>
</section>

Pragmatic rule

Use utilities for structure, spacing, and quick state handling. Use component classes for anything that has a stable product meaning, like .pricing-card, .faq-item, or .dashboard-shell.

Layout Utilities

Class family	Purpose	Example
`.uc-container`	Constrains content to a readable width	`<main class="uc-container">`
`.uc-grid-2`, `.uc-grid-3`, `.uc-grid-4`	Creates quick equal-column grids	`<div class="uc-grid-3">`
`.uc-cluster`	Lines up inline items with wrapping	`<div class="uc-cluster">`
`.uc-between`	Pushes items apart horizontally	`<header class="uc-between">`
`.uc-center`	Centers content on both axes	`<div class="uc-center">`

HTML

<section class="uc-container uc-stack-3">
  <div class="uc-between uc-wrap">
    <h2 class="uc-text-xl uc-heavy">Course dashboard</h2>
    <a class="uc-btn uc-btn-brand" href="#">Create project</a>
  </div>

  <div class="uc-grid-3">
    <article class="uc-card uc-p-3">Progress</article>
    <article class="uc-card uc-p-3">Streak</article>
    <article class="uc-card uc-p-3">Saved labs</article>
  </div>
</section>

Spacing and Sizing

Spacing utilities prevent the slow drift that happens when every component invents its own margins and padding.

Padding scale

.uc-p-1 = 8px
.uc-p-2 = 14px
.uc-p-3 = 20px
.uc-p-4 = 28px
.uc-px-3 = inline 20px
.uc-py-2 = block 14px

Spacing rhythm

.uc-stack-1 small grouping
.uc-stack-2 default grouping
.uc-stack-3 section spacing
.uc-stack-4 page spacing
.uc-mt-2 14px top margin
.uc-mt-4 30px top margin

Typography and Color

Keep typography utilities small. A utility layer should accelerate hierarchy, not replace all design judgment.

Text classes

.uc-text-xs
.uc-text-sm
.uc-text-lg
.uc-text-xl
.uc-strong
.uc-heavy
.uc-muted
.uc-center-text

Color classes

.uc-bg-brand
.uc-bg-accent
.uc-bg-violet
.uc-bg-soft
.uc-text-brand
.uc-text-success
.uc-text-warn
.uc-text-danger

Surface and States

Surfaces define how content feels. Buttons, badges, cards, panels, and inputs need predictable defaults.

HTML

<div class="uc-card uc-p-4 uc-stack-2">
  <span class="uc-badge">New</span>
  <h3 class="uc-text-lg uc-heavy">Starter project</h3>
  <p class="uc-muted">A fast, readable card with predictable spacing and hierarchy.</p>
  <div class="uc-cluster">
    <a class="uc-btn uc-btn-brand" href="#">Open</a>
    <a class="uc-btn uc-btn-ghost" href="#">Preview</a>
  </div>
</div>

Family	Classes	Use when
Surfaces	`.uc-card`, `.uc-panel`	You need separation between sections or data groups
Borders	`.uc-border`, `.uc-rounded`, `.uc-pill`	You need clearer edges or status pills
Buttons	`.uc-btn-brand`, `.uc-btn-soft`, `.uc-btn-ghost`	You need primary, secondary, and quiet actions
Inputs	`.uc-input`, `.uc-select`, `.uc-textarea`	You need simple, consistent form controls

Responsive Prefixes

The starter file includes two responsive prefixes to keep the system readable:

Prefix	Meaning	Example
`md:`	Apply at medium widths and down based on the included media rules	`md:uc-grid-2`
`sm:`	Apply at small widths and down for tighter mobile adjustments	`sm:uc-hide`

Important Because class names contain a colon, write them directly in HTML like class="uc-grid-4 md:uc-grid-2 sm:uc-grid-2". The CSS file escapes those prefixes for you.

Pattern Recipes

These are the kinds of patterns Utility Canvas can scaffold quickly before you add project-specific component classes.

Hero split

Use .uc-between, .uc-wrap, and .uc-card to build a two-column landing section.

Stats deck

Use .uc-grid-4 or .uc-grid-3 for KPI cards with consistent padding and badge chips.

Dashboard shell

Use .uc-container, .uc-stack-4, and quick grids for overview screens.

Settings form

Use .uc-stack-2, .uc-input, and .uc-btn-soft to ship a readable settings page fast.

Starter Packs

Use Utility Canvas together with Pattern Forge for a complete design-teaching workflow: Pattern Forge helps you choose the interface job, and Utility Canvas helps you scaffold it quickly.

← Pattern Forge Open Try-It Editor →