This project integrates Bootstrap 5 theming and responsive design with Bootstrap to create a versatile and visually appealing UI. Using Sass for React, the theme leverages Sass for advanced styling features like nesting and variables, ensuring modular and maintainable code. For component-specific needs, React inline styles can be applied, offering flexibility alongside the global SCSS.

The main theme builds on Bootstrap 5’s base styles, combining light and dark modes for an adaptable design. With a focus on reusability and customizability, it provides a solid foundation for modern React applications. We’ve chosen Bootstrap for its familiarity and minimal lock-in compared to React component libraries like MUI.

Organization

The assets folder contains static assets like fonts, images, and the styles. The theme style is a project on its own in 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 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 React application. Read up on the other versions in Vue and Razor, or dive into the .NET side of things.