Glint uses SCSS for styling. The styles are modularized and organized into logical folders to keep the codebase clean, scalable, and easy to customize. Below is the SCSS folder structure with explanations for each directory:
scss/
├── bootstrap/ # Core Bootstrap 5 overrides and dependencies
├── custom/ # Custom styles for the Glint theme
│ ├── base/ # Base and global styles
│ │ ├── _base.scss # Global resets and basic elements
│ │ └── _reset.scss # Reset/normalize styles
│ │
│ ├── component/ # Modular SCSS for UI components
│ │ ├── _accordion.scss
│ │ ├── _avatars.scss
│ │ ├── _badge.scss
│ │ ├── _buttons.scss
│ │ ├── _cards.scss
│ │ ├── _chat.scss
│ │ ├── _component.scss
│ │ ├── _datepicker.scss
│ │ ├── _email.scss
│ │ ├── _forms.scss
│ │ ├── _full-calendar.scss
│ │ ├── _list-group.scss
│ │ ├── _misc.scss
│ │ ├── _modals.scss
│ │ ├── _progress.scss
│ │ ├── _scrollbar.scss
│ │ ├── _table.scss
│ │ └── _tabs.scss
│ │
│ ├── layout/ # Layout and structure-related styles
│ │ ├── _header.scss # Header styles
│ │ ├── _layout.scss # Global page layouts
│ │ └── _sidebar.scss # Sidebar navigation styles
│ │
│ ├── theme/ # Theme variations and customizer
│ │ ├── _dark.scss # Dark mode styles
│ │ └── _theme-customizer.scss # Theme customization utilities
│ │
│ ├── utilities/ # Helper and utility classes
│ │ ├── _background.scss
│ │ ├── _misc.scss
│ │ ├── _sizing.scss
│ │ ├── _text.scss
│ │ ├── _utilities.scss
│ │ ├── _custom-variables.scss # Custom SCSS variables
│ │ └── _theme-vars.scss # Theme-related variables
│ │
│ ├── custom.scss # Main entry for custom styles
│ ├── theme-vars.scss # Global theme variables
│ └── main.scss # Compiles all SCSS files together