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.
To use SharpStyles; all you need to do is to inherit the SharpStyles
model to your local Component Style models as follows:
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:
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:
myComponentStyle.ToCss();
This code will generate the following rules:
td {
background-color: "red";
}
.primary-button {
background-color: "blue";
color: "white";
}
#submit-button {
width: "12px";
}
You can also customize your selectors as follows:
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:
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:
If you have any suggestions, comments or questions, please feel free to contact me on:
Twitter: @hassanrezkhabib
LinkedIn: hassanrezkhabib
E-Mail: hassanhabib@live.com