Sass and Bootstrap variables

Start designing with SASS

2shine is built to give you many different customization possibilities. You will need to prepare for your customization by installing Node.js and the dependencies required to convert your changes to CSS and JS.

Make sure Node.js is installed - or install Node now. This will also install NPM (the Node Package Manager).
Install all dependencies by running this command in your root folder:
npm ci or npm install
Webpack should now be able to watch for changes and auto-compile new CSS/JS. Verify Verify this by running:
npm run build-prod

You should now be able to make changes to your own 2shine Theme.

Text.First(imgItem.ImageCaption, imgItem.Title)

Files and Purpose

The themes can be found within the theme/ folder."

theme.scss -> This file is the entry point. Webpack processes this file and generates dist/theme.min.css.

ou can find all the various stylesheets in the src/scss folder.

_custom-variables.scss -> This file defines all the variables.
_custom-pages.scss -> This file is used for defining page-specific customizations.
components -> The component styles are defined in this folder.
layouts->This folder contains all the different layout variations.

In this folder, you will also find files with the dnn prefix. These files are used for making DNN-specific style changes, such as adjustments to the DNN UI.

SASS / SCSS Variables

Die standardmäsigen SCSS-Variablen findest du im 2shine-Skin-Ordner. Von dort navigiere zu src/scss/_variables.scss. There are variables with the prefix tosic, which means they are prepared variables set to your preferences. Most of the variables are self-explanatory, but we will still briefly look at the important ones.

$primary - Changes the primary color of the skin.
$secondary - Changes the secondary color of the skin.
$theme-colors - Allows you to add or change theme colors, which can be used like BS classes (e.g., .bg-yourcolor).

To learn more about the variables, check the comments in the _custom-variables.scss file or refer to the Sass Bootstrap5 documentation.

When to Use Bootstrap Variables

Bootstrap variables are predefined variables provided by Bootstrap, which can be used to customize and theme the Bootstrap framework.

Use Bootstrap variables when:

You want to modify the default Bootstrap styles.
You need consistency across your project by leveraging Bootstrap's theming system.
You are customizing the color scheme, typography, spacing, or any other aspect of Bootstrap components.

When to Use Sass Variables

Sass variables are custom variables that you define in your Sass files.

Use Sass variables when:

You need to create custom styles that are not covered by Bootstrap variables.
You want to maintain DRY (Don't Repeat Yourself) principles by reusing values throughout your custom styles.
You need to manage design tokens and other reusable values specific to your project.

Usage

If you want to change a variable, first try to change it in theme.css. If the variable isn't defined there and there is no Bootstrap variable that can be accessed, make use of the _custom-variables.scss file. There you can directly override existing Sass variables or create your own.

Applying Variables in 2shine BS5 Skin

_custom-variables.scss

This file is used to overwrite Bootstrap variables with your own custom values. These variables are available globally and can be used to customize Bootstrap's default styles.

_custom-maps.scss

This file is used to add custom colors and spacing by merging them into Bootstrap's default maps. It allows for optimized and extended spacing and other customizations.

theme.css

This file leverages CSS variables to define theme-specific customizations that can be applied in the project's root or specific components. It includes Bootstrap's root variables and additional custom variables for theme consistency.