Rence Material
Github

Introduction

Get started with Rence Material, a cross-platform and fully responsive front-end interface based on Google Material Design, built using Bootstrap 5.

Contents

Precompiled code

The Rence Material precompiled code download includes the following compiled CSS and JavaScript:

Structure
rence-material/
├── css/
│   ├── rence-material.css
│   ├── rence-material.css.map
│   ├── rence-material.min.css
│   └── rence-material.min.css.map
└── js/
    ├── rence-material.js
    ├── rence-material.js.map
    ├── rence-material.min.js
    └── rence-material.min.js.map

Source code

The Rence Material source code download includes the source SCSS files and raw modules:

Structure
rence-material/
├── scss/
│   └── material.scss
├── js/
│   └── src/
└── dist/

Important globals

Box-sizing

We switch the global box-sizing value to border-box.

Starter template

Use this minimal HTML boilerplate to start your project with Rence Material.

Copy & Paste to start!
HTML Template
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">

    <!-- Fonts & 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">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Rence Material CSS (replaces Bootstrap CSS) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davidabalaku/material@main/dist/css/rence-material.min.css">

    <title>Hello, Rence Material</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Bootstrap 5 Bundle JS (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Rence Material JS (Ripple & Material interactions) -->
    <script src="https://cdn.jsdelivr.net/gh/davidabalaku/material@main/dist/js/rence-material.min.js"></script>
  </body>
</html>