diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png index 35d847755f..ebd06ad7b0 100644 Binary files a/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png and b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png differ 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_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_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/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/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_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_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/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..c53e6813c5 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.md @@ -0,0 +1,188 @@ +--- +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 + +Learn how CSS works with Blazor, how to style Blazorise components, and the limitations of CSS isolation in Blazor. + +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: + +- How does CSS work with Blazorise? +- How to style Blazorise components? +- 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 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) + +### 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("..."); +} +``` + +Inert the link tag inside 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. + +``` + +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 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! + +### Theming + +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 + +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 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: + +```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. + +### Let me illustrate this limitation with an example. + + +### 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; +} +``` + +After our project is compiled, the output `{ASSEMBLY NAME}.styles.css` will contain the following CSS: + +```css|GeneratedCss +.foo[b-3xxtam6d07] { + background-color: purple; +} +``` + +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! 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 new file mode 100644 index 0000000000..3737e2562d --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-07-19_HowToStyleBlazoriseComponents/Index.razor @@ -0,0 +1,253 @@ +@page "/blog/how-to-style-blazorise-components" + + + + + + + Styling Blazorise components + + + + Learn how CSS works with Blazor, how to style Blazorise components, and the limitations of CSS isolation in Blazor. + + + + Blazorise is an amazing component library that, is not really tied to any front-end framework. This means we have a lot of options when it comes to choosing which framework we want to use, for example: Bootstrap, Tailwind, Material and many others. check out the full list here + + + + Check out the quick start guide here to get started with Blazorise. + + + + In this article, we will go over the following: + + + + + How does CSS work with Blazorise? + + + How to style Blazorise components? + + + 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 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 + + + + 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 + + + + + + Inert the link tag inside 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. + + + + + + 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 + + + + 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! +
+ + + + Theming + + + + 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 + + + + Limitations of CSS Isolation + + + + 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 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 ) + + + + 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. + + + + Let me illustrate this limitation with an example. + + + + 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 + + + + + + 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: + + + + + + And the compiled html for our page will look like this: + + + + + + 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! we expect you in the next blog post! + + + diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_AppRazorCode.html new file mode 100644 index 0000000000..a2369fc95a --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazorHtmlStylesLinkCode.html new file mode 100644 index 0000000000..792cc33b7f --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseCSSExampleCode.html new file mode 100644 index 0000000000..dd0bb47f9c --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html new file mode 100644 index 0000000000..b4a1df1848 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_BlazoriseInlineStylesExampleCode.html @@ -0,0 +1,10 @@ +
+
+<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-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_InlineClassCode.html new file mode 100644 index 0000000000..827ea7e4ae --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-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-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html new file mode 100644 index 0000000000..055fb8b351 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_IsolationComponentCssCode.html @@ -0,0 +1,7 @@ +
+
+div {
+    background-color: blue;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html new file mode 100644 index 0000000000..a92b924307 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_StylesCssCode.html @@ -0,0 +1,7 @@ +
+
+.bg-red {
+    background-color: red;
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html new file mode 100644 index 0000000000..5e39c22a2f --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Code/HowToStyleBlazoriseComponents_UseClassesCssCode.html @@ -0,0 +1,7 @@ +
+
+<div class="bg-red">
+    ...
+</div>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet new file mode 100644 index 0000000000..58072a56f9 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_AppRazor.snippet @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet new file mode 100644 index 0000000000..28395bccb9 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazorHtmlStylesLink.snippet @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_BlazoriseCSSExample.snippet new file mode 100644 index 0000000000..d087169d72 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-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-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_HowToStyleBlazoriseComponents/Examples/HowToStyleBlazoriseComponents_InlineClass.snippet new file mode 100644 index 0000000000..c4226e24d3 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-08-25_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-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 115d1295b8..96324eaf45 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor +++ b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor @@ -66,6 +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-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" },