The Language consists of 3 major constructs that are defined at top level which are Style, Fragment and Variant.
Apart from that, it specificies a simple module system with imports.
At the end, it also specifies a standard library consisting of a set of useful functions to compose declaration values.

Style

style Button {
  flexGrow: 1
  paddingTop: 10
  backgroundColor: red
  fontSize: 18
  lineHeight: 1.5
  color: green
}

Styles are the main building blocks of Elodin. They contain style declarations for a single component which in general is a reuseable, user interface component.

Styles are declared using the style keyword followed by a style name and a declaration block.
The view name is an Identifier starting with a capital letter. It is unique for each file.
The declaration block consists of declarations and conditional declarations.

Declaration

backgroundColor: red

A declaration is a pair of property and value where property is an camelCased Identifier and value is a single instance of one of the types mentioned later. It is separated using a colon. A declaration that references a variable is called dynamic declaration and not validated immediately.

Validation System: While any property-value pair is syntactically valid, there's a strong validation system that will throw if wrong values or properties are applied. Check the Properties documentation for detail information on all available properties and their allowed value types. Beware that View and Text accept different properties.

Raw Property

__background: url("/static/test.jpg")

There also is a raw property syntax prefixed with a leading double underscore. It can be used to inject target-specific properties that are not part of the Elodin type system.

ConditionalDeclaration

[Type=Primary] {
  backgroundColor: red
}

Conditional declarations are special declarations that are only applied if a given condition is fulfilled. Think of them as if-statements.

Condition

Type=Primary

A condition is a boolean expression that evaluates to either

true

or

false

. One can check variant values, variable values and environment variable values. Boolean variables use a shorthand notation.

Valid condition operators are

,

>=

,

<=

, and

.

Fragment

fragment Flex {
  flexDirection: column
  alignSelf: stretch
}

Variant

variant Mode {
  Dark
  Light
}

Types

Identifier

stretch

Integer

Float

27.45

Percentage

percentage(50)
percentage(15.25)

Color

rgba(250 250 250 percentage(35))
hex(efefef)
green

String

"Hello Elodin!"

Variable

$bgColor

Environment

@hover