Theme & Styling

The assets folder contains the static assets like fonts, images, and most importantly the style, which is whole project on its own in made with Sass.

Sass is css but with ‘special abilities’ like nesting, variables, etc. which makes css suddenly not a pain to write. Normally sass (or scss) needs to be compiled into plain old css, and an npm package like node sass would do that for us on the fly whenever we make changes. Vite though, makes life even easier and manages that behind the scenes, allowing you to reference scss directly, and even use it in inline styles.

You can style elements via the scss source or inline within the Vue component. Typically it’s best to use the inline style in cases like the layout of a specific form, where the effect should only be local. Style the source scss in cases where the application is more global. 

Nanite Theme

The theme is based on Bootstrap 5. It’s responsive, has styling for every component, and contains two color modes: light & dark.

The nanite-theme is the main scss file and its where all the individual scss elements come together. The nanite-theme scss is imported in main.js after any other components that need their own base styles.

The theme is built on top of the base Bootstrap 5 style. You can see in nanite-theme that these base styles are imported first from node modules. The variables and theme-mode are what make the theme unique and have the biggest impact on how things look and feel. They follow Boostrap 5 theming conventions which can be learned about by reading the documentation.

Everything else is component specific or plugin specific. As you add new components or utilize additional third party components, their styles can be overridden by creating new scss definitions here. Any plugin that is specific to this particular implementation of the UI, will have a note next to indicate that it is Vue specific or React specific. Otherwise, all the styles are the same in any of the three 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.