@import ../template.nml
%<make_doc({"Styles"}, "Layouts", "Basic Layouts")>%

# Layouts

You can create layout blocks by using the following tokens:
 * ``#+LAYOUT_BEGIN <layout_name>`` Starts layout `<layout_name>`
 * ``#+LAYOUT_NEXT`` Advances layout to the next block
 * ``#+LAYOUT_END`` Ends last created layout

Here's an example of what you can do using layouts (with flashy colors for show):
#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split
First
	#+LAYOUT_BEGIN[style=background-color:#FF0] Centered
		Second
	#+LAYOUT_END
#+LAYOUT_NEXT[style=background-color:#00F]
	Third
	#+LAYOUT_BEGIN[style=background-color:#0FF] Split
		Fourth
	#+LAYOUT_NEXT[style=background-color:#0F0]
		Fifth
	#+LAYOUT_END
#+LAYOUT_END

Given by the following code:
```Plain Text
#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split
First
	#+LAYOUT_BEGIN[style=background-color:#FF0] Centered
		Second
	#+LAYOUT_END
#+LAYOUT_NEXT[style=background-color:#00F]
	Third
	#+LAYOUT_BEGIN[style=background-color:#0FF] Split
		Fourth
	#+LAYOUT_NEXT[style=background-color:#0F0]
		Fifth
	#+LAYOUT_END
#+LAYOUT_END
```
*(indentation is for readability)*

# Available layouts
## Centered

Centered layout align text to the center of the current block.

####+* Style
The ``Centered`` layout uses the `.centered` css class to center the text.

####+* Properties
 * ``style`` Added css style to the div (defaults to none)

## Split

####+* Style
The ``Split`` layout uses the `.split-container` and `.split` css class to create the desired layout.
If you wish to modify the relative width of the splits: add `style=flex: 0.5` in the properties, this makes the following split half the width of the other splits.

####+* Properties
 * ``style`` Added css style to the div (defaults to none)

## Spoiler

The spoiler layout creates a collapsed element which can be opened.

#+LAYOUT_BEGIN[title=Spoiler demo] Spoiler
This content is *hidden*.
#+LAYOUT_END

####+* Style
The ``Spoiler`` layout uses the `.spoiler` class, combined with `<details>/<summary>` to create the desired layout.

####+* Properties
 * ``title`` The spoiler title