https://github.com/robinweser/elodin

The Elodin Styling Language
https://github.com/robinweser/elodin

design design-system language style-dictionary style-guide styling

Last synced: about 1 month ago
JSON representation

The Elodin Styling Language

• Host: GitHub
• URL: https://github.com/robinweser/elodin
• Owner: robinweser
• License: mit
• Created: 2019-01-11T07:45:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-03T09:39:56.000Z (over 3 years ago)
• Last Synced: 2024-05-02T00:01:25.120Z (2 months ago)
• Topics: design, design-system, language, style-dictionary, style-guide, styling
• Language: JavaScript
• Homepage: http://elodin-lang.org
• Size: 2.65 MB
• Stars: 30
• Watchers: 3
• Forks: 2
• Open Issues: 13
• 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

Lists

• awesome-stars - elodin

README

        


> **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.

Elodin is a small styling language that aims to provide a universal way to author user interface styles.

- **Component-based**:
Elodin 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.

- **Quick learning-curve**:
The 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.

- **Write once, use everywhere**:
Elodin 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!

- **Type-safe properties**:
The compiler will validate every property-value pair and throw on invalid rules resulting in solid code and bulletproof output. If it compiles, it works!

  

## The Gist

```

variant Mode {

  Dark

  Light

}

style Button {

  justifyContent: center

  alignItems: flexEnd

  paddingBottom: 10

  paddingTop: 10

  fontSize: 15

  color: rgb(255 0 255)

  [Mode=Dark] {

    backgroundColor: black

  }

  [Mode=Light] {

    backgroundColor: white

  }

}

style Label {

  fontSize: 10

  color: grey

}

```

## Documentation

- [Into](https://elodin.dev/docs/intro/what-why)

- [Setup](https://elodin.dev/docs/setup/installation)

- [Language](https://elodin.dev/docs/language/styles)

- [Targets](https://elodin.dev/docs/targets/overview)

- [Plugins](https://elodin.dev/docs/plugins/color)

- [Advanced](https://elodin.dev/docs/advanced/specification)

- [API Reference](https://elodin.dev/docs/api/CLI)

- [Extra](https://elodin.dev/docs/extra/examples)

## Examples

- Web

  - [React](examples/react)

  - [Reason](examples/reason)

- Mobile

  - React Native (tbd)

## Tooling

- [VS Code Language Plugin](https://marketplace.visualstudio.com/items?itemName=robinweser.language-elodin)

- [Prettier Plugin](../packages/pretter-plugin-elodin)

## Contributing

Feel free to ask questions and give feedback on [Spectrum](https://spectrum.chat/elodin).


For more information follow the [contribution guide](.github/CONTRIBUTING.md).


Also, please read our [code of conduct](.github/CODE_OF_CONDUCT.md).

## License

Elodin is licensed under the [MIT License](http://opensource.org/licenses/MIT).


Documentation is licensed under [Creative Commons License](http://creativecommons.org/licenses/by/4.0/).


Created with ♥ by [Robin Weser](http://weser.io).