How to use Ganitara UI via CDN (symposiax.co.in)
This page is a one-file tutorial you can host anywhere (or just keep as reference). Your projects will load one stable CSS bundle from https://symposiax.co.in/ui/.
1) Include the CDN files
Add these tags in your project <head>. Use minified files for production.
Recommended include (copy/paste)
<link rel="stylesheet" href="https://symposiax.co.in/ui/dist/ganitara-ui.min.css">
<link id="themeLink" rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-ocean.css">
<link rel="stylesheet" href="https://symposiax.co.in/ui/themes/dark.css"> <!-- optional -->
<script defer src="https://symposiax.co.in/ui/dist/ganitara-ui.min.js"></script> <!-- optional --><link rel="stylesheet" href="https://symposiax.co.in/ui/dist/ganitara-ui.min.css"> <link id="themeLink" rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-ocean.css"> <link rel="stylesheet" href="https://symposiax.co.in/ui/themes/dark.css"> <!-- optional --> <script defer src="https://symposiax.co.in/ui/dist/ganitara-ui.min.js"></script> <!-- optional -->
Project rule (important)
Do NOT mix frameworks
Avoid loading Bootstrap/Tailwind with Ganitara UI. Mixing causes conflicts and duplicate styling.
Keep your project CSS minimal. If something repeats across pages, move it into the UI kit (not into every page).
2) Use the classes
Use built-in classes like:
This keeps HTML clean (less clutter than Tailwind) and avoids heavy Bootstrap overrides.
3) Optional JS (tiny)
If you include the JS bundle, you get:
- Copy buttons via data-copy-text / data-copy-target
- Modal open/close via data-modal-open / data-modal-close
- Proceedings citation tabs (APA/IEEE/BibTeX)
Theme switching (recommended)
Load only one theme file using id="themeLink", then swap its href when user chooses a theme.
<link id="themeLink" rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-ocean.css">Available themes
theme-ocean.css, theme-slate.css, theme-aurora.css
Themes & Dark Mode
One theme per project. Dark mode is optional and toggle-able.
Pick a theme file
Choose ONE:
<link rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-slate.css">Themes should mainly override tokens (colors), not rewrite components.
Enable dark mode
Add attribute on <html>:
<html data-mode="dark">This guide has a Light/Dark toggle in the top right.
Recommended discipline
If you need a new look for a new conference/portal: create a new theme file (token overrides) instead of editing core CSS.
Common patterns (copy & adapt)
These cover 80% of academic portals: proceedings, dashboards, LMS progress.
Proceedings: citation tabs
JSAPA: Author, A. (2026). Paper title. Proceedings...
IEEE: A. Author, "Paper title," Proc. ...
@inproceedings{key, title={Paper title}, year={2026}}
LMS: quiz card + progress
UI| ID | Title | Status | Action |
|---|---|---|---|
| IGCAI-012 | Explainable Vision Transformers | Accepted | |
| CCICT-044 | LLM Evaluation Benchmarking | Revision |
Rule of thumb
If you copy the same “page-only CSS” twice, it’s not page-only anymore — move it into the UI kit.
FAQ / Troubleshooting
The most common issues when using a CDN UI kit.
Q: My styles don’t apply?
Double-check the link URLs. Open them directly in browser to confirm they load.
Q: Can I customize per project?
Yes — make a theme (token overrides). Avoid rewriting components inside project pages.
<html data-theme="ocean">
<link rel="stylesheet" href=".../theme-slate.css">Q: Should I include JS?
Optional. Include it if you want copy buttons, modals, and citation tabs without extra libraries.
Q: Versioning best practice?
When you update the kit, consider hosting as /ui/v1/, /ui/v2/ to avoid breaking older portals.
Final reminder
Don’t let projects sneak in Bootstrap/Tailwind “just for one page”. That’s how stacks become spaghetti.