This example creates simple layouts using primitive building blocks. The application includes two pages that display an employee card using two CSS strategies.
Both pages display the same DevExpress Blazor components to help you focus on the CSS strategy rather than component behavior.
The home page (Index.razor) uses custom CSS primitive classes defined in the wwwroot/css/primitives.css stylesheet. These classes rely on DevExpress Blazor public CSS variables to specify spacing, color, border, opacity, shadow, and typography styles.
To add the stylesheet to a theme, call the AddFilePaths method during theme registration (refer to the App.razor file).
The DevExpress Design System allows you to define any required style, change variable values at runtime, and retain UI consistency across the entire application; however, it requires writing custom CSS.
The BootstrapClasses.razor page creates a similar layout using Bootstrap classes shipped within DevExpress Blazor Fluent themes. These classes are integrated with our Design System and automatically adapt to size modes and other UI settings.
The BootstrapClasses.razor.css stylesheet contains a CSS rule that limits card size.
To render a Bootstrap-based layout in Fluent themes, enable the UseBootstrapStyles option in theme settings (refer to the App.razor file).
The Bootstrap approach allows you to build the UI using predefined classes without additional CSS, but its spacing, size, and color scales are fixed (you cannot use arbitrary or intermediate values). Dynamic styling scenarios may require additional classes or custom CSS/inline styles.
- Components/Pages/Index.razor
- Components/Pages/BootstrapClasses.razor
- Components/Pages/BootstrapClasses.razor.css
- Components/App.razor
- wwwroot/css/primitives.css
- wwwroot/css/theme-fluent.css
(you will be redirected to DevExpress.com to submit your response)