Styling

FrontWing uses SCSS and Bootstrap 5 for styling. All custom styles are currently centralized in a single SCSS file: main.scss, located in app/assets/scss/.

Structure & Setup

At the moment, the project uses just one SCSS file – main.scss – which is imported in the main app entry. This file:

• Imports fonts (e.g. Google Fonts – Inter)

• Sets base variables (e.g. Bootstrap colors)

• Overrides Bootstrap components (e.g. buttons, breadcrumbs)

You can easily extend this structure by creating more SCSS files and organizing them into folders inside assets/scss/, e.g.:

assets/
└── scss/
    ├── main.scss
    ├── _variables.scss
    ├── _buttons.scss
    └── components/
        └── _breadcrumb.scss

Bootstrap Intergration

Bootstrap is included via npm and used as the base styling system. FrontWing overrides it using CSS variables directly in SCSS – for example:

:root {
  --bs-primary: #22B99A;
  --bs-link-color: #22B99A;
  --bs-link-hover-color: #1a8a74;
}

No Sass $variables are used at the moment – everything is customized via native CSS variables, making it simpler to override styles on the fly.

Fonts

The Inter font is imported at the top of main.scss from Google Fonts:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

* {
  font-family: "Inter", Arial, sans-serif;
}

Overrriding Components

You can override Bootstrap components by targeting their classes and using SCSS nesting:

.btn.btn-primary {
  --bs-btn-bg: #22B99A;
  --bs-btn-color: #000;
}

Or:

.breadcrumb {
  &-item a {
    text-decoration: none;
  }
}

These overrides are currently kept in main.scss, but you can extract them into component-specific files later.