{"id":24491449,"url":"https://github.com/tomlm/blazorcss","last_synced_at":"2025-04-14T00:21:41.893Z","repository":{"id":98758122,"uuid":"237335544","full_name":"tomlm/BlazorCss","owner":"tomlm","description":"Blazor Component to create data bound CSS rules","archived":false,"fork":false,"pushed_at":"2020-01-31T01:45:11.000Z","size":377,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T21:36:23.299Z","etag":null,"topics":["blazor","css"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomlm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-01-31T00:53:52.000Z","updated_at":"2022-06-29T04:56:36.000Z","dependencies_parsed_at":"2023-06-08T08:15:42.610Z","dependency_job_id":null,"html_url":"https://github.com/tomlm/BlazorCss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomlm%2FBlazorCss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomlm%2FBlazorCss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomlm%2FBlazorCss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomlm%2FBlazorCss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomlm","download_url":"https://codeload.github.com/tomlm/BlazorCss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248800046,"owners_count":21163404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","css"],"created_at":"2025-01-21T18:18:12.524Z","updated_at":"2025-04-14T00:21:41.851Z","avatar_url":"https://github.com/tomlm.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/tomlm/BlazorCss/raw/master/icon256.png\"/\u003e\n\u003c/p\u003e\n\n# BlazorCss\nThis is a Blazor Library which adds data bound style rules to the BlazorStyled library (see https://blazorstyled.io/) \n\nWith this library you get\n* Component for defining a rule\n* CSS properties are autocompleted\n* Constants are available for auto completion\n\n![alt text](https://github.com/tomlm/BlazorCss/raw/master/NameCompletion.png)\n![alt text](https://github.com/tomlm/BlazorCss/raw/master/ValueCompletion.png)\n\n\n## Installation\n```\ndotnet add package BlazorCss \n```\n\n## Usage\nThere are 2 ways to use it, as a way to define the properties of the Styled component it is in, or as a way to define\na specific selector and the style properties of the selector.\n\n### Root level rule\nAs a root level rule.  All attributes on the rule apply to the class name of the Styled tag\n\n```html\n\u003cStyled @bind-ClassName=\"@foo\"\u003e\n    \u003cRule background=\"@Colors.Pink\"\n          display=\"@Display.Grid\"\n          height=\"300px\" /\u003e\n\u003c/Styled\u003e\n```\n\nThis generates:\n```css\n  .foo {\n    background: Pink;\n    display: grid;\n    height: 300px;\n  }\n```\n\n### Selector based rule\nIf you use the Selector attribute you can define a selector for the attributes.\n\n```html\n\u003cStyled\u003e\n    \u003cRule Selector=\"#blat\"\n          display=\"grid\"\n          align_content=\"@AlignContent.SpaceAround\"\n          background=\"yellow\" /\u003e\n\u003c/Styled\u003e\n```\n\nIn this case it generates a CSS selector rule for the element with Id **blat**:\n```css\n  #blat {\n    display: grid;\n    background: yello;\n    align-content: space-around;\n  }\n```\nAny valid CSS selector can be put into the Selector property, such as \n* *div \u003e a*\n* *.foo,.bar*\n* etc.\n\n\u003e NOTE: Backing properties in C# can't have a dash in the name, so the attributes with dash are represented with underscore.\n\u003e align_content ==\u003e align-content in the css\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomlm%2Fblazorcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomlm%2Fblazorcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomlm%2Fblazorcss/lists"}