cncf / hugo-netlify-starter

Static website template for CNCF projects
https://cncf-hugo-starter.netlify.com/
Other
26 stars 16 forks source link

Expose bootstrap row, col classes via shortcodes #18

Open celestehorgan opened 4 years ago

celestehorgan commented 4 years ago

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 >}}