Skip to main content

UI Introduction

cm-admin uses Bootstrap 5 as its CSS foundation, wrapped inside a .cm-admin root class to ensure style isolation and prevent conflicts with the host application's styles.

Design System: CM-Admin Design System (Figma)

Core Concept: Scoped Bootstrap​

All cm-admin styles are scoped under the .cm-admin class. When creating custom components, we use SCSS @extend to inherit Bootstrap classes while keeping them namespaced:

// Don't use Bootstrap classes directly in markup
<button class="btn btn-primary btn-sm">Click</button>

// Use cm-admin scoped classes
<button class="btn-cta">Click</button>

How It Works​

@import "../helpers/index.scss";

// Custom button extending Bootstrap classes
.cm-admin .btn-cta {
  @extend .btn, .btn-sm;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-primary);
}

.cm-admin .btn-primary {
  @extend .btn, .btn-outline-primary, .btn-sm;
}

This pattern:

  • Isolates styles - cm-admin styles won't leak into the host app
  • Leverages Bootstrap - Full access to Bootstrap's utility classes and components
  • Enables customization - Override Bootstrap variables and add custom properties

File Structure​

app/assets/stylesheets/cm_admin/
├── helpers/
│   ├── _variable.scss    # Color, typography, spacing variables
│   ├── _mixins.scss      # Reusable mixins (flex, font, etc.)
│   ├── _typography.scss  # Typography utilities and classes
│   └── index.scss        # Exports all helpers
├── components/
│   ├── _buttons.scss
│   ├── _alerts.scss
│   ├── _modal.scss
│   └── ...
├── base/                 # Page-specific styles
└── dependency/
    └── bootstrap/        # Bootstrap source files