Expose bootstrap row, col classes via shortcodes
Opened this issue · 0 comments
celestehorgan commented
Use case
Provide project maintainers with the flexibility to compose horizontal layout blocks (rows) of vertical columns, without necessarily knowing how bootstrap works. This would allow maintainers, potentially, to make site updates to non-documentation pages like their homepages on their own, without involving the CNCF.
Implementation
Implement the following use cases.
Shortcode tag syntax is not strongly typed, and therefore the underlying implementation should test for either a cols property or a col-classes property. col's should always have the option of passing in other CSS classes.
// cols="2" implements adds bootstrap classes="col col-6"
{{< row cols="2" >}}
{{ col }}
## Markdownify this!
Column 1
{{ /col }}
{{ col }}
**Markdownify this!!**
Column 2
{{ /col }}
{{< /row >}}
// cols="2" implements adds class="col col-4"
{{< row cols="3" >}}
{{ col }}
## Markdownify this!
Column 1
{{ /col }}
{{ col }}
**Markdownify this!!**
Column 2
{{ /col }}
{{ col }}
**Markdownify this!!**
Column 3
{{ /col }}
{{< /row >}}
// col-classes takes bootstrap CSS helpers
{{< row col-classes="col col-md-3">}}
{{ col class="bg-light" }}
## Markdownify this!
Column 1
{{ /col }}
{{ col class="text-primary" }}
**Markdownify this!!**
Column 2
{{ /col }}
{{ col class="border bg-light" }}
**Markdownify this!!**
Column 3
{{ /col }}
{{ col class="regular-shadow" }}
**Markdownify this!!**
Column 4
{{ /col }}
{{< /row >}}