codebeamorg / bcss

Revolutionary Runtime CSS Generator for Blazor

BCSS

Revolutionary Runtime CSS Generator for Blazor

Installation

1. Install CodeBeam.BCSS Nuget package

dotnet add package CodeBeam.BCSS

2. Add the following to _Imports.razor

@using BCSS

3. Add the following to your HTML body section, it's either index.html or _Layout.cshtml/_Host.cshtml depending on whether you're running Server-Side or WASM.

<script src="_content/CodeBeam.BCSS/Bcss.min.js"></script>

4. Add the following to the relevant sections of Program.cs

using Bcss.Services;
builder.Services.AddBcss();

5. Add the following toApp.razor

<BlazorCssProvider />

6. Inject the service and place the component in the page that you want to use BCSS

@inject BcssService Bc

Usage

Add the BCSS class into a class

<div class="@Bc["w-200 h-100 r-20"]" />
//This line adds width: 200px height: 100px and border-radius: 20

Related Links

• Docs - bcss.codebeam.org
• Playground
• Showcase
• QuickDebug
• Benchmark

bcss's Issues

add colors value

add color values like tailwind css
for example : bg-blue-600
and a file to config the colors like to config primary color and blue color like tailwind css one
for example:-
blue :{50:#EBF5FF,100:#E1EFFE,200:#C3DDFD, .... 900:#233876}, primary :{50:#EBF5FF,100:#E1EFFE,200:#C3DDFD, .... 900:#233876}

add support RTL

add support RTL

add gradient coloring

add gradient coloring like tailwind css
for example : bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700

add support dark and light mode

add support dark and light mode with mudblazor I mean detect the dark mode from mudblazor theme provider