https://github.com/hassanhabib/sharpstyles
C# .NET Library to Serialize C# objects into CSS Rules
https://github.com/hassanhabib/sharpstyles
Last synced: about 1 month ago
JSON representation
C# .NET Library to Serialize C# objects into CSS Rules
- Host: GitHub
- URL: https://github.com/hassanhabib/sharpstyles
- Owner: hassanhabib
- License: mit
- Created: 2022-06-20T07:44:14.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-10T19:10:31.000Z (9 months ago)
- Last Synced: 2024-09-10T21:44:25.716Z (9 months ago)
- Language: C#
- Size: 69.3 KB
- Stars: 39
- Watchers: 5
- Forks: 9
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# SharpStyles
TDD-able Styles for Blazor
This library offers the capability to write CSS rules in C#.
This capability allows C#.NET developers especially for Blazor applications to test-drive the CSS rules in their components effectively.
## How to Use
To use SharpStyles; all you need to do is to inherit the `SharpStyles` model to your local Component Style models as follows:
### Setup
```csharp
public class MyComponentStyle: SharpStyle
{
[CssElement]
public SharpStyle Td {get; set;}
[CssClass]
public SharpStyle PrimaryButton {get; set;}
[CssId]
public SharpStyle SubmitButton {get; set;}
}
```
Now you can use `MyComponentStyle` as follows:
```csharp
var myComponentStyle = new MyComponentStyle
{
Td = new SharpStyle
{
BackgroundColor = "red"
},
PrimaryButton = new SharpStyle
{
BackgroundColor = "blue",
Color = "white"
},
SubmitButton = new SharpStyle
{
Width = "12px"
}
}
```
You can now use this object `myComponentStyle` to generate CSS rules for your Blazor component just as follows:
```csharp
myComponentStyle.ToCss();
```
This code will generate the following rules:
```css
td {
background-color: "red";
}
.primary-button {
background-color: "blue";
color: "white";
}
#submit-button {
width: "12px";
}
```
You can also customize your selectors as follows:
```csharp
public class MyComponentStyle: SharpStyle
{
[CssElement(Selector="my-custom-td")]
public SharpStyle Td {get; set;}
[CssClass(Selector=".my-custom-primary-button")]
public SharpStyle PrimaryButton {get; set;}
[CssId(Selector="#my-custom-submit-button")]
public SharpStyle SubmitButton {get; set;}
}
```
which will produce the following CSS:
```css
my-custom-td {
background-color: "red";
}
.my-custom-primary-button {
background-color: "blue";
color: "white";
}
#my-custom-submit-button {
width: "12px";
}
```
here's a video introduction to this library:
[](https://www.youtube.com/watch?v=06chSzVeuls)
If you have any suggestions, comments or questions, please feel free to contact me on:
Twitter: @hassanrezkhabib
LinkedIn: hassanrezkhabib
E-Mail: [email protected]