Getting Started

Getting Started

With the CLI installed, we can start writing styles.
Let's create some styles in a example.elo file.
Check the Styles section for all available properties.


style Button {
paddingLeft: 10
paddingRight: 10
backgroundColor: blue
fontSize: 18
lineHeight: 1.2
color: white
style Label {
fontSize: 14
color: red

Configure Elodin

In order to compile this style, we need to pass a list of sources and configure a generator which generates target-specific files. Check the Targets section to find the right generator for your job. Each generator accepts different configuration options.

The simplest way to add an Elodin configuration is by creating a elodin.config.js file at the root of your project.


// For this example, we'll use the JavaScript CSS generator
// you'll have to install your prefered generator as well e.g. yarn add @elodin/generator-javascript-css
var { createGenerator } = require('@elodin/generator-javascript-css')
module.exports = {
sources ["components"],
generator: createGenerator(),

Note: For other configuration options, please check out Configuration.

Compiling Files

Now that we have a generator configured, we can run the CLI to generate our output files.


Note: Also check the CLI Options for other useful options such as


Congratulations! You just compiled your first Elodin files.
The generator has created the following files:

  • Button.elo.css: Contains all static styles defined in
  • Button.elo.js: Contains a
    function that returns the class name
  • Label.elo.css: Contains all static styles defined in
  • Label.elo.js: Contains a
    function that returns the class name
  • example.elo.js: Exports all style functions, in this case