{"id":18763877,"url":"https://github.com/git-marcopitra/stylin.js","last_synced_at":"2025-10-11T14:09:13.262Z","repository":{"id":65681661,"uuid":"597222997","full_name":"git-marcopitra/stylin.js","owner":"git-marcopitra","description":"Stylin.js is a Javascript library to provide \"all\" css attributes builtin under component/element.","archived":false,"fork":false,"pushed_at":"2024-10-12T08:43:25.000Z","size":3730,"stargazers_count":15,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-30T20:22:04.921Z","etag":null,"topics":["builtin","react","reactjs","typescript","vanilla-css"],"latest_commit_sha":null,"homepage":"https://git-marcopitra.github.io/stylin.js","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/git-marcopitra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-03T22:46:08.000Z","updated_at":"2025-04-09T10:24:02.000Z","dependencies_parsed_at":"2023-06-28T14:32:42.716Z","dependency_job_id":"e9a70c01-168a-4c8b-9d7f-3038bbdde9a8","html_url":"https://github.com/git-marcopitra/stylin.js","commit_stats":{"total_commits":29,"total_committers":2,"mean_commits":14.5,"dds":"0.31034482758620685","last_synced_commit":"d7fac3f37e4e9f1701a320d9f576b880c30f1c7e"},"previous_names":["git-marcopitra/stylin"],"tags_count":95,"template":false,"template_full_name":null,"purl":"pkg:github/git-marcopitra/stylin.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-marcopitra%2Fstylin.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-marcopitra%2Fstylin.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-marcopitra%2Fstylin.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-marcopitra%2Fstylin.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/git-marcopitra","download_url":"https://codeload.github.com/git-marcopitra/stylin.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-marcopitra%2Fstylin.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007489,"owners_count":26084313,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["builtin","react","reactjs","typescript","vanilla-css"],"created_at":"2024-11-07T18:27:47.967Z","updated_at":"2025-10-11T14:09:13.245Z","avatar_url":"https://github.com/git-marcopitra.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylin.js\n\n![Stylin Logo](./public/logo.png)\n\nStylin.js is an style ecosystem to provide the most easy and productive way to style your elements and components in the most of frontend technologies, providing a full \"no-tab-change\" styling experience.\n\n## Introduction\n\n- [Stylina `@stylin.js/stylina`](packages/stylina): Stylin.js for Vanilla - directly to your html element.\n- [STYLIN.JS for React `@stylin.js/react`](packages/react): Stylin.js for React - allows you to create stylin components.\n- [STYLIN.JS core `@stylin.js/core`](packages/core): Stylin.js core - modular functions and logics.\n\n## Stylina\n\n### Installing: @stylin.js/stylina\n\nYou just need to add the cdn (`https://unpkg.com/@stylin.js/stylina@\u003cversion\u003e`) to your `script` tag with `type=\"module\"`\n\n### Usage: @stylin.js/stylina\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  ...\n  \u003cbody in-margin=\"0\" in-padding=\"0\" in-overflow-x=\"hidden\"\u003e\n    \u003ch1 in-color=\"blue\" in-background-color=\"red\"\u003e\n      hello \u003cstrong in-color=\"green\"\u003eworld\u003c/strong\u003e\n    \u003c/h1\u003e\n  \u003c/body\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://unpkg.com/@stylin.js/stylina@\u003cversion\u003e\"\n  \u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n\n[See more here](/packages/stylina)\n\n## STYLIN.JS for React\n\n### Installing: @stylin.js/react\n\nTo install the package you must have installed [node](https://nodejs.org/en/) and npm/yarn\n\n```sh\n# npm\nnpm install @stylin.js/react\n\n# yarn\nyarn add @stylin.js/react\n```\n\n### Usage: @stylin.js/react\n\nIt's too simple to use React _StylinComponents_, see what I mean:\n\n```jsx\nimport stylin from '@stylin.js/react';\nimport React from 'react';\n\nconst StylinDiv = stylin('div')();\n\nconst Home = () =\u003e (\n  \u003cStylinDiv\n    // all your JSX Styles here\n    padding=\"2rem\"\n    background=\"#f55\"\n    borderRadius=\"1rem\"\n    nHover={{\n      textAlign: 'right',\n    }}\n  \u003e\n    Hello World\n  \u003c/StylinDiv\u003e\n);\n```\n\n[See more here](/packages/react)\n\n## STYLIN Elements\n\n### Installing: @stylin.js/elements\n\nTo install the package you must have installed [node](https://nodejs.org/en/) and npm/yarn\n\n```sh\n# npm\nnpm install @stylin.js/elements\n\n# yarn\nyarn add @stylin.js/elements\n```\n\n### Usage: @stylin.js/elements\n\nIt's too simple to use React _StylinComponents_, see what I mean:\n\n```jsx\nimport { Div } from '@stylin.js/elements';\nimport React from 'react';\n\nconst Home = () =\u003e (\n  \u003cDiv\n    // all your JSX Styles here\n    padding=\"2rem\"\n    background=\"#f55\"\n    borderRadius=\"1rem\"\n    nHover={{\n      textAlign: 'right',\n    }}\n  \u003e\n    Hello World\n  \u003c/Div\u003e\n);\n```\n\n[See more here](/packages/elements)\n\n## Contributing\n\nTo contribute check the [CONTRIBUTING.md](/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgit-marcopitra%2Fstylin.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgit-marcopitra%2Fstylin.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgit-marcopitra%2Fstylin.js/lists"}