TRCG CSS Documentation
Overview
TRCG CSS is a lightweight, fully customizable UI theme. Change the base color palette to rebrand your entire UI.
<p>TRCG CSS is a lightweight, fully customizable UI theme.</p>Getting Started
Include the CSS file and wrap your application with .trcg-theme. You can also include the JS file to enable modals, and toasts functionality.
<link rel="stylesheet" href="css/trcg-theme.css">
<script src="js/trcg-scripts.js"></script>
<body class="trcg-theme">...</body>
Adding JavaScript
Include your JS file after the CSS file, preferably before the closing </body> tag:
<script src="js/trcg-scripts.js"></script>
This enables the following functionality:
- Copy code buttons
- Modals
- Toasts / notifications
- Download buttons for dynamic files
Buttons
<button class="trcg-btn trcg-btn-primary">Primary</button>
<button class="trcg-btn trcg-btn-success">Success</button>
<button class="trcg-btn trcg-btn-danger">Danger</button>
Alerts
Error alert
Success alert
Warning alert
Info alert
<div class="trcg-alert trcg-alert-danger">Error alert</div>
<div class="trcg-alert trcg-alert-success">Success alert</div>
<div class="trcg-alert trcg-alert-warning">Warning alert</div>
<div class="trcg-alert trcg-alert-info">Info alert</div>
Badges
Use badges to highlight status, new items, or labels.
Primary
Secondary
Success
Danger
Warning
Info
Badges can be placed inside buttons:
Badges can also be used in alerts:
Operation completed
Done
Pending approval
Pending
Badges can be used in table cells to highlight status:
| ID | Name | Status |
|---|---|---|
| 001 | Juan Dela Cruz | Completed |
| 002 | Maria Santos | Pending |
| 003 | Pedro Reyes | Cancelled |
<span class="trcg-badge trcg-badge-primary">Primary</span>
<span class="trcg-badge trcg-badge-success">Success</span>
<button class="trcg-btn trcg-btn-primary">
Notifications <span class="trcg-badge trcg-badge-info">5</span>
</button>
<div class="trcg-alert trcg-alert-success">
Operation completed <span class="trcg-badge trcg-badge-success">Done</span>
</div>
<td><span class="trcg-badge trcg-badge-warning">Pending</span></td>
Responsive Layout / Grid
Use the TRCG grid system to create responsive layouts. The grid supports 2–6 columns.
2 Columns
Column 1
Column 2
<div class="trcg-row">
<div class="trcg-col-50"><div class="trcg-card">Column 1</div></div>
<div class="trcg-col-50"><div class="trcg-card">Column 2</div></div>
</div>
3 Columns
Column 1
Column 2
Column 3
<div class="trcg-row">
<div class="trcg-col-33"><div class="trcg-card">Column 1</div></div>
<div class="trcg-col-33"><div class="trcg-card">Column 2</div></div>
<div class="trcg-col-33"><div class="trcg-card">Column 3</div></div>
</div>
4 Columns
Column 1
Column 2
Column 3
Column 4
<div class="trcg-row">
<div class="trcg-col-25"><div class="trcg-card">Column 1</div></div>
<div class="trcg-col-25"><div class="trcg-card">Column 2</div></div>
<div class="trcg-col-25"><div class="trcg-card">Column 3</div></div>
<div class="trcg-col-25"><div class="trcg-card">Column 4</div></div>
</div>
5 Columns
1
2
3
4
5
<div class="trcg-row">
<div class="trcg-col-20"><div class="trcg-card">1</div></div>
<div class="trcg-col-20"><div class="trcg-card">2</div></div>
<div class="trcg-col-20"><div class="trcg-card">3</div></div>
<div class="trcg-col-20"><div class="trcg-card">4</div></div>
<div class="trcg-col-20"><div class="trcg-card">5</div></div>
</div>
6 Columns
1
2
3
4
5
6
<div class="trcg-row">
<div class="trcg-col-16"><div class="trcg-card">1</div></div>
<div class="trcg-col-16"><div class="trcg-card">2</div></div>
<div class="trcg-col-16"><div class="trcg-card">3</div></div>
<div class="trcg-col-16"><div class="trcg-card">4</div></div>
<div class="trcg-col-16"><div class="trcg-card">5</div></div>
<div class="trcg-col-16"><div class="trcg-card">6</div></div>
</div>
Toasts / Notifications
Use toasts to show temporary notifications to users.
<button class="trcg-btn trcg-btn-success" onclick="showToast('Operation successful!', 'success')">Show Success</button>
<button class="trcg-btn trcg-btn-danger" onclick="showToast('Something went wrong!', 'error')">Show Error</button>
Forms
Basic Inputs
<div class="trcg-card">
<input class="trcg-input" placeholder="Name">
<input class="trcg-input trcg-input-success" placeholder="Valid">
<input class="trcg-input trcg-input-danger" placeholder="Error">
<textarea class="trcg-textarea" placeholder="Message"></textarea>
</div>
Login Form
<div class="trcg-card">
<input class="trcg-input" type="email" placeholder="Email">
<input class="trcg-input" type="password" placeholder="Password">
<button class="trcg-btn trcg-btn-primary">Login</button>
<button class="trcg-btn trcg-btn-secondary">Forgot Password?</button>
</div>
Registration Form
<div class="trcg-card">
<input class="trcg-input" placeholder="Full Name">
<input class="trcg-input" type="email" placeholder="Email">
<input class="trcg-input" type="password" placeholder="Password">
<input class="trcg-input" type="password" placeholder="Confirm Password">
<button class="trcg-btn trcg-btn-success">Register</button>
<button class="trcg-btn trcg-btn-secondary">Cancel</button>
</div>
Contact / Fill Out Form
<div class="trcg-card">
<input class="trcg-input" placeholder="Name">
<input class="trcg-input" type="email" placeholder="Email">
<input class="trcg-input" placeholder="Subject">
<textarea class="trcg-textarea" placeholder="Message"></textarea>
<button class="trcg-btn trcg-btn-primary">Send Message</button>
</div>
Table Example
| ID | Name | Status | Amount |
|---|---|---|---|
| 001 | Juan Dela Cruz | Completed | ₱1500 |
| 002 | Maria Santos | Pending | ₱980 |
| 003 | Pedro Reyes | Cancelled | ₱450 |
| 004 | Luisa Mercado | Completed | ₱1200 |
| 005 | Antonio Cruz | Pending | ₱600 |
<table class="trcg-table">
<thead><tr><th>ID</th><th>Name</th><th>Status</th><th>Amount</th></tr></thead>
<tbody>
<tr><td>001</td><td>Juan Dela Cruz</td><td class="trcg-text-success">Completed</td><td>₱1500</td></tr>
<tr><td>002</td><td>Maria Santos</td><td class="trcg-text-warning">Pending</td><td>₱980</td></tr>
<tr><td>003</td><td>Pedro Reyes</td><td class="trcg-text-danger">Cancelled</td><td>₱450</td></tr>
<tr><td>004</td><td>Luisa Mercado</td><td class="trcg-text-success">Completed</td><td>₱1200</td></tr>
<tr><td>005</td><td>Antonio Cruz</td><td class="trcg-text-warning">Pending</td><td>₱600</td></tr>
</tbody>
</table>
Modal
<button class="trcg-btn trcg-btn-info" onclick="openModal()">Open Modal</button>
<div id="modalOverlay" class="trcg-modal-overlay">...</div>