stacks - iamgio/quarkdown GitHub Wiki
Stack functions are those, in the subcategory of layout functions, that arrange a group of elements according to certain layout rules. Examples are row
, column
, grid
.
In order to understand which elements they must handle, they rely on the strict Markdown concept of block, an isolated chunk of the document such as a paragraph, a code block, a list, a quote, etc.
.row
A
B
C
The following example has only one item, as both A, B and C are part of the same paragraph (due to lazy lines):
.row
A
B
C
Images are stackable too, as long as they are in different paragraphs.
.row
![](img1.png)
![](img2.png)
Every kind of block is supported:
.row
> This is
> a quote
```java
This is code
```
- This is
- a list
According to the CommonMark specification, the following example brings to the same result as the previous one. It's however encouraged to keep the code well readable by spacing blocks properly.
.row
> This is
> a quote
```java
This is code
```
- This is
- a list
All the stack functions accept the following optional arguments:
Parameter | Description | Accepts |
---|---|---|
alignment |
Main axis alignment (CSS' justify-content ). |
start , center , end , spacebetween , spacearound , spaceevenly
|
cross |
Cross axis alignment (CSS' align-items ). |
start , center , end , stretch
|
gap |
Space between items. | Size |
grid
also accepts a mandatory columns
argument, which takes an integer value.
.grid columns:{2} alignment:{spacearound} gap:{1cm}
A
*B*
**C**
***D***
Other elements can join too:
# Contacts
.row alignment:{spacearound}
.center
**Michael Scott**
Dunder Mifflin Paper Company, Inc.
[[email protected]](mailto:[email protected])
.center
**Forrest Gump**
Bubba Gump Shrimp Co.
[[email protected]](mailto:[email protected])
Stack layouts can be infinitely nested within each other:
.row cross:{center} gap:{1in}
A
.grid columns:{2}
B
C
D
E
.column gap:{5mm}
F
.row
G
H