{"id":19165349,"url":"https://github.com/tenoxui/property","last_synced_at":"2025-04-19T21:34:13.946Z","repository":{"id":239111044,"uuid":"798555654","full_name":"tenoxui/property","owner":"tenoxui","description":"tenoxui css framework default properties.","archived":false,"fork":false,"pushed_at":"2024-05-30T13:28:21.000Z","size":56,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-06-02T16:24:38.529Z","etag":null,"topics":["css","css-framework","css-library","css3","framework-css","html","html-css-javascript","html5","javascript","js","library","react","tenoxui","ts","typescript","ui-components","web","web-development","website"],"latest_commit_sha":null,"homepage":"https://tenoxui.github.io/property/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tenoxui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-10T02:34:33.000Z","updated_at":"2024-05-30T13:28:25.000Z","dependencies_parsed_at":"2024-05-19T04:28:23.625Z","dependency_job_id":null,"html_url":"https://github.com/tenoxui/property","commit_stats":null,"previous_names":["tenoxui/property"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenoxui%2Fproperty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenoxui%2Fproperty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenoxui%2Fproperty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tenoxui%2Fproperty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tenoxui","download_url":"https://codeload.github.com/tenoxui/property/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223809148,"owners_count":17206489,"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":["css","css-framework","css-library","css3","framework-css","html","html-css-javascript","html5","javascript","js","library","react","tenoxui","ts","typescript","ui-components","web","web-development","website"],"created_at":"2024-11-09T09:27:31.366Z","updated_at":"2024-11-09T09:27:32.021Z","avatar_url":"https://github.com/tenoxui.png","language":"TypeScript","readme":"# TenoxUI class and properties\n\n## About\n\nThis is a package that contain default property for tenoxui css framework.\n\n## How to Use\n\nInstall :\n\n```sh\nnpm i tenoxui @tenoxui/property --save-dev\n```\n\nUsage :\n\n1. Without default property :\n\nYou need to defjne your type and property manually inside as parameter for tenoxui :\n\n```jsx\nimport { useLayoutEffect } from \"react\";\nimport tenoxui from \"tenoxui\";\n\nconst App = () =\u003e {\n  useLayoutEffect(() =\u003e {\n    // add tenoxui\n    tenoxui({\n      tc: \"color\"\n    }); // defining types and properties one by one as you desire\n  }, []);\n  return \u003ch1 className=\"tc-red\"\u003eHello World!\u003c/h1\u003e;\n};\n\nexport default App;\n```\n\n2. With `@tenoxui/property` :\n\nOr, just simply use tenoxui default property and you don't need to manually added it inside your project :\n\n```jsx\nimport { useLayoutEffect } from \"react\";\nimport tenoxui from \"tenoxui\";\nimport property from \"@tenoxui/property\";\n\nconst App = () =\u003e {\n  useLayoutEffect(() =\u003e {\n    // add tenoxui\n    tenoxui(property); // use default property\n  }, []);\n  return \u003ch1 className=\"tc-red\"\u003eHello World!\u003c/h1\u003e;\n};\n\nexport default App;\n```\n\n## Breakdown\n\nWhat's inside `@tenoxui/property`? This package contain all class and property that user can use as default class styler for tenoxui. And this is what's it looks like :\n\n```js\nconst property = {\n  p: \"padding\",\n  m: \"margin\",\n  tc: \"color\",\n  bg: \"background\",\n  // more properties\n};\n```\n\nAnd this is basically same as define each types and properties inside of `tenoxui` function as its parameter :\n\n```js\ntenoxui({\n  p: \"padding\",\n  tc: \"color\",\n  // more properties\n});\n```\n\nOr, same as `defineProps` function on `v0.8.0` below :\n\n```js\ndefineProps({\n  p: \"padding\",\n  tc: \"color\",\n  // more properties\n});\n```\n\nBut, `defineProps` function is deprecated from `v0.9.0+` and to add new types and properties, you can directly add it inside `tenoxui` function.\n\n## Closing\n\nAnd that's all, its just a collection of types and properties.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenoxui%2Fproperty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftenoxui%2Fproperty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenoxui%2Fproperty/lists"}