[WIP] Blog: How to style Blazorise components

[ddjerqq]

Added a blog that showcases how to style blazorise components, and goes in depth about how the isolated CSS feature works with blazor

How Has This Been Tested?

Ran the docs server, and checked for visual bugs. Found none.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality not to work as expected)

Checklist:

• The PR is submitted to the correct branch (master for dev, rel-1.x for maintenance).
• My code follows the code style of this project.
• I've added relevant tests.

[ddjerqq]

Need to receive the image for the cover, and need feedback from repo owners before this can be merged.

[David-Moreira]

Personally, I'd like that a blog post like this focus more on Blazorise components, and what's so special about them.

• What value do we provide to the end user?
• How can they be more productive?
• What special apis do we provide with them?
• Do we solve specific styling problems in interesting or easy ways for the user? For example the common problem when people want to center some content? Or other common styling problems?

The sales pitch for Blazorise and generally component libraries, is that you need to know little about what happens under the hood or how stuff works, and we provide abstractions and apis to make it easy to use. I'd focus on that.
Users of this library want to solve common problems quickly, not learn how to use html/css (although knowing that helps haha)

---

@ddjerqq Since I believe I'm reviewing one of your PRs for the first time, I just want to make it clear that I don't want to come across as rude or harsh or anything like that.
You're of course free to contest any of the review comments. They are just based on my opinions from personal / professional experience, and it does not mean they are correct or apply here, we can all just friendly discuss about it.

[David-Moreira]

@stsrki is it too late to retarget rel-1.6 or will it be fine?

[David-Moreira]

Are we perhaps loosing too much page with the intro? almost half of the page for the intro and some duplicated info?

Also Is it how css works with Blazor or with Blazorise?
Then in the first paragraph you mention specifically limitations with Blazor, but in the bullet points you no longer mention it the same.

can we perhaps tie the following bit with the purpose of the blog post? Mentioning how we already provide default styling for these providers, that can be further overriden with the apis/techniques we provide?

"Blazorise is an amazing component library that, is not really tied to any front-end framework. This means we have a lot of options when it comes to choosing which framework we want to use, for example: Bootstrap, Tailwind, Material and many others. check out the full list here

Check out the quick start guide here to get started with Blazorise."

[David-Moreira]

Probably being a little picky, but this is not exactly styling related, but a blazor feature for passing html attributes that are not matched, it could be anything, like title, rel, disabled, etc...

[David-Moreira]

If you would like to find out how to give your Blazorise application a different theme, check out the docs about theming

Here we loose an awesome opportunity to touch on some points about Blazorise theming and how we can quickly AND globally further customize the app, is there nothing we can actually speak about here?

[David-Moreira]

Inert the link tag inside App.razor

Insert

[David-Moreira]

We already had a link about theming, and now we have it again?

[David-Moreira]

I like the bit about css isolation now, I think it's better explained. I'd almost move it to its own blog article and enhance it a little bit more. It may be a shorter blog but it's concise and straight to the point. Also good for SEO if someone is looking for css isolation in blazor or blazorise or something like that?

[David-Moreira]

I still think there's little about how you use Blazorise api/tools to style the app, I'd like that @stsrki takes a look for a different pair of eyes over it, I'm not sure I'm giving the best feedback here. After all he's the pro with the blazorise css providers and styling stuff.

[stsrki]

I like the bit about css isolation now, I think it's better explained. I'd almost move it to its own blog article and enhance it a little bit more. It may be a shorter blog but it's concise and straight to the point. Also good for SEO if someone is looking for css isolation in blazor or blazorise or something like that?

Agree.

[stsrki]

I have targeted rel-1.6 as that is our way forward now on.

Regarding the David comments, I agree with him so there's not much I can add. The blog is getting there just rephrase a few thing according to David and we can publish it.

[ddjerqq]

I'm sorry for the big delay, I will continue working on this!

[stsrki]

Also, we have a lot of utility classes to style elements.

Like:

• TextColor
• TextWeight
• Width
• Height
• Overflow
• etc.

[stsrki]

We need to show more how Blazorise uses style.

<Div Style="color: red;">

[stsrki]

What is bg-topo?

[ddjerqq]

it should be bg-red, i will fix it

[stsrki]

Give a real example of using theme.

[stsrki]

Example of using utilities

<Div Width="Width.Px(300)" Height="Height.Is75" TextOverflow="TextOverflow.Wrap" TextColor="TextColor.Muted">
</Div>