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.

components/example.elo

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.

elodin.config.js

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

elodin

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

--watch

.

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
```

Button.elo.js: Contains a
```
Button
```
function that returns the class name

Label.elo.css: Contains all static styles defined in
```
Label
```

Label.elo.js: Contains a
```
Label
```
function that returns the class name

example.elo.js: Exports all style functions, in this case
```
Button
```
and
```
Label
```