Appearance

SCSS Architecture Overview ​

Introduction ​

The Brand Portal Frontend uses a well-organized SCSS architecture following the 7-1 Pattern methodology. This architecture promotes maintainability, scalability, and code reusability by organizing styles into logical folders and files.

Architecture Pattern ​

The project follows the 7-1 Pattern, which organizes SCSS files into 7 main folders plus 1 main file:

  1. Abstracts - Variables, functions, and mixins
  2. Base - Reset styles, typography, and utilities
  3. Layout - Header, sidebar, breadcrumbs, and layout components
  4. Components - Reusable UI component styles
  5. Pages - Page-specific styles
  6. Themes - (Not currently used, but reserved for future theming)
  7. Vendors - (Not currently used, but reserved for third-party styles)

Directory Structure ​

app/assets/scss/
├── abstracts/
│   ├── _variables.scss    # Color palette, typography, spacing variables
│   ├── _mixins.scss       # Reusable mixins (responsive, flexbox, transitions)
│   └── _functions.scss    # SCSS functions (currently placeholder)
├── base/
│   ├── _reset.scss        # CSS reset and base element styles
│   ├── _typography.scss   # Heading styles and text formatting
│   └── _utilities.scss    # Utility classes (gaps, margins, padding, scrollbars)
├── layout/
│   ├── _header.scss       # Header component styles
│   ├── _sidebar.scss     # Left sidebar navigation styles
│   ├── _layout.scss      # Main layout container styles
│   ├── _breadcrumbs.scss # Breadcrumb navigation styles
│   └── _announcement.scss # Announcement component styles
├── components/
│   ├── _buttons.scss      # Button variants and styles
│   ├── _forms.scss        # Form controls and inputs
│   ├── _cards.scss        # Card components (asset cards)
│   ├── _tables.scss       # Table/list view styles
│   ├── _dialogs.scss      # Dialog/modal styles
│   ├── _chips.scss        # Chip/tag component styles
│   ├── _checkbox.scss     # Checkbox input styles
│   ├── _radio.scss        # Radio button styles
│   ├── _switch.scss       # Toggle switch styles
│   ├── _select.scss       # Select dropdown styles
│   ├── _datepicker.scss   # Date picker component styles
│   ├── _tooltips.scss     # Tooltip styles
│   ├── _snackbar.scss     # Snackbar notification styles
│   ├── _skeleton.scss     # Skeleton loader styles
│   ├── _loading-states.scss # Loading and empty states
│   ├── _links.scss        # Link and underline button styles
│   ├── _menu-list.scss    # Menu list item styles
│   ├── _carousel.scss     # Carousel/slider styles
│   ├── _boxview.scss      # Box view container styles
│   ├── _collage-boxes.scss # Collage box component styles
│   ├── _image-group.scss  # Image group display styles
│   ├── _image-upload.scss # Image upload component styles
│   ├── _grid-icons.scss   # Grid/list view toggle styles
│   └── _powered-by.scss   # Powered by branding styles
├── pages/
│   ├── _login.scss        # Login page specific styles
│   ├── _assets-detail.scss # Asset detail page styles
│   ├── _collage-detail.scss # Collage detail page styles
│   ├── _settings.scss     # Settings page styles
│   └── _error.scss        # Error page styles
└── main.scss              # Main entry point (imports all partials)

Key Features ​

1. Modern SCSS Syntax ​

The project uses modern SCSS syntax with @use and @forward instead of deprecated @import:

scss
@use 'abstracts/variables' as *;
@use 'abstracts/mixins' as *;

2. Variable Auto-Injection ​

Variables are automatically injected via Vite's additionalData configuration, making them available in all SCSS files without explicit imports in each file.

3. Responsive Design ​

The architecture includes comprehensive responsive breakpoints:

  • Mobile: max-width: 960.98px
  • Tablet: max-width: 1280.98px
  • Desktop: min-width: 1281px
  • Large Desktop: min-width: 1640px
  • XL Desktop: min-width: 1920px

4. Design System ​

The SCSS architecture implements a comprehensive design system with:

  • Color Palette: Extensive color system with shades (100-900) for red, pink, lavender, cream, teal, orange, blue, gray, black, and green
  • Typography: Consistent font families (Inter for body, Space Grotesk for headers) and size scale
  • Spacing: Standardized gap and spacing system (xs: 4px, sm: 8px, md: 12px, lg: 16px, xl: 24px)
  • Border Radius: Consistent border radius scale
  • Shadows: Standardized box shadow system

File Organization Principles ​

Abstracts ​

Contains foundational styles that don't output CSS:

  • Variables: Design tokens (colors, typography, spacing)
  • Mixins: Reusable style patterns (responsive breakpoints, flexbox utilities)
  • Functions: SCSS functions for calculations (currently placeholder)

Base ​

Contains foundational styles that apply globally:

  • Reset: Normalize browser defaults and base element styles
  • Typography: Heading styles and text formatting
  • Utilities: Utility classes for common patterns

Layout ​

Contains styles for major layout components:

  • Header, sidebar, breadcrumbs, announcements
  • These are structural components that define the page layout

Components ​

Contains styles for reusable UI components:

  • Buttons, forms, cards, tables, dialogs, etc.
  • Each component is self-contained and reusable

Pages ​

Contains page-specific styles:

  • Styles that are unique to specific pages
  • Should be used sparingly; prefer component styles when possible

Import Order ​

The main.scss file imports styles in a specific order to ensure proper cascade:

  1. Abstracts - Variables, mixins, functions (no CSS output)
  2. Base - Reset, typography, utilities (foundational styles)
  3. Layout - Header, sidebar, layout (structural components)
  4. Components - All reusable components
  5. Pages - Page-specific styles (highest specificity)

Best Practices ​

1. Use Variables ​

Always use variables from _variables.scss instead of hardcoded values:

scss
// Good
color: $blue-color-500;
padding: $gap-lg;

// Bad
color: #6473FF;
padding: 16px;

2. Use Mixins ​

Use mixins for common patterns:

scss
// Good
@include flex-center;
@include respond-to(mobile) {
  // mobile styles
}

// Bad
display: flex;
align-items: center;
justify-content: center;

3. Component Isolation ​

Keep component styles isolated and avoid global selectors when possible:

scss
// Good
.asset-card {
  // styles
}

// Bad
.card {
  // too generic
}

4. Responsive Design ​

Use mixins for responsive breakpoints:

scss
@include respond-to(mobile) {
  // mobile-specific styles
}

5. Naming Conventions ​

  • Use kebab-case for class names
  • Use descriptive names that indicate purpose
  • Prefix component-specific classes with component name

Variable System ​

Colors ​

The color system uses a scale from 100 (lightest) to 900 (darkest):

  • $red-color-500 - Base red
  • $blue-color-500 - Base blue
  • $gray-color-500 - Base gray
  • And more...

Typography ​

  • Font families: $font-family-body, $font-family-header
  • Font sizes: $font-size-10 through $font-size-34
  • Font weights: $font-weight-regular through $font-weight-black

Spacing ​

  • Gaps: $gap-xs (4px) through $gap-xl (24px)
  • Border radius: $border-radius-xs through $border-radius-xl

Mixins ​

Responsive Breakpoints ​

scss
@include respond-to(mobile) { }
@include respond-to(tablet) { }
@include respond-to(desktop) { }
@include respond-to(large-desktop) { }
@include respond-to(xl-desktop) { }

Flexbox Utilities ​

scss
@include flex-center;    // Center content
@include flex-between;   // Space between

Transitions ​

scss
@include transition-ease; // Standard transition

Custom Scrollbar ​

scss
@include custom-scrollbar; // Custom scrollbar styling

Integration with Vite ​

The SCSS is processed by Vite with the following configuration:

  • Variables are auto-injected via additionalData
  • Modern @use syntax is used
  • No deprecated @import statements