Gravstrap is a Grav plugin that gives you the ability to use Bootstrap elements as shortcodes. A shortcode is defined by a simple structure and it is added to a Grav page to render a full component like a simple button, or a more complex one like a carousel or a navbar, till a complex module, like a portfolio.

An example can better explain how a shortcode is made and how it works:

[g-navbar id=navbar name=navbar fixed=top centering=none brand_text="Brand"]
    [g-navbar-menu alignment="center"][/g-navbar-menu]    
    [g-navbar-menu icon_type="fontawesome" alignment="right" attributes="class:social-menu"]
        [g-link url="https://twitter.com/giansi72" icon="twitter"][/g-link]
        [g-link url="https://www.facebook.com/diblas.net" icon="facebook"][/g-link]
        [g-link url="https://github.com/giansi" icon="github"][/g-link]
        [g-link url="http://www.stumbleupon.com/stumbler/Giansimon" icon="stumbleupon"][/g-link]
        [g-link url="http://feeds.feedburner.com/diblas" icon="rss"][/g-link]
    [/g-navbar-menu]
[/g-navbar]

The shortcode shown above, renders the toolbar of this website.

The shortcode is defined by the g-navbar tag and it has some properties, name and brand_text in this example. This shortcode contains other shortcodes, called g-navbar-menu which their own properties and contents. The first shortcode menu doen not contain other shortcodes and this tell Gravstrap to automatically fill it with the website pages. The second menu contains several shortcode links to render a social menu.

Gravstrap plugin provides 30+ shortcodes you can use for free in your web site:

  • 6 Basic shortcodes
  • 17 Bootstrap shortcodes
  • 7 Modules
  • 2 Footers

You can see them in action in the Gravstrap theme.

Render the components using their template

Sometimes you might need to use a component to render dynamic contents fetched from an external source like database or from a json file. The most part of those components can be rendered passing them an array which defines the properties required to render the component. You can see those components in action in this section of the Gravstrap theme.

Share components through web site pages

At this point you might argue that some components like a navbar bar or a footer must be repeated over the web site and Grav does not provide a way to share contents between pages. Gravstrap plugin solves this issue, looking for a special page called common which will contain all the common components you need to share them between your site:

---
visible: false
---

[g-navbar id=navbar name=navbar fixed=top centering=none brand_text="Brand" render=false]
    [g-navbar-menu alignment="center"][/g-navbar-menu]    
    [g-navbar-menu icon_type="fontawesome" alignment="right" attributes="class:social-menu"]
        [g-link url="https://twitter.com/giansi72" icon="twitter"][/g-link]
        [g-link url="https://www.facebook.com/diblas.net" icon="facebook"][/g-link]
        [g-link url="https://github.com/giansi" icon="github"][/g-link]
        [g-link url="http://www.stumbleupon.com/stumbler/Giansimon" icon="stumbleupon"][/g-link]
        [g-link url="http://feeds.feedburner.com/diblas" icon="rss"][/g-link]
    [/g-navbar-menu]
[/g-navbar]

As you can see the page is set to be not visible and it contains all the shortcodes that must be shared through the web site pages.

We can a footer as well:

[g-footer-one name=footer render=false]
[g-section name="credits"]

This website is made with [Grav CMS](http://getgrav.org/) and it is powerd by [Gravstrap Theme](http://diblas.net/themes/gravstrap-theme-to-start-grav-cms-site-with-bootstrap-support/) and [Gravstrap Plugin](http://diblas.net/plugins/use-bootstrap-elements-in-the-grav-cms-way/)

[/g-section]

[g-section name="copyright"]Joe Bloggs[/g-section]

[/g-footer-one]

By default a shortcode is immediately rendered on the page, but this cannot work in this scenario. This behavior can easily be changed setting the render property to false and you can render it directly in your template as follows:

{{ shortcode["g-footer-one"].footer }}

This syntax comes from the shortcode-core plugin and it works fine until you want to use another footer. In that case you would open your template again and change the instruction as follows:

{{ shortcode["g-footer-two"].footer }}

To overcome this issue, Gravstrap plugins assigns the name of those kind of shortcode to Twig variables. This causes that you can simply render the shortcode as follows:

{{ footer }}

so you can just change your footer in the common page, just paying attention to use the same name.

Gravstrap is not compatible with Precache plugin and could produce undesidered results

Contributing

Feel free to fork this project and join the development! You are welcome!

Previous documentation

Previous documentation is available here.

Documentation