Design Principles

Blazorade Bootstrap Design Principles

Blazorade Bootstrap aims to make using Bootstrap easier with Blazorade Bootstrap than without it. This is achieved mainly by making sure that with Blazorade Bootstrap you:

• write less markup
• have less to remember
• can rely on intellisense and auto-complete
• write no JavaScript (unless you want to)

Write Less Markup

Many of Bootstrap's components require a lot of HTML markup. There are various levels of nested <div> elements with a numerous amount of CSS classes you have to specify on them.

A lot of this markup can be embedded in the Razor components provided by Blazorade Bootstrap so that developers need to write less boilerplate markup.

Have Less to Remember

The foundation for Bootstrap is built on CSS classes that when applied to one or more HTML elements, give the element a certain look or layout. There's quite a lot of CSS classes in Bootstrap that you need to remember.

Blazorade Bootstrap defines enum types that represent sets of CSS classes. These are exposed through parameters in the components provided by Blazorade Bootstrap.

Blazorade Bootstrap also exposes template parameters that you use to provide markup that is placed in various nested HTML elements produced by the component. This way, you don't have to remember all the nested elements that are required to make a Bootstrap component.

Rely on IntelliSense and Auto-Complete

This is tightly related to the previous point about having less to remember. It is still worth mentioning that by leveraging parameters, enum types and constants, and naming the parameters in a sensible way, and not shortening them to one or two characters as Bootstrap does (for a good reason though), authoring Bootstrap components with Blazorade Bootstrap becomes more intuitive, and you need to consult the Bootstrap documentation less.

Write no JavaScript

Blazorade Bootstrap leverages the fact that you don't have to write JavaScript in Blazor applications. Many Bootstrap components, such as the Modal provides interaction functionality through the Bootstrap JavaScript API. Blazorade Bootstrap takes care of all JavaScript communication with the Bootstrap JavaScript API and exposes methods on the components as regular methods that you simply call from your C# code.

If you want, you can still interact with your UI elements using the Bootstrap JavaScript APIs, but Blazorade Bootstrap gives you the option to rely purely on C# if you want to.