Material design made easy with Grav CMS Pro

keyboard_arrow_right

Material design like a breeze with Material plugin

Material plugin is the core of Grav Cms Pro system. This micro application provides several shortcodes to handle the powerful Materialize framework in your Grav application. The combination of all these elements results in an easy introduction of Material Design for your website. Basically, Material plugin does two things tied together:

  • Implements shortcodes to use Materialize components
  • Extends Materialize stylesheets adding several basilar and complex classes not provided by Materialize

Shortcodes

Shortcodes are small but powerful pieces of code used to render complex html components. For example, to render a Materialize card in your Grav CMS markdown page you will use the following shortcode:

[m-card image="demo-image.jpg"]
  ## Title
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
[/m-card]

which will render the following card:

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Is it cool, isn't it?

Building layouts with shortcodes and markdown

You can also build complex layouts using the powerful m-grid shortcode, which handles the Materialize grid component:

[m-grid]
  [m-grid-row]
    [m-grid-col attributes="class:s12 m6 l6"]
      ## Title
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.
    [/m-grid-col]
    [m-grid-col attributes="class:s12 m6 l6"]
      ## Title
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.
    [/m-grid-col]
  [/m-grid-row]
[/m-grid]  

More shortcodes than Materialize

Material plugin is not only a Grav CMS Materialize framework implementation, in fact it adds several basic components like icons, rich links, rich images and more. Here you get the m-tag shortcode, which is the most powerful you can use, because you can add any html tag to your page. For example to render a div just add this shortcode to your page:

[m-tag tag="div"]
  ## Title
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
[/m-tag]  

Next, you can do something like this to add a list of elements with some css classes applied:

[m-tag tag="ul" attributes="class:foo"]
  [m-tag tag="li" attributes="class:bar"][m-icon icon="fa-check"][/m-icon] Item 1[/m-tag]
  [m-tag tag="li"][m-icon icon="fa-check"][/m-icon] Item 2[/m-tag]
  [m-tag tag="li"][m-icon icon="fa-check"][/m-icon] Item 3[/m-tag]
[/m-tag]  

which results as:

  • Item 1
  • Item 2
  • Item 3

You can also nest shortcodes, for example nesting a m-grid shortcode into a m-tag one as follows:

[m-tag tag="div" attributes="class:grey lighten-2"]
  [m-grid container="false"]
    [m-grid-row]
      [m-grid-col attributes="class:s12 m12 l12 padding-medium"]
        ## Title
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      [/m-grid-col]
    [/m-grid-row]
  [/m-grid]    
[/m-tag]  

to get:

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Stylesheets classes out of the box

After you read the code just proposed, maybe you would have noticed the use of padding-medium class, one of the classed we implemented to save time and increment the productivity. For example you can add a nice colored transparent panel with text inside, as follows:

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

And this is the code:

[m-tag tag="div" image="demo-image.jpg" attributes="class:padding-top-bottom-large image-cover"]
  [m-grid]
    [m-grid-row]
      [m-grid-col attributes="class:s12 m12 l12 opaque-panel-red-darken-4-high padding-large text-full-white rounded"]
        ## Title
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      [/m-grid-col]
    [/m-grid-row]
  [/m-grid]
[/m-tag]

Here we used a lot of useful classes from our Materialize extension:

  • padding-top-bottom-large
  • image-cover
  • opaque-panel-red-darken-4-high
  • padding-large
  • text-full-white
  • rounded

All classes names are quite self explaining, but the opaque-panel-red-darken-4-high class requires some words. In fact it adds a high opaque panel colored using Materialize red-darken-4 color. You can use the opaque-panel- class choosing colors from the whole Materialize framework and choose the opaque intensity from the low, medium, high values. For example you can render a medium opaque blue panel using the opaque-panel-blue-base-medium class.

Components

Shortcodes can be packed in components to reuse complex structures within a websites. Let's see an example:

That component is rendered by the following code:

[m-component component="3x1-grid" folder="promo-table"]
[m-component-item name="M_MAIN_CONTENT" M_EXTRA_ATTRIBUTES=""]   
  ### Lorem ipsum
  Lorem ipsum dolor sit amet, consectetur adipiscing elit
[/m-component-item]

[m-component-item name="M_PROMO_ITEM_1" M_ICON="style" M_ATTRIBUTES=""]
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
[/m-component-item]

[m-component-item name="M_PROMO_ITEM_2" M_ICON="create" M_ATTRIBUTES=""]
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
[/m-component-item]

[m-component-item name="M_PROMO_ITEM_3" M_ICON="dvr" M_ATTRIBUTES=""]
  laboris nisi ut aliquip ex ea commodo consequat
[/m-component-item]
[/m-component]

The backend code of that component is the following:

[m-grid attributes="class:icons-promo"]
  [m-grid-row attributes="class:center" ]
    [m-grid-col attributes="class:s12 m12 l12 M_MAIN_CONTENT.M_EXTRA_ATTRIBUTES"]
      M_MAIN_CONTENT.M_CONTENT
    [/m-grid-col]
  [/m-grid-row]
  [m-grid-row attributes="class:center"]
    [m-grid-col attributes="class:s12 m4 l4"]
      [m-promo-table-item icon="M_PROMO_ITEM_1.M_ICON" attributes="M_PROMO_ITEM_1.M_ATTRIBUTES"]
        M_PROMO_ITEM_1.M_CONTENT
      [/m-promo-table-item]
    [/m-grid-col]
    [m-grid-col attributes="class:s12 m4 l4"]
      [m-promo-table-item icon="M_PROMO_ITEM_2.M_ICON" attributes="M_PROMO_ITEM_2.M_ATTRIBUTES"]
        M_PROMO_ITEM_1.M_CONTENT
      [/m-promo-table-item]
    [/m-grid-col]
    [m-grid-col attributes="class:s12 m4 l4 highligthed1"]
      [m-promo-table-item icon="M_PROMO_ITEM_3.M_ICON" attributes="M_PROMO_ITEM_3.M_ATTRIBUTES"]
        M_PROMO_ITEM_1.M_CONTENT
      [/m-promo-table-item]
    [/m-grid-col]
  [/m-grid-row]
[/m-grid]

You can create complex structures using shortcodes. Components are required when you need to share contents between pages. then reuse them in all your websites

More shortcodes

Here you can give a look to some other sample components from our framework, just as a further demonstration:

Rich image

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

The Code
[m-rich-image container-attributes="class:box-medium" content-attributes="class:text-white padding-small" image-attributes="class:image-cover" image="demo-image.jpg" scale="true" ]
  #### Lorem ipsum
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
[/m-rich-image]

Subtle card

The Code
[m-subtle-card effect="effect-4" image="demo-image.jpg"]
  ### Product name
  Product subtitle
  [Take a look](#){.btn}
[/m-subtle-card]  

Enjoy Material plugin and Grav CMS Pro!

Powerful web hosting with Dreamhost

Powerful web hosting with Dreamhost

Top