rofrischmann/elodin

import DocLayout from '../../../components/DocLayout.js'

export default DocLayout

# Getting Started

With the CLI installed, we can start writing styles.<br />
Let's create some styles in a _example.elo_ file.<br />
Check the [Styles](/docs/language/styles) section for all available properties.

```elodin copy name=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.<br />

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

```javascript name=elodin.config.js copy
// 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](/docs/setup/configuration).

## Compiling Files

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

```sh copy
elodin
```

> **Note**: Also check the [CLI Options](/docs/api/cli) for other useful options such as `--watch`.

**Congratulations!** You just compiled your first Elodin files.<br />
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`