{"id":13393468,"url":"https://github.com/robinweser/elodin","last_synced_at":"2025-04-28T16:12:27.585Z","repository":{"id":56510313,"uuid":"165201461","full_name":"robinweser/elodin","owner":"robinweser","description":"The Elodin Styling Language","archived":false,"fork":false,"pushed_at":"2020-11-03T09:39:56.000Z","size":2776,"stargazers_count":30,"open_issues_count":13,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T05:48:20.816Z","etag":null,"topics":["design","design-system","language","style-dictionary","style-guide","styling"],"latest_commit_sha":null,"homepage":"http://elodin-lang.org","language":"JavaScript","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/robinweser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["robinweser"]}},"created_at":"2019-01-11T07:45:44.000Z","updated_at":"2023-02-14T15:23:38.000Z","dependencies_parsed_at":"2022-08-15T20:10:18.582Z","dependency_job_id":null,"html_url":"https://github.com/robinweser/elodin","commit_stats":null,"previous_names":["rofrischmann/elodin"],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Felodin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Felodin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Felodin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Felodin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinweser","download_url":"https://codeload.github.com/robinweser/elodin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251260504,"owners_count":21560792,"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":["design","design-system","language","style-dictionary","style-guide","styling"],"created_at":"2024-07-30T17:00:53.586Z","updated_at":"2025-04-28T16:12:27.569Z","avatar_url":"https://github.com/robinweser.png","language":"JavaScript","funding_links":["https://github.com/sponsors/robinweser"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg alt=\"Elodin\" src=\"website/public/wordmark.svg\" width=\"250\"/\u003e\n\n\u003e **Warning**: Elodin is still WIP and experimental. It is not recommended to use it in production yet. There might be unknown bugs and the APIs might change rapidly.\n\nElodin is a small styling language that aims to provide a universal way to author user interface styles.\n\n- **Component-based**:\u003cbr\u003eElodin styles are authored on component-base and fully encapsulated from other styles accounting for predictable styling without side-effects. It also enables automatic code-splitting where each component is rendered to a new file.\n- **Quick learning-curve**:\u003cbr\u003eThe syntax is a mix of CSS and JavaScript with some concepts from ReasonML and thus already familiar to many developers. It is declarative and unlike CSS only supports **one** value per property.\n- **Write once, use everywhere**:\u003cbr\u003eElodin compiles to a variety of different languages, platforms and libraries without having to change a single line. It's truly one file for all targets!\n- **Type-safe properties**:\u003cbr\u003eThe compiler will validate every property-value pair and throw on invalid rules resulting in solid code and bulletproof output. If it compiles, it works!\n\n\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\"\u003e\u003c/a\u003e \u003ca href=\"https://spectrum.chat/elodin\"\u003e\u003cimg alt=\"Spectrum\" src=\"https://img.shields.io/badge/support-spectrum-brightgreen.svg\"\u003e\u003c/a\u003e \u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/@elodin/core.svg\"\u003e\n\n## The Gist\n\n```\nvariant Mode {\n  Dark\n  Light\n}\n\nstyle Button {\n  justifyContent: center\n  alignItems: flexEnd\n  paddingBottom: 10\n  paddingTop: 10\n  fontSize: 15\n  color: rgb(255 0 255)\n\n  [Mode=Dark] {\n    backgroundColor: black\n  }\n\n  [Mode=Light] {\n    backgroundColor: white\n  }\n}\n\nstyle Label {\n  fontSize: 10\n  color: grey\n}\n```\n\n## Documentation\n\n- [Into](https://elodin.dev/docs/intro/what-why)\n- [Setup](https://elodin.dev/docs/setup/installation)\n- [Language](https://elodin.dev/docs/language/styles)\n- [Targets](https://elodin.dev/docs/targets/overview)\n- [Plugins](https://elodin.dev/docs/plugins/color)\n- [Advanced](https://elodin.dev/docs/advanced/specification)\n- [API Reference](https://elodin.dev/docs/api/CLI)\n- [Extra](https://elodin.dev/docs/extra/examples)\n\n## Examples\n\n- Web\n  - [React](examples/react)\n  - [Reason](examples/reason)\n- Mobile\n  - React Native (tbd)\n\n## Tooling\n\n- [VS Code Language Plugin](https://marketplace.visualstudio.com/items?itemName=robinweser.language-elodin)\n- [Prettier Plugin](../packages/pretter-plugin-elodin)\n\n## Contributing\n\nFeel free to ask questions and give feedback on [Spectrum](https://spectrum.chat/elodin).\u003cbr\u003e\nFor more information follow the [contribution guide](.github/CONTRIBUTING.md).\u003cbr\u003e\nAlso, please read our [code of conduct](.github/CODE_OF_CONDUCT.md).\n\n## License\n\nElodin is licensed under the [MIT License](http://opensource.org/licenses/MIT).\u003cbr\u003e\nDocumentation is licensed under [Creative Commons License](http://creativecommons.org/licenses/by/4.0/).\u003cbr\u003e\nCreated with ♥ by [Robin Weser](http://weser.io).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Felodin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinweser%2Felodin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Felodin/lists"}