The Basic Elements
The first elements you should know are
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:
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.