Megabit · ddjerqq · Jul 19, 2024 · Jul 21, 2024 · Jul 26, 2024 · Aug 25, 2024
diff --git a/...-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html b/...-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html
@@ -0,0 +1,9 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">styles.css</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...StyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html b/...StyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html
@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">{ASSEMBLY NAME}.styles.css</span><span class="quot">&quot;</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...oStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html b/...oStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html
@@ -0,0 +1,8 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Success</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">AlertMessage</span><span class="htmlTagDelimiter">&gt;</span>Well done!<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">AlertMessage</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">AlertDescription</span> <span class="htmlAttributeName">Class</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bg-topo</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>You successfully read this important alert message.<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">AlertDescription</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...zoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html b/...zoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html
@@ -0,0 +1,8 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Alert</span> <span class="htmlAttributeName">Color</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Color</span><span class="enumValue">.Success</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Visible</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">AlertMessage</span><span class="htmlTagDelimiter">&gt;</span>Well done!<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">AlertMessage</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">AlertDescription</span> <span class="htmlAttributeName">Style</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">color:red; font-size:46px</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>You successfully read this important alert message.<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">AlertDescription</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Alert</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html b/...-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">div</span> <span class="htmlAttributeName">style</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">color: red;</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    Hello from Blazorise!
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">div</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html b/...07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="csharp"><pre>
+.bg-topo {
+    background-image: url(<span class="string">&quot;...&quot;</span>);
+}
+</pre></div>
+</div>
diff --git a/...ToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html b/...ToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Div</span> <span class="htmlAttributeName">Class</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">isolated-class-name</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    ...
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Div</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...tyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html b/...tyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="csharp"><pre>
+.isolated-<span class="keyword">class</span>-name {
+    <span class="comment">/* class info here */</span>
+}
+</pre></div>
+</div>
diff --git a/...9_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html b/...9_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html
@@ -0,0 +1,7 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">div</span> <span class="htmlAttributeName">Class</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">bg-topo</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    ...
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">div</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+</div>
diff --git a/...-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet b/...-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet
@@ -0,0 +1,5 @@
+<html>
+<head>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+</html>
diff --git a/...leBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet b/...leBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet
@@ -0,0 +1 @@
+<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
diff --git a/...yleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet b/...yleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet
@@ -0,0 +1,4 @@
+<Alert Color="Color.Success" Visible>
+    <AlertMessage>Well done!</AlertMessage>
+    <AlertDescription Class="bg-topo">You successfully read this important alert message.</AlertDescription>
+</Alert>
diff --git a/...iseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet b/...iseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet
@@ -0,0 +1,4 @@
+<Alert Color="Color.Success" Visible>
+    <AlertMessage>Well done!</AlertMessage>
+    <AlertDescription Style="color:red; font-size:46px">You successfully read this important alert message.</AlertDescription>
+</Alert>
diff --git a/..._HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet b/..._HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet
@@ -0,0 +1,3 @@
+<div style="color: red;">
+    Hello from Blazorise!
+</div>
diff --git a/...19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet b/...19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet
@@ -0,0 +1,3 @@
+.bg-topo {
+    background-image: url("...");
+}
diff --git a/...tyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet b/...tyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet
@@ -0,0 +1,3 @@
+<Div Class="isolated-class-name">
+    ...
+</Div>
diff --git a/...eBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet b/...eBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet
@@ -0,0 +1,3 @@
+.isolated-class-name {
+    /* class info here */
+}
diff --git a/...owToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet b/...owToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet
@@ -0,0 +1,3 @@
+<div Class="bg-topo">
+    ...
+</div>
diff --git a/...ion/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md b/...ion/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md
@@ -0,0 +1,162 @@
+---
+title: How to style Blazorise components
+description: Discover
+permalink: /blog/how-to-style-blazorise-components
+canonical: /blog/how-to-style-blazorise-components
+image-url: /img/blog/2024-07-19/how-to-style-blazorise-components.png
+image-title: How to style Blazorise components
+author-name: Giorgi
+author-image: giorgi
+posted-on: Jul 19th, 2024
+read-time: 7 min
+---
+
+# Styling Blazorise components
+
+Hello! today we are going to go over how to style Blazorise components!
+
+As your know, Blazorise is a framework-agnostic library, this means we have a lot of options when it comes to choosing what type of framework we want to use.
+
+Check out the [quick start](https://blazorise.com/docs/start) guide here to get started with Blazorise.
+
+## In this article, we will go over the following:
+
+- Styling Blazorise components#How does CSS work with Blazorise?|How does CSS work with Blazorise?
+- Styling Blazorise components#How to style Blazorise components?|How to style Blazorise components?
+- Styling Blazorise components#Limitations of CSS Isolation|Limitations of CSS Isolation
+
+---
+
+So let's dive into the topics and explore our options when it comes to styling Blazorise components.
+
+## How does CSS work with Blazorise?
+
+Blazorise, just like plain Blazor, is a framework that helps us generate responsive web UI. This means that Blazorise supports every CSS property that is supported by the browser. There are no special CSS properties that only apply to Blazor or Blazorise.
+
+If you would like to find out how to give your Blazorise application a different theme, check out [the docs about theming](https://blazorise.com/docs/theming)
+
+### Inline styling
+
+Inline CSS styling can be applied to any Blazor component directly.
+
+```html|InlineClass
+<div style="color: red;">
+    Hello from Blazorise!
+</div>
+```
+
+Just like regular html elements, Blazor elements can receive all attributes such as style, class, type, and so on.
+
+### CSS classes
+
+Let's take a look at how we can use CSS classes to style our Blazor app.
+
+First we should create a `styles.css` file inside the `wwwroot` folder and add a reference to it inside `App.razor` like so:
+
+create styles.css
+```css|StylesCss
+.bg-topo {
+    background-image: url("...");
+}
+```
+
+App.razor
+```html|AppRazor
+<html>
+<head>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+</html>
+```
+
+After adding this, we can use these classes as usual with our Blazorise components.
+
+Let's see an example:
+```html|UseClassesCss
+<div Class="bg-topo">
+    ...
+</div>
+```
+
+The class will be applied to our div element, and we will see the background image appear.
+
+This is pretty much all the basics covered for regular Blazor
+
+## How to style Blazorise components
+
+Styling Blazorise components is really straightforward. Blazorise being an abstraction over Blazor means that we can directly access the attributes that will be passed to the underlying HTML elements.
+
+### Inline styling
+
+Here is a small example that shows how we can use inline styles with Blazorise.
+
+```html|BlazoriseInlineStylesExample
+<Alert Color="Color.Success" Visible>
+    <AlertMessage>Well done!</AlertMessage>
+    <AlertDescription Style="color:red; font-size:46px">You successfully read this important alert message.</AlertDescription>
+</Alert>
+```
+
+As we can see from [BaseComponent.customStyle](https://github.com/Megabit/Blazorise/blob/master/Source/Blazorise/Base/BaseComponent.cs#L22) all Blazorise components have support for the `Style` and `Class` and many other default attributes.
+
+### CSS classes
+
+Applying CSS classes is as straight forward as plain on Blazorise, we just specify the class like so:
+
+```html|BlazoriseCSSExample
+<Alert Color="Color.Success" Visible>
+    <AlertMessage>Well done!</AlertMessage>
+    <AlertDescription Class="bg-topo">You successfully read this important alert message.</AlertDescription>
+</Alert>
+```
+
+### Theming
+
+Blazorise has support for themes. Customize Blazorise with your theme. You can change the colors, the typography and much more using themes.
+
+To learn more about theming, head over to the [documentation page](https://blazorise.com/docs/theming)
+
+## Limitations of CSS Isolation
+
+Blazorise just like other Blazor frameworks has a limitation with CSS isolation, you see, CSS Isolation works by compiling the CSS styles and bundling them up with the Assembly.
+
+CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `<head>` tag ([location of `<head>` content](https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-8.0#location-of-head-and-body-content))
+
+The following `<link>` element is added by default to an app created from the Blazor project templates:
+
+```html|BlazorHtmlStylesLink
+<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
+```
+
+The `{ASSEMBLY NAME}` placeholder is the project's assembly name.
+
+Within the bundled file, each component is associated with a scope identifier. For each styled component, an HTML attribute is appended with the format `b-{STRING}`, where the `{STRING}` placeholder is a ten-character string generated by the framework. The identifier is unique for each app.
+
+The problem here is that, the bundle is generated at compile time of the CSS.
+
+### Let me illustrate this limitation with an example.
+
+Let's create a component in our project, call it `TestComponent`
+
+`TestComponent.razor`
+```html|TestComponentRazor
+<Div Class="isolated-class-name">
+    ...
+</Div>
+```
+
+Then create the scoped CSS file for it
+
+`TestComponent.razor.css`
+```css|TestComponentRazorCss
+.isolated-class-name {
+    /* class info here */
+}
+```
+
+This will not work, because when your application is compiled, the generated `b-{STRING}` will be different than that of Blazorise's. This is a known limitation of Blazor, but the workaround is very simple!
+
+### The workaround:
+This is not really a "workaround" rather a different approach at the issue. You cannot make 3rd party libraries work with your isolated CSS classes, **however** what you can do, is move those classes to a separate CSS file hosted under `wwwroot`.
+
+# Thanks for reading this blog and using Blazorise!!!
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">