The Basic Elements

The first elements you should know are empty and text

• empty - renders as nothing
• text "Hello!" - renders as the raw text "Hello!"

So far, nothing too crazy!

El, a new kind of div

Now let's take a look at el, which you can think of as the style-elements' version of div, with a few differences.

el MyStyle [] (text "Hello!")

Let's break down the pieces of what's going on here:

• MyStyle

  is a style identifier, you can think of it like a CSS class if you're so inclined. We'll create a stylesheet with it once we get to the style section of this guide.

• []

  The second argument is a list of attributes, just like you'd have for your html.

• text "Hello!"

• Finally we have the child. The main surprising thing here is that you can only have one child!

  As we mentioned before, elements are defined as html that has an explicit, mandatory idea of layout. If we let a generic element have multiple children, we'd have no idea how those children would be arranged.

Row and Column

If we want to have an element that has multiple children, then we need that element to specify how those children should be arranged.

That's actually not too hard, the basic way to do this is with a row and a column, which, as you might guess, will arrange their children in a row or a column.

-- A row of three elements, each containing some text.
row MyRowStyle [] 
    [ el MyStyle [] (text "Hello")
    , el MyStyle [] (text "World")
    , el MyStyle [] (text "!")
    ]

This is fantastic, though not nearly the whole story.