Theme & Styling

The assets folder contains static assets like fonts, images, and the styles. The theme style is a project on it’s own made with Sass.

Sass is CSS but with extra capabilities like nesting, variables, etc. which makes it easier to write. Normally .sass files (or scss) need to be compiled into plain old CSS, and an npm package like node sass would be used to compile changes on the fly. Vite handles this out of the box though and can even reference scss directly.

Style elements with the base scss or inline in a Vue component. Typically it’s best to use inline styles in cases that are component specific and global scss in cases where the styling should be more generic.

Nanite Theme

The responsive theme is based on Bootstrap 5 and has styling for all components in light & dark mode.

The nanite-theme is the main scss file and it’s where all the individual scss elements come together. The nanite-theme scss is imported in main.js after any other component styles.

The theme is built on top of the base Bootstrap 5 theme, imported from /node_modules. The variables and theme-mode are what make the theme unique and have the biggest impact on appearance. They follow Bootstrap 5 theming conventions. Learn more about themes in bootstrap in the documentation.

The rest of the scss contains styling specific to one component or plugin. As you add new components, their styles can be overridden by creating new scss definitions and including them in your base styles. If a style is specific to Vue or React, it will have a comment in the code. Otherwise, the styles are the same across all UI projects: Vue, React, Razor.

Next Steps

That covers everything important in the Vue application. Read up on the other versions in React and Razor, or dive into the .NET side of things.