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***
Grid result

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])
Contacts example

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
Nested stacks
⚠️ **GitHub.com Fallback** ⚠️