Back to WorkFrontend/Website

AtoZe

An expressive theming playground that unifies raw CSS, SCSS, and Less behind one design language.

Product EngineerUI Designer

CSS · SCSS · Less

Preprocessor coverage

24

Reusable mixins

18

Core components

AtoZe began as a personal lab for stress-testing layout systems and CSS preprocessors. I wanted the flexibility of raw CSS alongside the power of SCSS and Less without repeating myself.

I built a shared design-token pipeline, prototyped complex grid layouts, and documented reusable patterns so the project could scale across multiple preprocessors with confidence.

Challenge

Rapidly iterating on styles in different preprocessors was leading to duplicated logic and hard-to-manage theme variants.

Approach

Created a single source of truth for tokens, mixins, and utilities that compiled cleanly to CSS, SCSS, and Less while preserving semantic markup.

Outcome

Cut style duplication by roughly 40% and reduced theme iteration time from hours to minutes when prototyping new looks.

Highlights
  • Shared design-token pipeline compiled into three preprocessors
  • Animation-ready component styles with accessible defaults
  • Documented layout recipes for future marketing pages

Core Capabilities

Responsive layouts powered by CSS Grid and Flexbox
Theme variants generated through SCSS and Less mixins
Semantic HTML structure ready for accessibility audits
Progressive enhancement with lightweight JavaScript
Modular PHP includes for shared layout pieces