core-concepts
Introduction
Start building with @purposeUI
Overview
@purposeUI is a SCSS framework that equips developers with a robust set of responsive utility classes, fluid design tokens, and scalable mixins—enabling faster, more consistent, and future-ready UI/UX implementations across digital projects.
File structure
| Layer | Style |
|---|---|
| mixins | Global SCSS mixins for fluid sizing, media/container queries, and utility class generation |
| 01.theme | Root-level CSS variables for theming purposes |
| 02.base | Base styles including resets, grid columns, fonts, and typography |
| 03.components | Reusable UI components like buttons, icons, and separators |
| 04.utilities | Predefined utility classes for common styling needs |
| 05.app | Custom styles specific to the website or application |
| tokens.scss | Configuration file for design tokens like colors, font sizes, and effects |