Skip to main content
Home  › ... Docs › Bootstrap5 SASS

Bootstrap5 SASS in 2shine

Start designing with SASS

2shine is built to give you many different customization possibilites. You will have to prepare for your customization by installing node.js and some dependencies that are needed to convert your changes to CSS and JS. 

  1. Make sure node.js is installed - or install Node now. This will also install NPM (the node-package-manager).
  2. Install all dependencies by running this command in your root folder:
    npm ci
    OR
    npm install
  3. Webpack should now be able to watch for changs and auto-compile new CSS/JS. 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 accessed within the theme/ folder.

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

You can find all of the different stylesheets in the src/scss folder. 

  1. _custom-variables.scss -> This file prepares all the variables
  2. _custom-pages.scss -> This file can be used to define page specific customization
  3. components -> In the components folder all the component styles are defined
  4. layouts-> The layouts folder contains all the different layout variations

In this folder you will also find some files that have the prefix dnn those files are used to make Dnn specific style changes like changes to the Dnn UI.

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

SASS / SCSS Variables

You can find the standart scss variables in the 2shine skin folder. From there you go to src > scss > _variables.scss. There are variables with the prefix "tosic"which just means those are variables that we prepared and are set for our preference. Most of the variables are pretty self-explanatory but we will take a short look at the important ones anyway.

  • $primary - with this variable you can change the primary color of the skin
  • $secondary - with this variable you can change the secondary color of the skin
  • $theme-colors - with this variable you can add or change theme-colors which can be used like BS Classes (like .bg-yourcolor)

To learn more about the variable go to the _custom-variables.scss file and take a look at the comments there or go to take a look at the Sass Bootstrap5 documentation.