# Understanding Vartheme BS5

**Vartheme BS5** is the default Bootstrap 5 based front-end theme for Varbase 11.0.x. It provides a responsive, accessible, and customizable foundation for building Drupal websites, leveraging modern front-end development practices and Drupal's component architecture.

## Bootstrap 5 Foundation

Vartheme BS5 is built on **Bootstrap 5**, one of the most widely used CSS frameworks. It provides:

* **Responsive grid system**: A 12-column grid with breakpoints for mobile, tablet, and desktop layouts.
* **Utility classes**: A comprehensive set of spacing, typography, color, and layout utilities.
* **Component library**: Pre-styled UI components including buttons, cards, modals, navbars, and forms.
* **JavaScript plugins**: Interactive components such as dropdowns, carousels, and tooltips.

## SCSS Architecture

Vartheme BS5 uses **SCSS** (Sassy CSS) for stylesheets, providing variables, mixins, nesting, and other features that make CSS more maintainable and scalable.

### File Structure

The theme's SCSS files are organized into a structured directory layout:

* **Variables**: Bootstrap variable overrides that control colors, fonts, spacing, and other design tokens.
* **Components**: SCSS partials for individual UI components.
* **Layout**: Styles for page layout regions and structural elements.
* **Base**: Base element styles, resets, and typography.

### Compilation

SCSS files are compiled into CSS using the build tools configured in the theme's `package.json`. The compiled CSS is output to the theme's CSS directory and loaded by Drupal.

## Single Directory Components (SDC)

Vartheme BS5 uses Drupal's **Single Directory Components** system for organizing reusable UI components. SDC bundles each component's template (Twig), styles (CSS/SCSS), JavaScript, and metadata into a single directory.

### Component Structure

Each SDC component follows this structure:

```
components/
  my-component/
    my-component.twig
    my-component.scss
    my-component.js (optional)
    my-component.component.yml
```

The `*.component.yml` file defines the component's metadata, including its name, description, props (input parameters), and slots (content areas).

### Using Components

Components can be used in Twig templates through the `include` or `embed` directives, or by referencing them in the component system. SDC components promote reusability, consistency, and maintainability across the theme.

## CVA (Class Variance Authority)

Vartheme BS5 integrates **CVA (Class Variance Authority)** for managing component variants. CVA provides a structured way to define CSS class combinations based on variant properties, making it easier to create consistent component variations.

### How CVA Works

CVA allows you to define a component's base classes and variant-specific classes in a structured format. When rendering a component, you specify which variants to apply, and CVA generates the appropriate CSS class string.

For example, a button component might have:

* **Base classes**: `btn`
* **Variant: size**: `sm` adds `btn-sm`, `lg` adds `btn-lg`
* **Variant: color**: `primary` adds `btn-primary`, `secondary` adds `btn-secondary`

This approach keeps class logic organized and prevents inconsistencies when applying component styles.

## Responsive Design

Vartheme BS5 provides responsive design out of the box through Bootstrap's breakpoint system:

| Breakpoint        | Min Width | CSS Class Prefix |
| ----------------- | --------- | ---------------- |
| Extra small       | 0         | (default)        |
| Small             | 576px     | `sm`             |
| Medium            | 768px     | `md`             |
| Large             | 992px     | `lg`             |
| Extra large       | 1200px    | `xl`             |
| Extra extra large | 1400px    | `xxl`            |

## Regions

Vartheme BS5 defines the following theme regions for placing blocks:

* **Header**: Site branding, navigation, and search.
* **Content**: Main page content area.
* **Sidebar**: Optional sidebar for supplementary content.
* **Footer**: Footer blocks including copyright, links, and contact information.
* Additional regions for banners, highlighted content, and other layout needs.

## Dependencies

Vartheme BS5 depends on:

* **Bootstrap 5**: CSS framework (loaded via the theme's library definitions).
* **CVA module**: Class Variance Authority integration for Drupal.
* **Drupal core**: Twig templating, asset libraries, and SDC support.