diff --git a/README.md b/README.md index 8f2d4fe..099c4ea 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,10 @@ We can add it from **nuget**, or directly referencing **BlazorStylesheet.dll** Open `nuget` package manager in **visual studio** and paste the following code. +```csharp +Install-Package BlazorStylesheet -Version 1.0.0 +``` + 1. After installation done, open the file **Program.cs** or **Startup.cs** or **MauiProgram.cs** in your blazor project. **Add the following code** @@ -42,7 +46,7 @@ Open `nuget` package manager in **visual studio** and paste the following code. 3. Now open **_Layout.cshtml** in **blazor server** which you can find it under **Shared** folder, or **index.html** in **blazor webassembly** and **MAUI** which you can find it under **wwwroot** folder. - **Add the following html tags in the ... before any script or styles.** + **Add the following html tags in the head before any script or styles.** ```html @@ -77,7 +81,7 @@ Open `nuget` package manager in **visual studio** and paste the following code. in our **MainLayout.razor**, let's inject the **main stylesheet** and call it `sheet`. Then we can use `sheet` property to write our CSS. You can do this in every component you want to access the **main stylesheet**. -Now copy the following code and paste in **MainLayout.razor**. +Now copy the following code and paste in **MainLayout.razor** C# code. ```csharp [Inject] @@ -169,7 +173,7 @@ Well, lets add a method and name it `Setup` and decorate it with `[StylesheetMet [StylesheetMethod] private void Setup() { - + } ``` @@ -270,8 +274,6 @@ Now build your application and refresh the browser. Your website body should be > > ![image](https://imgur.com/ZratGZV.png) - - ##### If everything is going right, let's write the CSS for our `Navbar.razor` Although you can write your CSS in anyway you like, but it is good idea to categorize them in methods. That is what we will do here. @@ -422,14 +424,10 @@ Here, I haven't covered a full tutorial on how to write CSS in C# using **Blazor **Repository**: https://github.com/AbdisamadMoh/Stylesheet.NET - - ##### When and how to write CSS in components? With **BlazorStylesheet**, we have the freedom to write our CSS anywhere in our Blazor project. This is handy for keeping styles specific to a particular component and updating our CSS in realtime. But remember, for bigger styles or styles used across your whole application, it's generally better to organize them in separate C# classes. This makes your code easier to manage. - - Unlike classes, which we can access the **main stylesheet** through attribute decoration which the injection is managed by the **BlazorStylesheet** itself. In **components**, we can access the **main stylesheet** through injection provided by the **Dependency Injection (DI)** container provided by .NET. In your components use `@Inject`. Put it top of your **razor** file. @@ -458,8 +456,6 @@ In **components** or other places where **BlazorStylesheet** doesn't manage, you > You don't need to call `StateHasChanged()` as that has no effect on **BlazorStylesheet**. - - ### Why we need... #### `loading="loader"` attribute in our `` and `fix.css`? @@ -490,8 +486,6 @@ Both solutions lies in `fix.css` file you added. > **BlazorStylesheet** does not add any element to the DOM to create the loader. So you should not worry about your DOM being modified. - - ## More... This library uses **Stylesheet.NET** which you can find the repository below