🌍 AfriCode Framework

The Design System of Sovereignty
Bridging modern web performance with the fractal geometry and rich semiotics of African heritage.

Overview

AfriCode is a full-stack UI framework built on Bun and Vanilla JavaScript. It provides a reactive core, a procedural pattern engine, and a suite of high-performance Web Components designed for the African context (mobile-first, low-latency).

✨ Features

• 🧠 Reactive Core: Lightweight Proxy-based state management (core/state.js).
• 🎨 Cultural Patterns: Procedural SVG generation for Kente, Shuka, Ndebele, and more.
• 📱 Mobile Optimized: "Profound Dark" theme with responsive grids and touch targets.
• ⚡ Native Performance: Built for Bun, zero-build runtime capable.

🚀 Quick Start

Installation

bun add africode

Local Development (Pre-Publish)

If you are developing the framework locally:

1. Register the link: bun link (inside framework folder)
2. Use in another project: bun link africode

Usage (SDK)

Import the core SDK to generate patterns or use the state engine:

import { patterns, store, components } from 'africode';

// Generate a Maasai Shuka pattern
const shukaPattern = patterns.generateShuka();
document.body.style.backgroundImage = `url("${shukaPattern}")`;

// Use Global State
store.ui.theme = 'tanzania';

Usage (UI Components)

Simply import the components to register them as Custom Elements:

import 'africode/components';

Then use them in your HTML:

<af-navbar theme="tanzania" logo="My App"></af-navbar>

<af-kanga-card proverb="Haraka haraka haina baraka.">
  <h3>Project Title</h3>
  <p>Content goes here...</p>
</af-kanga-card>

📜 Licensing

AfriCode is Dual Licensed:

1. AGPL v3: For open-source projects. You must open-source your code if you use AfriCode.
2. Commercial: For proprietary projects. Contact us for a commercial license to build closed-source apps.

🤝 Contribution

We welcome contributions! Please see CONTRIBUTING.md for details.

Built with ❤️ by the AfriCode Team