Any chance of making the controls built on top of Bootstrap?

[SunnysGlimpse]

So I love your platform and have come to thoroughly understand it. I also love all the functionality and features that you are building into your components, as you continue to work on improving them. However, at the end of the day, I am not at all a fan of the Fluent Design, and thus the look and feel of the BlazorUI library.

I had brought in the BlazorUI project and started to convert the SCSS one-by-one for each component to be utilizing the latest Bootstrap classes and honestly was running into no issues. It's my belief it would be good to make Bit's UI components work with different foundations, e.g. Bootstrap, Material, Fluent, and maybe even Tailwind down the road.

For me, I'm most familiar with Bootstrap, believe it looks good, and know it is still the most widely used.

Anyways, I started to customize each control, starting with the most basic, into being built on Bootstrap. In the end, I just don't have the time for it at the moment because I need to focus on other development, so I ended up completely switching over to use Havit's components, specifically because they are built on Bootstrap, but also lightweight like yours (which I truly appreciate). So many commercial libraries (Telerik and others) are literally 4+ MB in size via JS and/or CSS and people overlook that.

So I wanted to at least throw the idea out there to perhaps one day make your component library built on Bootstrap. While I don't use Material or Tailwind, either of those would probably be great to have as well. I think if you did this, and made the controls have a nicer UI, you will see greater adoption. Not to mention, more people are familiar with the Bootstrap framework than any CSS framework.

I know this is no small endeavor in the least, which is why I went back and forth even offering the suggestion, but in the end, I would like to help you make Bit more well known to the masses. So that's my 2 cents.

[msynk]

@SunnysGlimpse Thanks for contacting us, we appreciate your kind words about our product.

One of our main goals in developing this library was (and still is) to support different design systems other than the default FluentUI one. That's why we have the Theme infrastructure baked into our code base.

So fundamentally we are already supporting the ability to add a new design system, but since we have a limit on our resources to develop new features, this part is still incomplete. although you can update the default Theme variables to achieve some level of customization, it still needs a lot of work to be a full-featured Theme system.

[SunnysGlimpse]

@msynk It's exciting to hear that you all have this in the back of your mind!

I know the "theme" infrastructure sounds good in theory, however, placing the current library of components on top of Bootstrap foundation really isn't feasible because I've looked in depth at most of the components and the majority of the CSS/SCSS is extremely specific to each component and essentially hard coded. So if someone takes a Bootstrap "form-control" class or lets say even a modifier, such as "form-control-sm" and puts that on an BitTextField, it is not going to meld well when the specific CSS for the BitTextField has the following defining margins/padding/font-size/etc:

bit-tfl {
    margin: 0;
    padding: 0;
    box-shadow: none;
    font-weight: 400;
    position: relative;
    box-sizing: border-box;
    font-size: spacing(1.75);
    font-family: $tg-font-family;

    &.bit-dis {
        .bit-tfl-lbl {
            color: $clr-fg-dis;
        }

        .bit-tfl-fgp {
            border: none;
            cursor: default;
            color: $clr-fg-dis;
            background: $clr-bg-dis;
            border: $shp-border-width $shp-border-style $clr-brd-dis;
        }
        ...

Bootstrap naturally already supports dark/light modes out of the box, so tweaking the Bit platform to instead work off the "data-bs-theme" attribute versus the Bit attribute was an easy switch.

The way each individual component in the library is marked up...is a different story.

Anyways, I am sure you have a million things queued up and limited resources, so I just wanted to put the idea out there for potential architecture and planning for the future! I cannot thank you enough already for what you have put together.

[msynk]

Oh wow, thanks for your research on our product. we are well aware of these limitations, that's why I said it has a lot of work to be a full-featured theme system. One of the main focuses of this theme system should also be updating the HTML layout (not just the CSS) to have a freer structure for it to be applied in multiple design systems which is very hard to achieve for us.

[nhwilly]

I was also interested in Tailwind, but after investigating I can see why that might be more than I can handle. That said, is there any guidance for at least updating the colors using the current approach? I did see in the docs:

The source code of these CSS variables is available in the bit BlazorUI GitHub repo .
You can simply override these values to customize the UI.

Override where? There are import statements in a lot of places, including for each control. What, exactly, would I have to include in my project to make this work? I presume I would still load:

<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />

in my code so that I can pick up all the other supported items.

And I see how I can name my own theme using:

await _bitThemeManager.SetThemeAsync("fluent-dark");

Do I just create another scss file that attaches to the root element and ensure that the output gets included during a build?

Would I just have to ensure that the theme names are unique?

I'm not so familiar with SCSS processing.

I've looked at a lot of these packages (at least a dozen) and the way you allow overriding of the classes and styles at least makes this approachable.

My team are not fans of the Fluent look, so I'm being forced to look at other things. They really like Flowbite and TailwindUI kits, so I'm aiming for that look. I know it's work, but at least your controls seem to function.

Anyway, congratulations on a cool library. I started to work on my own controls, so I know what sort of effort is involved. Well done.

[nhwilly]

Ok, answering some of my own questions here. I installed the WebFactory 2022+ package.

1. I just created a copy of colors.fluent-dark.scss and called it custom-dark.scss
2. Changed :root[bit-theme="dark"] to :root[bit-theme="custom-dark"]
3. Updated a few colors to make sure it works.
4. Updated the App.razor to load the custom-dark.css file in the header.
5. Used await _bitThemeManager.SetThemeAsync("custom-dark") on a button.

And it worked.

[msynk]

Thanks for contacting us, and thanks for showing your interest in our product. we appreciate your kind words.

the solution you've posted is exactly what we meant by overriding the CSS variables. you can also see a sample of these overrides in our main website (https://bitplatform.dev) source code here:

https://github.com/bitfoundation/bitplatform/blob/develop/src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/app.scss

We also support a set of C# APIs for defining your own theme with multiple approaches. All of them are documented in the Theming page of our BlazorUI docs:

https://blazorui.bitplatform.dev/theming

Note: when we started developing our products, especially the theme system, we did a thorough investigation and eventually landed on the current solution of using SCSS files to build our styling infrastructure. at the time other solutions such as Tailwind weren't mature enough in our stack (ASP.NET and Blazor). But recently we've started investigating this part again and we might be able to introduce new features.

hope this info will be useful for you.

[nhwilly]

But now I have a follow up question.

If I define my own "light" and "dark" themes, they don't replace the fluent-light and fluent-dark themes, correct? And since they don't, I can't use the toggle control to switch between them.

I'll have to manually switch. And that means the use-system-theme won't work, either.

Is there any documentation/guidance on using the JS BitTheme object properly?

Because to effectively make this work, I have to replace the dark/light that comes with bitUi with my own variations - or - override the toggle/use system functions to use my own theme names.

Thanks in advance for your help.

[msynk]

good question. the toggle method is just a sugar API for using the low-level Get/Set ones.
you can utilize these get/set APIs both in C# (using the BitThemeManager) and JS to apply your custom themes.

[msynk]

but for use-system-theme feature I think we need to add a new set of features to support custom theme names.
I'm going to take care of it ASAP.

[nhwilly]

Wow, what a great, fast response. Thank you for that and this library. Very excited to begin using it and I'm putting it through the paces now. I want to finalize on it in the next day or so.

I figured I didn't mind about the toggle method. I'd probably have my own theme names anyway, just in case there are more than two.

But, when the application first loads, I'll be following the system theme and I need to know how to figure which one is in use. I know there are JS routines that exist and I'm fine if it comes to that, but this library is so complete, I was hoping to use the native features which are surely better than the ones I would write - especially in JS.

I guess I'd need to know if the system theme was light or dark and then I'd translate that to my custom-light or custom-dark. After that, I'll be looking in local storage to see which one they prefer and if nothing is there, follow the system preference.

[msynk]

one important thing:

generally, you should not need to change the default names of dark and light themes (like custom-light or custom-dark). you can override everything you need using the default theme names.

[msynk]

I've created this PR for this requirement: #10027

now you can provide custom names for your themes and set them using the new darkTheme and lightTheme parameters of the init option of the BitTheme like this:

BitTheme.init({
//...
    darkTheme: 'custom-dark',
    lightTheme: 'custom-light',
//...
});

[nhwilly]

I think can understand - mostly - what's happening here:

:root[bit-theme="custom-dark"] {
    color-scheme: dark;
    //primary
    --bit-clr-pri: oklch(0.627 0.265 303.9);
    --bit-clr-pri-hover: oklch(0.714 0.203 305.504);
    --bit-clr-pri-active: #457FCC;
    --bit-clr-pri-dark: #367FE0;
    --bit-clr-pri-dark-hover: #3379D5;
    --bit-clr-pri-dark-active: #3172CA;
    --bit-clr-pri-light: #89BCFF;
    --bit-clr-pri-light-hover: #78B2FF;
    --bit-clr-pri-light-active: #67A9FF;
    --bit-clr-pri-text: #212121;

the bit-theme variable is the value I use to set the theme.

I'm not sure what color-scheme: does...

and I think the variable naming is:

• bit - you guys
• clr - color
• pri - primary
• hover - mouse over
• active - selected?

But I don't understand why there are also dark and light variances in the same set. There are primary, primary-dark and primary-light.

When you switch themes, are you changing at the root level, or only changing the variable name?

[msynk]

the :active pseudo CSS class indicates the active state of the element which means when the element is pressed by the mouse for example. we used the same name to indicate that specific state.

the light and dark sub colors are just specific colors that we used in a few places in our components. don't mix them with the theme names dark/light. for example, in the BitDateRangePicker the elements of the date-range use the light variant of the primary color.

switching theme only changes the bit-theme custom attribute on the root element (the html tag). through the CSS attribute selector (the one you've already shown :root[bit-theme="dark"]) the values for the CSS variables will be changed by the browser itself.

[nhwilly]

Great answer. I need to focus on the top three and worry about the others when I come across them. So now I can just create my custom-light and custom-dark files and move on. This is great. Thank you!

[msynk]

btw, the color-scheme is a directive for the rendering engines (the browser for example) to hint to them that the element prefers to be rendered in a specific theme, so the agent can use the correct default style for them.

[nhwilly]

This has been such a great discussion that I thought I should ask one more question. :)

I want to toggle the BitNav to IconOnly parameter when the screen is reduced to a smaller size (but not quite mobile).

I know I can catch a JS function on screen resize, but I thought I would ask to see if the capability is already in the library. I can't seem to find it.

I know that I can control lots of presentation with CSS, I was just hoping to hook into IconOnly as a simple and responsive way.

Is there a control or other built-in way to break on screen sizes? I can see that it's happening in BitGrid but I don't see an event for responding to screen size.

Thanks, again.

[msynk]

another good question, but unfortunately we don't have an answer for this in our product, YET!😊
I'm starting to develop a new component to catch media query responses from the browser and provide it in the .net context. there are some alternatives out there but not quite what we like.

[nhwilly]

No worries. I'll cobble together something simple in the meantime. Thanks!

[nhwilly]

Edit: After writing the question below, I tried some things.

I think it's best for me to choose my own variable instead of reusing one of yours for simple cases.

I am having a great experience with this library. I have a simple question.

I'd like to override the background colors for main, main-content, navpanel and other areas. Right now, they are controlled by the browser and the "color-scheme: dark;" CSS variable.

If you were me, would you create a new CSS value and assign it to those areas or would you use one of the existing --bit-clr values? It seems to me you might have one in mind that works best, since everything else in this package is so well thought through.

Which existing value would I pick, if that's what I decide to do?

TIA

[msynk]

I'm not sure what you mean by main and main-content, and the BitNavPanel has its own specific background-color.
But generally, in our projects, we are styling the body element as the root of all visible elements like this:

in the App.razor:

<body class="@BitCss.Class.Color.Background.Primary @BitCss.Class.Color.Foreground.Primary">

in the index.html:

<body class="bit-css-clr-bg-pri bit-css-clr-fg-pri">

these predefined C# and CSS classes have been added to BlazorUI for ease of use.

[nhwilly]

Oh, sorry.

Looks like I missed the nested nature of the theme design, especially when it comes to modifying it. I'll have to study it more.

Thanks.