User Interface

There are certain configurable UI elements that are worth mentioning.

  • The toolbar found in Toolbar.razor. If you would like to change the height or color, look for the .header class in wwwroot\css\style.css.
  • To change the width of the sidebar (Navigation.razor), look for the .sidepanel class in wwwroot\css\style.css. If you change the width, make sure you also adjust the .main class above it in the media query.

There is also logic to toggle the sidebar when the hamburger button is clicked. Additionally, for screen sizes less than 876px, the sidebar will hide and .main will take up 100% of the screen. Even though it is hidden, clicking the hamburger button will show the sidebar so that the user can still navigate on small screens. All that logic is in wwwroot\js\site.js

Blazorise

We have searched far and wide for which UI library to use for Start Blazoring. The one that fit the bill quite well was Blazorise. The library offers most common UI constructs, is clean and performant, and supports various themes. Our template comes with Bootstrap configured, but in theory you can use any of their supported frameworks. If you need help with getting any of that set up, let us know.

Other Libraries

You are by no means limited to using Blazorise. Replacing it with something else should not be too difficult, as long as your library of choice has all the component that our UI needs (modals, data table, form validation). We have evaluated two other premium frameworks: Syncfusion and Telerik. They both have Blazor components. Syncfusion's advantage is that it provides a free Community license if you are an individual developer or a small company. The disadvantage is that it is quite buggy. Telerik does not have a free version, but we consider it to be superior to Syncfusion. You only really need a Premium library if you need specialized components, such as a Scheduler, which Blazorise does not have.

Table of Contents



An error has occurred. This application may no longer respond until reloaded. Reload 🗙