← Back to Documentation

Documentation

Working with styles settings.scss & style.scss

Animmaster Vite Template uses SASS in SCSS syntax. Thanks to the component approach, you can keep styles per page and per block inside src/components, and the build can split CSS by pages for better performance.

Download Animmaster Vite Template Save your time — start now

How styles are organized

The template is built around a component-first architecture. That means every page/block can have its own SCSS file inside src/components. This is more convenient for maintenance and allows the system to separate styles across pages (if enabled).

Recommended units
Work mostly in PX. In production the system can automatically convert PX → REM (if enabled in build settings). Use % and em only where it makes sense.

settings.scss — the main style settings

File: src/styles/settings.scss — this is the main default style settings file: fonts, colors, adaptive grid, breakpoints, and mixin logic (including the “responsive property”).

Important
settings.scss automatically connects to every SCSS in the project — it’s a convenient place to start working on the interface.

Default font setup

After you connect fonts (local or Google Fonts), set these variables:

  • $fontFamily — default font family (with fallback)
  • $fontSize — default font size (number only)
  • $mainColor — default text color

Example values

src/styles/settings.scss

$fontFamily: "Montserrat", sans-serif;
$fontSize: 16; // number only
$mainColor: #000;

You can also store your own design tokens here (colors palette, spacing, radiuses, etc.).

Adaptive grid settings

The template supports two behaviors for the main container: fluid (responsive) or breakpoint-based. Before layout work, set these variables:

  • $minWidth — minimum supported viewport width (usually 320)
  • $maxWidth — full design canvas width (for example 1920 or 1440)
  • $maxWidthContainer — content container width (for example 1170)
  • $containerPadding — left+right container padding (number only)
  • $containerWidth — usually calculated automatically: $maxWidthContainer + $containerPadding
Note
These values also affect the “responsive property” mixin logic (adaptiveValue).

Breakpoints

Standard breakpoint variables for device groups:

Breakpoints example
$pc: $containerWidth;
$tablet: 991.98;
$mobile: 767.98;
$mobileSmall: 479.98;

For faster media queries you can use snippets like md1…md4 (or Mobile First: mmd1…mmd4).

Container behavior ($responsiveType)

  • 1 — fluid/responsive: container shrinks with browser, no fixed breakpoints
  • 2 — breakpoint-based: container changes width by your breakpoint variables
Responsive type
$responsiveType: 1;

style.scss — global project styles

File: src/styles/style.scss — the main global stylesheet loaded on every page. Here you’ll find base styles for <body>, the .wrapper, and the universal container selector (*__container), based on values from settings.scss.

Optional CSS variables file

At the top of style.scss you can optionally connect a separate CSS variables file: src/styles/includes/variables.css.

Remote fonts section

This file also has a dedicated section where you can connect remote fonts (for example Google Fonts). You can use VS Code plugins (like Google Fonts) to generate @import or <link>.

Core selectors you’ll see

  • body {} — base body styles
    • [data-anim-scrolllock] — scroll lock state (styles prepared)
    • [data-anim-loaded] — “site loaded” state to reveal content after load
  • .wrapper {} — wrapper for the whole page content (footer push-down, overflow safety like overflow: clip;, etc.)
  • Container selector for any class that contains __container
    Example: <div class="block__container">...</div> (you can use snippet cnt)
  • After all defaults — you can add your own global styles that apply to every page.
Pro tip
Keep page/block styles inside src/components, and keep style.scss for truly global rules only.

Build settings related to styles

In template.config.js, the styles section controls the SCSS/CSS pipeline:

styles → tailwindcss

Enables Tailwind CSS. When enabled, src/styles/libs/reset.css is disabled. (true/false)

styles → pxtorem

Automatically converts PX → REM in production builds. (true/false)

styles → critical

Generates critical CSS and injects it into HTML for faster first paint. (true/false)

styles → codesplit

Splits styles by pages so each HTML page loads only what it needs. (true/false)

styles → devfiles

Creates unminified copies of CSS files in production builds. (true/false)

When to enable code splitting
If your project has many pages/components, codesplit helps performance because users don’t download unused CSS.

Download

Build faster with a clean SCSS system and scalable structure. Download Animmaster Vite Template and start your next project with a setup that already works.

Download Animmaster Vite Template Save your time — start now