Open
Description
🎯 Goal
Improve the developer experience and adoption by aligning class names with Bootstrap-style naming, while retaining the .n- prefix for namespace scoping.
📌 Current Situation
Numix UI currently uses longer, custom class names like:
.n-button,.n-button-primary,.n-button-disabled.n-input,.n-label.n-heading-1,.n-paragraph
These work fine, but can feel verbose and unfamiliar to developers used to Bootstrap, Bulma, etc.
✅ Proposed Change
Adopt Bootstrap-style naming patterns, scoped with .n- for modularity and safety.
| Old Class | New Class |
|---|---|
.n-button |
.n-btn |
.n-button-primary |
.n-btn-primary |
.n-button-secondary |
.n-btn-secondary |
.n-button-rounded |
.n-btn-rounded |
.n-button-disabled |
.n-btn-disabled |
.n-input |
.n-form-control |
.n-label |
.n-form-label |
.n-heading-1 |
.n-h1 |
.n-paragraph |
.n-text |
.n-small-text |
.n-text-sm |
.n-alert-success |
.n-alert-success |
.n-alert-dismissible |
.n-alert-dismissible |
.n-container |
.n-container |
🛠️ Tasks
- Audit existing
.n-*class names - Add Bootstrap-style
.n-btn,.n-form-control, etc. - Mark verbose forms as deprecated or alias them
- Update all documentation and examples to use new classes
- Ensure backward compatibility where needed
💡 Notes
- Keep the
.n-prefix on all classes - Follow consistent naming patterns:
n-btn,n-btn-primary,n-form-control,n-text-sm, etc.
- Consider providing deprecation warnings in docs for older class forms
🧠 Benefits
- Reduces cognitive load
- Familiar and intuitive for Bootstrap users
- Faster to write and easier to scan
- Maintains scoping and branding (
n-)