Rence Material

A powerful, high-performance front-end framework based on Google Material UI Design. It fuses the functional stability of Bootstrap 5 with the visual elegance of Material Design 3.

📖 Official Documentation & Live Demos
💖 Support Development (Patreon)

Developed and designed by david abalaku.

📦 Installation & Setup (React, Next.js, Vite)

You can install Rence Material directly with your package manager:

npm install rence-material
# or
yarn add rence-material
# or
pnpm add rence-material

1. Vite, React, Vue, & standard SPAs

Import the compiled CSS and client-safe Ripple Engine in your project's main layout/entry point (e.g. main.jsx, App.tsx or index.js):

import 'rence-material/dist/css/rence-material.min.css';
import 'rence-material'; // Auto-initializes ripple engine

2. Next.js (SSR / Server Side Rendering)

Rence Material is fully SSR-compliant. You can import CSS and run/load the ripple engine without server-side environment errors:

App Router (app/layout.tsx):

import 'rence-material/dist/css/rence-material.min.css';
import 'rence-material'; // Safely runs on client side only

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

🎨 Custom Branding & Theming (SCSS)

If you prefer dynamically setting your theme colors, you can override standard primary colors and import the source Scss:

// custom.scss
$primary: #ff5722; // Your custom brand color

// Import Rence core style
@import "rence-material/lib/material/scss/material-core";

Ensure your project has a sass transpiler installed:

npm install -D sass

⚡ Quick Start (HTML CDN)

You can drop Rence Material into any project instantly using jsDelivr. Since the framework relies purely on CSS for Material interactions, simply include the compiled stylesheet inside your <head> alongside standard Bootstrap 5.

<!-- Rence Material Framework CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidabalaku/[email protected]/dist/css/rence-material.min.css">
<!-- Rence Material Ripple Engine JS -->
<script src="https://cdn.jsdelivr.net/gh/davidabalaku/[email protected]/dist/js/rence-material.min.js"></script>

🚀 Starter Template

Here is a bare-bones HTML template to get you up and running immediately:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Rence Material App</title>

    <!-- 1. Google Fonts & Material Icons -->
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" crossorigin>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" crossorigin>

    <!-- 2. Rence Material Framework CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidabalaku/[email protected]/dist/css/rence-material.min.css">
  </head>
  <body>
    
    <div class="container py-5">
      <h1 class="fw-light text-primary mb-4">Hello, Material!</h1>
      <button class="btn btn-primary d-inline-flex align-items-center gap-2">
        <span class="material-icons">rocket_launch</span>
        Get Started
      </button>
      <button class="btn btn-tonal">Tonal Button</button>
    </div>

    <!-- 3. Bootstrap 5 Core JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin></script>

    <!-- 4. Rence Material Ripple Engine JS -->
    <script src="https://cdn.jsdelivr.net/gh/davidabalaku/[email protected]/dist/js/rence-material.min.js"></script>
  </body>
</html>

📄 License

Authored and maintained by david abalaku.
Based upon Bootstrap 5 and Google Material Design principles.