🎯 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
💡 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-)
🎯 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-paragraphThese 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..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
.n-*class names.n-btn,.n-form-control, etc.💡 Notes
.n-prefix on all classesn-btn,n-btn-primary,n-form-control,n-text-sm, etc.🧠 Benefits
n-)