chanan / blazorous Goto Github PK

View Code? Open in Web Editor NEW

47.0 47.0 3.0 2.72 MB

Maintainable CSS with Blazor

Home Page: https://chanan.github.io/Blazorous/

License: The Unlicense

C# 19.29% CSS 0.87% HTML 41.49% JavaScript 38.35%

blazor css glamor glamorous

blazorous's People

Contributors

Stargazers

Watchers

Forkers

robertomalatesta qcjxberin cojegede

blazorous's Issues

Append an array of rules

Add to the API a way to append multiple rules at once. Something like:

css.AddRules("font-size", "2.4em", "margin-top", 10);

Consider using Cascading values and parameters from Blazor v0.7.0 for themes

Add debug attribute to Dynamic

<Dynamic TagName="div" debug="true" />

Will output debug information to the console

Allow setting a class name

From Glamorous:

const Alert = glamorous.div('alert', props => `alert-${props.type}`);

This will result in:

<div class="alert alert-danger">...</div>

Merging styles does not work

The following does not work correctly:

Css secondPre = Css.CreateNew()
        .AddRule("position", "relative")
        .AddRule("padding", 20)
        .OpenSelector(":before")
            .AddRule("position", "absolute")
            .AddRule("top", 0)
            .AddRule("opacity", 0.6)
            .AddRule("left", "7px")
            .AddRule("font-size", "0.8rem")
        .CloseSelector()
        .AddDynamicRule((css, attributes) =>
        {
            var lang = attributes.GetStringAttribute("language");
            var isHtml = "html" == lang;
            css.OpenSelector(":before")
                .AddRule("content", $"\\\"{lang}\\\"")
            .CloseSelector();
            if (isHtml)
            {
                css.AddRule("background-color", "#0c1e35")
                    .AddRule("color", "white");
            }
        });

When converted to json, :before isn't merged, its overwritten.

Strings in json not working

From: https://glamorous.rocks/getting-started/

The following does not work in Blazorous:

const ListItem = glamorous.li({
  ':before': {
    content: '"💎"',
  }
})

The error:

MonoPlatform.ts:70 Uncaught (in promise) Error: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: Unexpected token * in JSON at position 26
SyntaxError: Unexpected token 💎 in JSON at position 26
    at JSON.parse (<anonymous>)

Integrate Css object more closely with themes

Add to Css API something like:

  ICss css = Css.CreateNew().ApplyThemeSnippet("Some snippet name");
  ICss css2 = Css.CreateNew().AddRule("Color" "{Some var name}");

Expose the ref of the html element from Dynamic

<Dynamic TagName="div" ref="divRef" />

The above does not currently work right.

Add keyframes function

https://github.com/threepointone/glamor/blob/master/docs/api.md#csskeyframestimeline

Support speedy mode

From glamor readme:

there are two methods by which the library adds styles to the document -

by appending css 'rules' to a browser backed stylesheet. This is really fast, but has the disadvantage of making the styles uneditable in the devtools sidebar.
by appending text nodes to a style tag. This is fairly slow, but doesn't have the editing drawback.

as a compromise, we enable the former 'speedy' mode NODE_ENV=production, and disable it otherwise. You can manually toggle this with the speedy() function.

Provide a way to add shorthand css attributes

Example from Glamorous:

<glamorous.Div maxWidth={600} margin="70px auto" fontSize={24} />

Convert "Unknown" attributes that match css properties to a css style.

So this:

<Dynamic TagName="div" maxWidth="600" margin="70px auto" fontSize="24" />

Should be equivalent to:

<Dynamic TagName="div"css="@css" />

@functions {
   Css css = Css.CreateNew().AddRule("max-width", 600).AddRule("margin", "70px auto").AddRule("font-size", 24);
}

ThemeProvider, Theme, ThemeChooser

Provide a way to allow for themes and context,

Would require to register a class in DI?

Due to the fact that Glamorous has been deprecated, I am deprecating Blazorous as well. However, I wrote a new library that does not rely on any JS framework that has similar functionality although a different API: https://chanan.github.io/BlazorStyled/ (https://github.com/chanan/BlazorStyled).

Add fontface function

https://github.com/threepointone/glamor/blob/master/docs/api.md#cssfontfacefont

Add pseudo selectors to Dynamic

Consider adding something like so:

<Dynamic TagName="a" hover="@hover">Link with a red hover</Dynamic>

ICss hover = Css.CreateNew().AddRule("color", "red");

Breaking change: refactor child selectors to use Action<Css> Like other actions such as font-face

deprecate OpenSelector, CloseSelector

Change to use AddChildSelector(string name, Action<Css> css)

Add a library of pre made components?

Consider making a library of pre made components for each html tag such as:

<Dynamic TagName="h1" ...>@ChildContent</Dynamic>

Give it a standard name such as BlazorousH1 that can then be used in the site:

<BlazorousH1>Heading 1</BlazorousH1>

The heading can then be styled like other Dynamic tags either with the css prop or if css style attributes are implemented.

Consider integration with polished

https://polished.js.org/