Styles

Thulite uses SCSS for styling and includes sensible defaults out of the box.

Stylesheet organization#

Stylesheets live in assets/scss/:

• app.scss is the main entry point that imports framework and custom styles
• common/_variables-custom.scss is where you override default variables
• common/_custom.scss is where you add your own custom CSS

The build process compiles SCSS to CSS and bundles it with your site.

PostCSS (configured in config/postcss.config.js) adds vendor prefixes automatically and removes unused CSS to optimize the final bundle.

Customize variables#

Edit assets/scss/common/_variables-custom.scss to change colors, fonts, sizing, and other global values:

// Example: change the base font size
$font-size-base: 1.125rem;

// Example: change heading font weight
$headings-font-weight: 400;

Variables are inherited from the framework and applied globally.

Add custom styles#

Add new CSS to assets/scss/common/_custom.scss:

// Custom styles for your site
.my-component {
  background: var(--bs-primary);
  padding: 1rem;
}

Keep custom styles scoped to specific components or sections.

Learn more#