aladdin-website

Aladdin UI Documentation

Welcome to the Aladdin UI documentation. This guide will help you understand the codebase structure, add new components, and create new pages.

📚 Table of Contents

Getting Started

• File Structure
• CSS Architecture - CSS tokens, media queries, utility classes, and more

Component Guides

• Component Library
• How to Add an Accordion
• How to Add Tabs
• How to Add Reveal Cards
• How to Add a Submenu
• Back-to-Top Button
• How to Add an Icon

Content Creation Guides

• Creating a New Page
• Adding a New Product/Add-on

Reference

• JavaScript Structure
• CSS Architecture

---

File Structure

aladdin/
├── ui/
│   ├── index.html                # Page template (extends website/base.html)
│   ├── careers.html              # Page template
│   ├── parents.html              # Page template
│   ├── ordernow.html             # Page template
│   ├── misc.html                 # Page template (starter for new pages)
│   └── website/
│       ├── base.html             # Base template extended by all pages
│       ├── components/           # Template partials (included via Django template includes)
│       │   ├── base/             # Header, footer, sprite
│       │   ├── shared/           # Reusable components
│       │   ├── home/             # Homepage components
│       │   ├── parents/          # Parents page components
│       │   └── careers/          # Careers page components
│       ├── css/                  # Stylesheets (served via Django static paths like website/css/...)
│       │   ├── foundations/
│       │   ├── layout/
│       │   ├── pages/
│       │   └── shared/
│       └── js/                   # JavaScript (served via Django static paths like website/js/...)
│           ├── components/
│           └── script.js
└── docs/                         # This documentation

Template + Static Path Conventions

• Templates (repo path): ui/website/...
• Templates (Django include path): website/... (e.g. {% include "website/components/shared/hero.html" %})
• Static (repo path): ui/website/{css,js}/...
• Static (Django static path): website/{css,js}/... (e.g. {% static 'website/css/styles.css' %})