Styling

SALVO-TS uses SCSS for styling. This is broken down into global styles and component styles:

• Global styles - Variables, document-level styling, and anything else which doesn't fit into component styles.
• Component styles - The styles which apply to a specific component.

Note that in SALVO-TS, a lot of your functionality should be implemented using components, so you should generally have more component styles than global styles.

Global styles

Your theme's global styles are stored in assets/styles/, the main entry point being theme.scss. This is used to compile the dist/assets/theme.css.liquid file.

Extra CSS

You can separate out some of your CSS (i.e. for alternate layouts) using the 'extra CSS' feature. See the extra CSS guide for more info.

Your global styles usually contain a file named variables.scss which is configured to be imported into every component. Use this to define your global variables like fonts and brand colors. Be careful not to include any SCSS which would output rules in this file (such as @font-face declarations), otherwise they'll be duplicated in every component!is configured to be imported into every component. Use this to define your global variables like fonts and brand colors. Be careful not to include any SCSS which would output rules in this file (such as @font-face declarations), otherwise they'll be duplicated in every component.

Component styles

Component styles can be defined alongside the component classes, for example:

src/components/TabContainer.ts
ts
@Component
export class TabContainer extends ThemeComponent {
}

src/components/TabContainer.ts
ts
@Component
export class TabContainer extends ThemeComponent {
}

src/components/TabContainer.scss
scss
@import '../../assets/styles/variables.scss';
tab-container {
    display: flex;
    border: 1px solid $border-color;
}

src/components/TabContainer.scss
scss
@import '../../assets/styles/variables.scss';
tab-container {
    display: flex;
    border: 1px solid $border-color;
}

Liquid in SCSS

The SCSS compiler in SALVO-TS has support for including Liquid, by passing the liquid as a string to the the liquid() function.

assets/variables.scss
scss
// Use liquid directly in rules
my-item {
    background: #{liquid("{{ settings.color_background }}")};
}
// Or via SCSS variables
$color-primary: #{liquid("{{ settings.color_primary }}")};
my-item {
    color: $color-primary;
}
// Or via CSS variables
:root {
    --color-secondary: #{liquid("{{ settings.color_secondary }}")};
}
my-item {
    border: 1px solid var(--color-secondary);
}

assets/variables.scss
scss
// Use liquid directly in rules
my-item {
    background: #{liquid("{{ settings.color_background }}")};
}
// Or via SCSS variables
$color-primary: #{liquid("{{ settings.color_primary }}")};
my-item {
    color: $color-primary;
}
// Or via CSS variables
:root {
    --color-secondary: #{liquid("{{ settings.color_secondary }}")};
}
my-item {
    border: 1px solid var(--color-secondary);
}

dist/theme.css.liquid
scss
:root {
    --color-secondary: {{ settings.color_secondary }};
}
my-item {
    background: {{ settings.color_background }};
    color: {{ settings.color_primary }};
    border: 1px solid var(--color-secondary);
}

dist/theme.css.liquid
scss
:root {
    --color-secondary: {{ settings.color_secondary }};
}
my-item {
    background: {{ settings.color_background }};
    color: {{ settings.color_primary }};
    border: 1px solid var(--color-secondary);
}

Avoid Liquid in components for optimal performance

Where possible, limit the use of Liquid to global styles. You may use liquid in component styles, but it prevents SALVO-TS from being able to make certain optimizations to the way your component styles are loaded (because they must be rendered via Liquid first.)

One method for avoiding this by using CSS variables to pass settings from your root/global styles or component template through to your component's CSS.

Critical CSS

It is important to define critical css to ensure your above-the-fold content is rendered correctly on page load. You can do this using the @media critical { ... } queries. See the optimization guide for more info.

Next steps

You now know the basics needed to create simple components and start building out your theme. You should read through the rest of the guides in the handbook to learn about the rest of the features SALVO-TS has - start with the guides on component templates, events, and optimization.