From 6541777462c5c45830257cbe2d6adb030bc4ac4c Mon Sep 17 00:00:00 2001 From: 10x developer Date: Fri, 19 Jul 2024 23:53:24 +0400 Subject: [PATCH 1/3] added blog: how to style blazorise components --- ...StyleBlazoriseComponents_AppRazorCode.html | 9 + ...seComponents_BlazorHtmlStylesLinkCode.html | 5 + ...iseComponents_BlazoriseCSSExampleCode.html | 8 + ...ents_BlazoriseInlineStylesExampleCode.html | 8 + ...leBlazoriseComponents_InlineClassCode.html | 7 + ...tyleBlazoriseComponents_StylesCssCode.html | 7 + ...riseComponents_TestComponentRazorCode.html | 7 + ...eComponents_TestComponentRazorCssCode.html | 7 + ...BlazoriseComponents_UseClassesCssCode.html | 7 + ...oStyleBlazoriseComponents_AppRazor.snippet | 5 + ...iseComponents_BlazorHtmlStylesLink.snippet | 1 + ...riseComponents_BlazoriseCSSExample.snippet | 4 + ...nents_BlazoriseInlineStylesExample.snippet | 4 + ...yleBlazoriseComponents_InlineClass.snippet | 3 + ...StyleBlazoriseComponents_StylesCss.snippet | 3 + ...oriseComponents_TestComponentRazor.snippet | 3 + ...seComponents_TestComponentRazorCss.snippet | 3 + ...eBlazoriseComponents_UseClassesCss.snippet | 3 + .../Index.md | 162 +++++++++++++ .../Index.razor | 225 ++++++++++++++++++ .../Blazorise.Docs/Pages/Blog/Index.razor | 1 + 21 files changed, 482 insertions(+) create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html new file mode 100644 index 0000000000..a2369fc95a --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html @@ -0,0 +1,9 @@ +
+
+<html>
+<head>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+</html>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html new file mode 100644 index 0000000000..792cc33b7f --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html @@ -0,0 +1,5 @@ +
+
+<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html new file mode 100644 index 0000000000..dd0bb47f9c --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html @@ -0,0 +1,8 @@ +
+
+<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/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html new file mode 100644 index 0000000000..e9af688935 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html @@ -0,0 +1,8 @@ +
+
+<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/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html new file mode 100644 index 0000000000..827ea7e4ae --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html @@ -0,0 +1,7 @@ +
+
+<div style="color: red;">
+    Hello from Blazorise!
+</div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html new file mode 100644 index 0000000000..32702c2fea --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html @@ -0,0 +1,7 @@ +
+
+.bg-topo {
+    background-image: url("...");
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html new file mode 100644 index 0000000000..8ad158a6dd --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCode.html @@ -0,0 +1,7 @@ +
+
+<Div Class="isolated-class-name">
+    ...
+</Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html new file mode 100644 index 0000000000..f7032dcf8a --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_TestComponentRazorCssCode.html @@ -0,0 +1,7 @@ +
+
+.isolated-class-name {
+    /* class info here */
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html new file mode 100644 index 0000000000..40f596eef1 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html @@ -0,0 +1,7 @@ +
+
+<div Class="bg-topo">
+    ...
+</div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet new file mode 100644 index 0000000000..58072a56f9 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet new file mode 100644 index 0000000000..28395bccb9 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet new file mode 100644 index 0000000000..d087169d72 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet @@ -0,0 +1,4 @@ + + Well done! + You successfully read this important alert message. + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet new file mode 100644 index 0000000000..d4a487e320 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet @@ -0,0 +1,4 @@ + + Well done! + You successfully read this important alert message. + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet new file mode 100644 index 0000000000..c4226e24d3 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet @@ -0,0 +1,3 @@ +
+ Hello from Blazorise! +
\ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet new file mode 100644 index 0000000000..d80163f310 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet @@ -0,0 +1,3 @@ +.bg-topo { + background-image: url("..."); +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet new file mode 100644 index 0000000000..39e436eaf4 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazor.snippet @@ -0,0 +1,3 @@ +
+ ... +
\ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet new file mode 100644 index 0000000000..79ca5de876 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_TestComponentRazorCss.snippet @@ -0,0 +1,3 @@ +.isolated-class-name { + /* class info here */ +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet new file mode 100644 index 0000000000..d21ff82070 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet @@ -0,0 +1,3 @@ +
+ ... +
\ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md new file mode 100644 index 0000000000..d7b782e5a6 --- /dev/null +++ b/Documentation/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 +
+ Hello from Blazorise! +
+``` + +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 + + + + + +``` + +After adding this, we can use these classes as usual with our Blazorise components. + +Let's see an example: +```html|UseClassesCss +
+ ... +
+``` + +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 + + Well done! + You successfully read this important alert message. + +``` + +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 + + Well done! + You successfully read this important alert message. + +``` + +### 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 `` tag ([location of `` content](https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-8.0#location-of-head-and-body-content)) + +The following `` element is added by default to an app created from the Blazor project templates: + +```html|BlazorHtmlStylesLink + +``` + +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 +
+ ... +
+``` + +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!!! \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor new file mode 100644 index 0000000000..77457d7904 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor @@ -0,0 +1,225 @@ +@page "/blog/how-to-style-blazorise-components" + + + + + + + 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 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 + + + + Inline styling + + + + Inline CSS styling can be applied to any Blazor component directly. + + + + + + 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 + + + + + + App.razor + + + + + + After adding this, we can use these classes as usual with our Blazorise components. + + + + Let's see an example: + + + + + + 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. + + + + + + As we can see from BaseComponent.customStyle 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: + + + + + + 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 + + + + 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 ) + + + + The following link element is added by default to an app created from the Blazor project templates: + + + + + + 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 + + + + + + Then create the scoped CSS file for it + + + + TestComponent.razor.css + + + + + + 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!!! + + + diff --git a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor index 74ffa53f53..d8411d8b4a 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor +++ b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor @@ -66,6 +66,7 @@ List BlogEntries = new List { + new BlogEntry { Category = "How To Guides", Url = "blog/how-to-style-blazorise-components", Text = "How to style Blazorise components", Image = "img/blog/2024-07-19/how-to-style-blazorise-components.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="Jul 19th, 2024", ReadTime="7 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-create-social-media-share-buttons", Text = "How to create social media share buttons with Blazorise", Image = "img/blog/2024-05-17/how-to-create-social-media-share-buttons.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="June 12th, 2024", ReadTime="5 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-implement-validation-with-captcha", Text = "How to implement validation with captcha", Image = "img/blog/2024-05-08/how-to-implement-validation-with-captcha.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="May 8th, 2024", ReadTime="5 min", Pinned = true }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-override-fluent-design-tokens", Text = "How to override Fluent design tokens", Image = "img/blog/2024-03-26/how-to-override-fluent-design-tokens.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="March 26th, 2024", ReadTime="5 min" }, From 6bc426c5eed7ba58499837f51623623ae6713433 Mon Sep 17 00:00:00 2001 From: 10x developer Date: Sun, 21 Jul 2024 18:18:05 +0400 Subject: [PATCH 2/3] Adjusted the blog according to feedback --- .../HowToStyleBlazoriseComponents1Code.html | 7 ++ .../HowToStyleBlazoriseComponents2Code.html | 6 ++ ...zoriseComponents_CaptureUnmatchedCode.html | 6 ++ .../HowToStyleBlazoriseComponents_Code.html | 7 ++ ...lazoriseComponents_ComponentRazorCode.html | 6 ++ ...oriseComponents_ComponentRazorCssCode.html | 7 ++ ...iseComponents_CssIsolationExampleCode.html | 6 ++ ...eBlazoriseComponents_GeneratedCssCode.html | 7 ++ ...BlazoriseComponents_GeneratedHtmlCode.html | 6 ++ .../HowToStyleBlazoriseComponents1.snippet | 3 + .../HowToStyleBlazoriseComponents2.snippet | 2 + .../HowToStyleBlazoriseComponents_.snippet | 3 + ...azoriseComponents_CaptureUnmatched.snippet | 2 + ...BlazoriseComponents_ComponentRazor.snippet | 2 + ...zoriseComponents_ComponentRazorCss.snippet | 3 + ...riseComponents_CssIsolationExample.snippet | 2 + ...leBlazoriseComponents_GeneratedCss.snippet | 3 + ...eBlazoriseComponents_GeneratedHtml.snippet | 2 + .../Index.md | 82 ++++++++++++------- .../Index.razor | 82 +++++++++++++------ 20 files changed, 189 insertions(+), 55 deletions(-) create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents1Code.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents2Code.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CaptureUnmatchedCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CssIsolationExampleCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedCssCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedHtmlCode.html create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents1.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents2.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CaptureUnmatched.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazor.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazorCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CssIsolationExample.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedHtml.snippet diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents1Code.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents1Code.html new file mode 100644 index 0000000000..2dd67e880c --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents1Code.html @@ -0,0 +1,7 @@ +
+
+.foo[b-3xxtam6d07] {
+  background-color: purple;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents2Code.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents2Code.html new file mode 100644 index 0000000000..312180ffe7 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents2Code.html @@ -0,0 +1,6 @@ +
+
+<div class="foo" b-3xxtam6d07>div one</div>
+<Blazorise.Div Class="foo">div one</Blazorise.Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CaptureUnmatchedCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CaptureUnmatchedCode.html new file mode 100644 index 0000000000..3b763ad9f4 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CaptureUnmatchedCode.html @@ -0,0 +1,6 @@ +
+
+[Parameter(CaptureUnmatchedValues = true)]
+public Dictionary<string, object> AdditionalAttributes { get; set; } = [];
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html new file mode 100644 index 0000000000..0e52076ecc --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html @@ -0,0 +1,7 @@ +
+
+.foo {
+  background-color: purple;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCode.html new file mode 100644 index 0000000000..4bad088aae --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCode.html @@ -0,0 +1,6 @@ +
+
+<div class="foo">div one</div>
+<Blazorise.Div Class="foo">div one</Blazorise.Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html new file mode 100644 index 0000000000..0e52076ecc --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html @@ -0,0 +1,7 @@ +
+
+.foo {
+  background-color: purple;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CssIsolationExampleCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CssIsolationExampleCode.html new file mode 100644 index 0000000000..4bad088aae --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_CssIsolationExampleCode.html @@ -0,0 +1,6 @@ +
+
+<div class="foo">div one</div>
+<Blazorise.Div Class="foo">div one</Blazorise.Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedCssCode.html new file mode 100644 index 0000000000..2dd67e880c --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedCssCode.html @@ -0,0 +1,7 @@ +
+
+.foo[b-3xxtam6d07] {
+  background-color: purple;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedHtmlCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedHtmlCode.html new file mode 100644 index 0000000000..312180ffe7 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_GeneratedHtmlCode.html @@ -0,0 +1,6 @@ +
+
+<div class="foo" b-3xxtam6d07>div one</div>
+<Blazorise.Div Class="foo">div one</Blazorise.Div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents1.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents1.snippet new file mode 100644 index 0000000000..495a83738d --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents1.snippet @@ -0,0 +1,3 @@ +.foo[b-3xxtam6d07] { + background-color: purple; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents2.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents2.snippet new file mode 100644 index 0000000000..633c500706 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents2.snippet @@ -0,0 +1,2 @@ +
div one
+div one \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_.snippet new file mode 100644 index 0000000000..fd82667434 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_.snippet @@ -0,0 +1,3 @@ +.foo { + background-color: purple; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CaptureUnmatched.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CaptureUnmatched.snippet new file mode 100644 index 0000000000..b23fc1e347 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CaptureUnmatched.snippet @@ -0,0 +1,2 @@ +[Parameter(CaptureUnmatchedValues = true)] +public Dictionary AdditionalAttributes { get; set; } = []; \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazor.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazor.snippet new file mode 100644 index 0000000000..7b150b5c24 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazor.snippet @@ -0,0 +1,2 @@ +
div one
+div one \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazorCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazorCss.snippet new file mode 100644 index 0000000000..fd82667434 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_ComponentRazorCss.snippet @@ -0,0 +1,3 @@ +.foo { + background-color: purple; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CssIsolationExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CssIsolationExample.snippet new file mode 100644 index 0000000000..7b150b5c24 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_CssIsolationExample.snippet @@ -0,0 +1,2 @@ +
div one
+div one \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedCss.snippet new file mode 100644 index 0000000000..495a83738d --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedCss.snippet @@ -0,0 +1,3 @@ +.foo[b-3xxtam6d07] { + background-color: purple; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedHtml.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedHtml.snippet new file mode 100644 index 0000000000..633c500706 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_GeneratedHtml.snippet @@ -0,0 +1,2 @@ +
div one
+div one \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md index d7b782e5a6..c53e6813c5 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md @@ -13,17 +13,17 @@ read-time: 7 min # Styling Blazorise components -Hello! today we are going to go over how to style Blazorise components! +Learn how CSS works with Blazor, how to style Blazorise components, and the limitations of CSS isolation in Blazor. -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. +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](https://blazorise.com/docs/usage/tailwind/) 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 +- How does CSS work with Blazorise? +- How to style Blazorise components? +- Limitations of CSS Isolation --- @@ -31,7 +31,16 @@ So let's dive into the topics and explore our options when it comes to styling B ## 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. +Blazorise supports every CSS property that is supported by the browser. There are no special CSS properties that only apply to Blazor or Blazorise. + +We can pass any of these attributes to any Blazorise components, and using the magical `CaptureUnmatchedValues` option, we will capture all the attributes that are not directly caught by our parameters. +```cs|CaptureUnmatched +[Parameter(CaptureUnmatchedValues = true)] +public Dictionary AdditionalAttributes { get; set; } = []; +``` + +To read up about this Blazor feature, head over to [blazor-university](https://blazor-university.com/components/capturing-unexpected-parameters/) + 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) @@ -53,14 +62,14 @@ 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 +Create styles.css ```css|StylesCss .bg-topo { background-image: url("..."); } ``` -App.razor +Inert the link tag inside App.razor ```html|AppRazor @@ -97,11 +106,11 @@ Here is a small example that shows how we can use inline styles with Blazorise. ``` -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. +All Blazorise components support `Style`, `Class`, and many other attributes. These will get added directly to the underlying HTML element, as we can see from the [BaseComponent.razor](https://github.com/Megabit/Blazorise/blob/master/Source/Blazorise/Base/BaseComponent.cs#L379) ### CSS classes -Applying CSS classes is as straight forward as plain on Blazorise, we just specify the class like so: +Applying CSS classes to Blazorise is as straight forward as plain Blazor - we just supply the class parameter, like so: ```html|BlazoriseCSSExample @@ -110,17 +119,19 @@ Applying CSS classes is as straight forward as plain on Blazorise, we just speci ``` +> Notice that the parameter is spelled in Uppercase, that is because it is a Blazor parameter! + ### Theming -Blazorise has support for themes. Customize Blazorise with your theme. You can change the colors, the typography and much more using themes. +Blazorise has support for themes. You can customize Blazorise with your own theme! 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. +Blazor at the date of posting this blog, has a limitation with CSS isolation, you see, CSS Isolation works by compiling the CSS styles and bundling them up with the Assembly at compile time. -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 `` tag ([location of `` content](https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-8.0#location-of-head-and-body-content)) +CSS isolation occurs at compile 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 `` tag ([location of `` content](https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-8.0#location-of-head-and-body-content)) The following `` element is added by default to an app created from the Blazor project templates: @@ -132,31 +143,46 @@ 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 -
- ... -
+### Let's see an example, of how it works + +Here is an example, of a component that uses CSS isolation and how CSS isolation works. + +This is the `Component.razor` +```html|ComponentRazor +
div one
+div one +``` + +This is the isolated CSS file - `Component.razor.css` +```css|ComponentRazorCss +.foo { + background-color: purple; +} ``` -Then create the scoped CSS file for it +After our project is compiled, the output `{ASSEMBLY NAME}.styles.css` will contain the following CSS: -`TestComponent.razor.css` -```css|TestComponentRazorCss -.isolated-class-name { - /* class info here */ +```css|GeneratedCss +.foo[b-3xxtam6d07] { + background-color: purple; } ``` -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! +And the compiled html for our page will look like this: + +```html|GeneratedHtml +
div one
+div one +``` + +The problem here is that, the bundle is generated at compile time. The b-string will be different from the b-string of Blazorise, + +Because of this, the regular HTML div will be styled correctly, however the Blazorise component, because it has a different b-string, will not. ### 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!!! \ No newline at end of file +Thanks for reading! we expect you in the next blog post! \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor index 77457d7904..3737e2562d 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor @@ -9,11 +9,11 @@ - Hello! today we are going to go over how to style Blazorise components! + Learn how CSS works with Blazor, how to style Blazorise components, and the limitations of CSS isolation in Blazor. - 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. + 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 @@ -26,13 +26,13 @@ - Styling Blazorise components#How does CSS work with Blazorise?|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? + How to style Blazorise components? - Styling Blazorise components#Limitations of CSS Isolation|Limitations of CSS Isolation + Limitations of CSS Isolation @@ -45,7 +45,17 @@ - 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. + Blazorise supports every CSS property that is supported by the browser. There are no special CSS properties that only apply to Blazor or Blazorise. + + + + We can pass any of these attributes to any Blazorise components, and using the magical CaptureUnmatchedValues option, we will capture all the attributes that are not directly caught by our parameters. + + + + + + To read up about this Blazor feature, head over to blazor-university @@ -79,13 +89,13 @@ - create styles.css + Create styles.css - App.razor + Inert the link tag inside App.razor @@ -127,7 +137,7 @@ - As we can see from BaseComponent.customStyle all Blazorise components have support for the Style and Class and many other default attributes. + All Blazorise components support Style, Class, and many other attributes. These will get added directly to the underlying HTML element, as we can see from the BaseComponent.razor @@ -135,17 +145,23 @@ - Applying CSS classes is as straight forward as plain on Blazorise, we just specify the class like so: + Applying CSS classes to Blazorise is as straight forward as plain Blazor - we just supply the class parameter, like so: + +
+ Notice that the parameter is spelled in Uppercase, that is because it is a Blazor parameter! +
+ + Theming - Blazorise has support for themes. Customize Blazorise with your theme. You can change the colors, the typography and much more using themes. + Blazorise has support for themes. You can customize Blazorise with your own theme! Change the colors, the typography and much more using themes. @@ -157,11 +173,11 @@ - 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. + Blazor at the date of posting this blog, has a limitation with CSS isolation, you see, CSS Isolation works by compiling the CSS styles and bundling them up with the Assembly at compile time. - 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 ) + CSS isolation occurs at compile 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 ) @@ -178,36 +194,48 @@ 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 see an example, of how it works + + - Let's create a component in our project, call it TestComponent + Here is an example, of a component that uses CSS isolation and how CSS isolation works. - TestComponent.razor + This is the Component.razor - + - Then create the scoped CSS file for it + This is the isolated CSS file - Component.razor.css + + + + After our project is compiled, the output {ASSEMBLY NAME}.styles.css will contain the following CSS: + + + + - TestComponent.razor.css + And the compiled html for our page will look like this: - + - 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 problem here is that, the bundle is generated at compile time. The b-string will be different from the b-string of Blazorise, + + + + Because of this, the regular HTML div will be styled correctly, however the Blazorise component, because it has a different b-string, will not. @@ -218,8 +246,8 @@ 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!!! - + + Thanks for reading! we expect you in the next blog post! + From 4663352495d9d177e302941bd01884dec4f9457d Mon Sep 17 00:00:00 2001 From: ddjerqq <57017344+ddjerqq@users.noreply.github.com> Date: Sun, 25 Aug 2024 15:28:04 +0400 Subject: [PATCH 3/3] updated blog: style blazorise components updated giorgi.png picture --- .../wwwroot/img/avatars/giorgi.png | Bin 29543 -> 30918 bytes ...StyleBlazoriseComponents_AppRazorCode.html | 0 ...seComponents_BlazorHtmlStylesLinkCode.html | 0 ...iseComponents_BlazoriseCSSExampleCode.html | 0 ...ents_BlazoriseInlineStylesExampleCode.html | 4 +- ...leBlazoriseComponents_InlineClassCode.html | 0 ...riseComponents_IsolationComponentCode.html | 7 + ...Components_IsolationComponentCssCode.html} | 4 +- ...yleBlazoriseComponents_StylesCssCode.html} | 4 +- ...BlazoriseComponents_UseClassesCssCode.html | 2 +- ...oStyleBlazoriseComponents_AppRazor.snippet | 0 ...iseComponents_BlazorHtmlStylesLink.snippet | 0 ...riseComponents_BlazoriseCSSExample.snippet | 0 ...nents_BlazoriseInlineStylesExample.snippet | 6 + ...yleBlazoriseComponents_InlineClass.snippet | 0 ...oriseComponents_IsolationComponent.snippet | 3 + ...seComponents_IsolationComponentCss.snippet | 3 + ...StyleBlazoriseComponents_StylesCss.snippet | 3 + ...eBlazoriseComponents_UseClassesCss.snippet | 3 + .../Index.md | 144 ++++++++++++++ .../Index.razor | 179 ++++++++++++++++++ .../Blazorise.Docs/Pages/Blog/Index.razor | 2 +- 22 files changed, 357 insertions(+), 7 deletions(-) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_AppRazorCode.html (100%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html (100%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html (100%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html (83%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_InlineClassCode.html (100%) create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCode.html rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html => 2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html} (70%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html => 2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html} (68%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html (64%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet (100%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet (100%) rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet (100%) create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet rename Documentation/Blazorise.Docs/Pages/Blog/{2024-07-19_HowToStyleBlazoriseComponents => 2024-08-25_HowToStyleBlazoriseComponents}/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet (100%) create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponent.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponentCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.md create mode 100644 Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.razor diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png index 35d847755fad344a33390f525bbc26a7b4328d80..ebd06ad7b0af0d000190da4db6184c10cd4a2d36 100644 GIT binary patch literal 30918 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 YR%kI^+KG5BgX6%7qdrHfJwnp|2jH=pu>b%7 literal 29543 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 WZ&n!05hT9=0000

 <Alert Color="Color.Success" Visible>
     <AlertMessage>Well done!</AlertMessage>
-    <AlertDescription Style="color:red; font-size:46px">You successfully read this important alert message.</AlertDescription>
+    <AlertDescription Style="color:red; font-size:46px">
+        You successfully read this important alert message.
+    </AlertDescription>
 </Alert>
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html similarity index 100% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCode.html new file mode 100644 index 0000000000..4c63ad7ea5 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCode.html @@ -0,0 +1,7 @@ +
+
+<div>
+    Hello!
+</div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html similarity index 70% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html index 0e52076ecc..055fb8b351 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_Code.html +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html @@ -1,7 +1,7 @@ 
-.foo {
-  background-color: purple;
+div {
+    background-color: blue;
 }
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html similarity index 68% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html index 0e52076ecc..a92b924307 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_ComponentRazorCssCode.html +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html @@ -1,7 +1,7 @@ 
-.foo {
-  background-color: purple;
+.bg-red {
+    background-color: red;
 }
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html similarity index 64% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html index 40f596eef1..5e39c22a2f 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html @@ -1,6 +1,6 @@ 
-<div Class="bg-topo">
+<div class="bg-red">
     ...
 </div>
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet similarity index 100% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet similarity index 100% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet similarity index 100% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet new file mode 100644 index 0000000000..03b345d1a7 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExample.snippet @@ -0,0 +1,6 @@ + + Well done! + + You successfully read this important alert message. + + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet similarity index 100% rename from Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet rename to Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponent.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponent.snippet new file mode 100644 index 0000000000..f8a96daebb --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponent.snippet @@ -0,0 +1,3 @@ +
+ Hello! +
\ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponentCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponentCss.snippet new file mode 100644 index 0000000000..6083263c93 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_IsolationComponentCss.snippet @@ -0,0 +1,3 @@ +div { + background-color: blue; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet new file mode 100644 index 0000000000..f86e0bf236 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_StylesCss.snippet @@ -0,0 +1,3 @@ +.bg-red { + background-color: red; +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet new file mode 100644 index 0000000000..0f3fd32fcd --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_UseClassesCss.snippet @@ -0,0 +1,3 @@ +
+ ... +
\ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.md b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.md new file mode 100644 index 0000000000..dd107d6a48 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.md @@ -0,0 +1,144 @@ +--- +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-08-25/how-to-style-blazorise-components.png +image-title: How to style Blazorise components +author-name: Giorgi +author-image: giorgi +posted-on: Aug 25th, 2024 +read-time: 7 min +--- + +# Styling Blazorise components + +Learn how to use CSS with Blazor, how to style Blazorise components, and the limitations of CSS isolation. + +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](https://blazorise.com/docs/usage/tailwind/) + +You can check out our [quick start](https://blazorise.com/docs/start) guide, to get started with Blazorise. + +--- + +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 supports every CSS property that is supported by the browser. There are no special CSS properties that only apply to Blazor or Blazorise. + +### Inline styling + +Inline CSS styling can be applied to any Blazor element directly. + +```html|InlineClass +
+ Hello from Blazorise! +
+``` + +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 link it inside `App.razor` like so: + +Create styles.css +```css|StylesCss +.bg-red { + background-color: red; +} +``` + +Insert the link tag inside App.razor +```html|AppRazor + + + + + +``` + +After adding this, we can use these classes like usual with our Blazor elements. + +Let's see an example: +```html|UseClassesCss +
+ ... +
+``` + +The class will be applied to our div element, and we will see the background change to red. + +This is pretty much all the basics covered for plain Blazor. + +## How to style Blazorise components + +Styling Blazorise components is really straightforward. + +There are some options on how to go about this: + +### Inline styling + +Here is a small example that shows how we can use inline styles with Blazorise. + +```html|BlazoriseInlineStylesExample + + Well done! + + You successfully read this important alert message. + + +``` + +If we take look at [Blazorise/Base/BaseComponent.razor](https://github.com/Megabit/Blazorise/blob/master/Source/Blazorise/Base/BaseComponent.cs#L379), we can see that all Blazorise components have Class, Style, and other parameters that we can use. Those values will get added directly to the underlying html elements. + +### CSS classes + +Applying CSS classes to Blazorise is as straight forward as plain Blazor - we just supply the class parameter, like so: + +```html|BlazoriseCSSExample + + Well done! + You successfully read this important alert message. + +``` + +> Notice that the parameter is spelled in Uppercase, that is because it is a Blazor parameter! + +### CSS Isolation + +To use CSS isolation, we can create a CSS file with the same name as our Blazor component. + +So if our component here is named `Alert.razor`: +```html|IsolationComponent +
+ Hello! +
+``` + +The scoped CSS file for it would be `Alert.razor.css` + +```css|IsolationComponentCss +div { + background-color: blue; +} +``` + +To link these classes to our HTML document, we should reference out `{ASSEMBLY NAME}.styles.css` in `App.razor` + +```html|BlazorHtmlStylesLink + +``` + +### Theming + +Blazorise has support for themes. You can customize Blazorise with your own theme! Change the colors, the typography and much more using themes. + +Using Blazorise themes, you can easily change the colors of your application programmatically. Rebuild the default stylesheet, customize various aspects of the framework for your particular needs, and much, much more. + +To learn more about theming, head over to the [documentation page](https://blazorise.com/docs/theming) + +Thank you for reading! we expect you in the next blog post! \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.razor new file mode 100644 index 0000000000..4707ed06e6 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Index.razor @@ -0,0 +1,179 @@ +@page "/blog/how-to-style-blazorise-components" + + + + + + + Styling Blazorise components + + + + Learn how to use CSS with Blazor, how to style Blazorise components, and the limitations of CSS isolation. + + + + 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 + + + + You can check out our quick start guide, to get started with Blazorise. + + + + 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 supports every CSS property that is supported by the browser. There are no special CSS properties that only apply to Blazor or Blazorise. + + + + Inline styling + + + + Inline CSS styling can be applied to any Blazor element directly. + + + + + + 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 link it inside App.razor like so: + + + + Create styles.css + + + + + + Insert the link tag inside App.razor + + + + + + After adding this, we can use these classes like usual with our Blazor elements. + + + + Let's see an example: + + + + + + The class will be applied to our div element, and we will see the background change to red. + + + + This is pretty much all the basics covered for plain Blazor. + + + + How to style Blazorise components + + + + Styling Blazorise components is really straightforward. + + + + There are some options on how to go about this: + + + + Inline styling + + + + Here is a small example that shows how we can use inline styles with Blazorise. + + + + + + If we take look at Blazorise/Base/BaseComponent.razor, we can see that all Blazorise components have Class, Style, and other parameters that we can use. Those values will get added directly to the underlying html elements. + + + + CSS classes + + + + Applying CSS classes to Blazorise is as straight forward as plain Blazor - we just supply the class parameter, like so: + + + + + +
+ Notice that the parameter is spelled in Uppercase, that is because it is a Blazor parameter! +
+ + + + CSS Isolation + + + + To use CSS isolation, we can create a CSS file with the same name as our Blazor component. + + + + So if our component here is named Alert.razor: + + + + + + The scoped CSS file for it would be Alert.razor.css + + + + + + To link these classes to our HTML document, we should reference out {ASSEMBLY NAME}.styles.css in App.razor + + + + + + Theming + + + + Blazorise has support for themes. You can customize Blazorise with your own theme! Change the colors, the typography and much more using themes. + + + + Using Blazorise themes, you can easily change the colors of your application programmatically. Rebuild the default stylesheet, customize various aspects of the framework for your particular needs, and much, much more. + + + + To learn more about theming, head over to the documentation page + + + + Thank you for reading! we expect you in the next blog post! + + + diff --git a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor index 9244b3a9b8..96324eaf45 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor +++ b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor @@ -66,7 +66,7 @@ public static List BlogEntries = new List { - new BlogEntry { Category = "How To Guides", Url = "blog/how-to-style-blazorise-components", Text = "How to style Blazorise components", Image = "img/blog/2024-07-19/how-to-style-blazorise-components.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="2024-07-19", ReadTime="7 min" }, + new BlogEntry { Category = "How To Guides", Url = "blog/how-to-style-blazorise-components", Text = "How to style Blazorise components", Image = "img/blog/2024-08-25/how-to-style-blazorise-components.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="2024-08-25", ReadTime="7 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-create-social-media-share-buttons", Text = "How to create social media share buttons with Blazorise", Image = "img/blog/2024-05-17/how-to-create-social-media-share-buttons.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="2024-06-12", ReadTime="5 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-implement-validation-with-captcha", Text = "How to implement validation with captcha", Image = "img/blog/2024-05-08/how-to-implement-validation-with-captcha.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="2024-05-08", ReadTime="5 min", Pinned = true }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-override-fluent-design-tokens", Text = "How to override Fluent design tokens", Image = "img/blog/2024-03-26/how-to-override-fluent-design-tokens.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="2024-03-26", ReadTime="5 min" },