Theme & Styling
The styles and theme source code can be found in wwwroot/assets/scss. The main scss style, nanite-theme.scss builds on top of the base Boostrap 5 styles which are provided as NPM dependencies.
To modify the styling, install node sass and its dependencies. Node sass will run in the background and watch scss files. Any changes to scss will be compiled on the fly to regular css when any changes are detected. Node sass is already listed as a dev dependency, so all you need to do is:
- Open a terminal and navigate to the wwwroot folder
- Run command npm install
- Once installed, run command npm run watchscss
- Now any changed you make in any .scss file will automatically be detected and a new minified css stylesheet will be generated. Reloading the browser will reflect the changes.
The global styling is found in _variables.scss, this file overwrites the default Boostrap theme colors, sizes, spacings, etc. The rules become more specific from top to bottom. To understand how theming works in Boostrap 5, read the documentation.
Everything not related to global style is found in /custom:
- Components
- Pages
- Structure
- Fonts
- Icons
- Plugins
Theme JavaScript is found in wwwroot/assets/js
- Nanite-core.js initializes components and configures validation settings
- Nanite-layout.js manages theme color and sidebar state
- Nanite-helpers.js contains global utility functions
Next Steps
That covers everything specific to Razor project. Read about other UI versions in Vue and React or explore the .NET back-end.