Core-Framework
A visual CSS framework and design-token builder for the web, WordPress, and Figma.
What is it?
What it is
A visual CSS framework and design-token builder that enables creating a unified design system once and deploying it across web, WordPress, and Figma platforms.
Why it exists
To provide a visual source of truth for design systems, making them easier to understand and maintain than traditional CSS, while ensuring portability and systematic design.
Who should use it
Frontend developers, UI/UX designers, WordPress developers, design system maintainers, and creative agencies who want to build and maintain design systems visually without hand-coding CSS
Who should avoid it
Developers who prefer writing raw CSS/SCSS, teams with strict no-visual-tools policies, or organizations requiring proprietary licensing
Stars over time
No change stars in the last 1 day
How it works
A quick walkthrough in plain English
How Core-Framework works
Step 1 of 3
You interact with it
Open Core-Framework, send a request, or connect it to your stack.
Features
Advantages
- Open source and free to use
- No license activation or premium code paths
- Provides a visual source of truth for the whole team
- Generates standards‑based, portable CSS
- Works across web, WordPress, Figma, and multiple builders
- Local‑first, no backend or account needed
- All integrations included in the repository
- Extensible via optional marketplace design kits
- Multiple starting points (full framework, variables only, blank project)
Disadvantages
- Requires Bun runtime for development and building
- Figma plugin must be manually updated from each release
- Small community (134 stars) and limited third‑party resources
- Additional setup required for WordPress (PHP, Composer, HTTPS)
- Focused on design system generation, not a full CMS
Installation
native
git clone https://github.com/corebunch/core-framework.git cd core-framework bun install bun run dev:www
FAQ
What is Core Framework and what can I use it for?
Core Framework is a visual CSS framework and design‑token builder that turns colors, fluid type scales, spacing, layouts, components, and utilities into a portable design system. You can build the system visually, generate production CSS, and use the same tokens across the web, WordPress, and Figma.
How do I get started with the standalone web app?
Clone the repo, run `bun install` and `bun run dev:www`. The app opens in your browser; you can choose a starting point (full framework, variables only, or blank) and begin editing—no account, API key, or license activation required.
How do I build the web app for production?
Run `bun run test:www` then `bun run build:www`. The built files are written to `packages/www/dist`. You can serve that directory from any static web server. For a sub‑path deployment, pass the `--base` flag to Vite, e.g. `bun run --filter './packages/www' build -- --base=/core-framework/`.
How do I use Core Framework in WordPress?
Link the plugin (`packages/wp`) into your WordPress installation, copy `.env.example` to `.env`, set local site variables, run `bun run composer:dev` and `bun run dev:wp`. Activate the plugin in WordPress. Production builds use `bun run build:wp`.
How do I install the Figma plugin?
Download the latest release ZIP from GitHub, extract it, open Figma Desktop, go to **Plugins → Development → Import plugin from manifest**, and select `core-framework-figma/manifest.json`. The plugin is self‑contained and does not require a Core Framework account.
Featured in Videos
YouTube tutorials and walkthroughs for Core-Framework
Alternatives
Similar projects ranked by category, topics, and text overlap.
