SCSS Architecture Documentation

Technical documentation for the SCSS codebase. This folder contains all stylesheets organized in a modern, scalable architecture following mobile-first design principles and BEM methodology.

📖 Project Overview: See main /README.md for project setup, features, and general information.

🏗️ Folder Organization

/utilities/ - Core Configuration

Foundation utilities used throughout the project.

/base/ - Global Foundation

Base styles that apply globally across the entire site.

/components/ - Reusable UI Components

Modular, reusable components following BEM methodology.

/sections/ - Page Content Areas

Section-specific styles organized by content area, all mobile-first and properly nested.

Root Level

📋 Import Order & CSS Cascade

The main.scss file follows this specific import order to ensure proper CSS cascade:

// 1. Utilities (Configuration)
@use 'utilities/variables' as *;
@use 'utilities/mixins' as *;

// 2. Base Styles (Foundation)
@use 'base/base';           // Reset, accessibility, utilities
@use 'base/typography';     // Global typography
@use 'base/shared';         // Containers, sections

// 3. Components (Reusable UI)
@use 'components/carousel'; // Must come before sections using .carousel-card
@use 'components/header';   // Navigation components
@use 'components/buttons';  // Button system

// 4. Sections (Page Content)
@use 'sections/hero';
@use 'sections/about';
@use 'sections/solutions';
@use 'sections/projects';
@use 'sections/testimonials';
@use 'sections/insights';
@use 'sections/careers';
@use 'sections/cta';
@use 'sections/footer';

🎯 Architecture Principles

Mobile-First Design

BEM Methodology

Accessibility First

Performance Optimized

🚀 Recent Improvements

Enhanced Base Styles

BEM Button System

Mobile-First Refactoring

📝 Development Guidelines

Adding New Files

  1. Placement: Choose folder based on purpose (base/components/sections)
  2. Naming: Use underscore prefix for partials (_new-section.scss)
  3. Imports: Add to main.scss in appropriate cascade order
  4. Variables: Use existing variables from _variables.scss
  5. Mobile-First: Start with mobile styles, enhance for larger screens

Code Standards

File Structure

styles/
├── utilities/     # Variables, mixins, functions
├── base/          # Global resets, typography, containers
├── components/    # Reusable UI components (BEM)
└── sections/      # Page-specific content areas

🛠️ Build Process