This web starter template includes Material Design Lite components, implemented using zuix.js, and that can be also rendered using zx short code tags.

Material Design tags

button

Usage:

{% zx 'button' '<link>' ['<type>' ['<classes>']] %}
<content>
{% endzx %}

Where '<type>' can be one of the following:

• flat
• raised
• fab

and '<classes>' can be one of the following values:

• colored
• accent
• primary
• mini-fab (can be added only if type is fab)

Examples

Basic button

{% zx 'button' '#test-link-1' %}
Basic
{% endzx %}

Colored button

{% zx 'button' '#test-link-1' 'raised' 'colored' %}
Colored
{% endzx %}

Flat button

{% zx 'button' '#test-link-2' 'flat' %}
Click Me
{% endzx %}

Floating action buttons

{% zx 'button' '#test-link-3' 'fab' 'accent' %}
mail
{% endzx %}

{% zx 'button' '#test-link-3' 'fab' 'mini-fab primary' %}
home
{% endzx %}

menu

Usage:

{% zx 'menu' %}
<config>
{% endzx %}

Example

{% zx 'menu' %}

items:

- title: Option 1
  link: "#test1"

- title: Option 2
  link: "#test2"

- title: Option 3
  link: "#test3"

button:
  type: icon
  classes: accent

{% endzx %}

Result

The button.type field can be one of the following:

• icon
• fab

and button.classes can be:

• colored
• accent
• primary
• mini-fab (can be added only if button.type is fab)

card

Usage:

{% zx 'card' '<type>' '<title>' '<image_url>' '<link_url>' '<link_text>' %}
<description>
{% endzx %}

Where '<type>' can be one of the following:

• image
• square
• default

Example

{% layout 'rows center-spread' %}

  {% zx 'card' 'image' 'The bridge' 'https://picsum.photos/id/392/256/256' '#link-to-somewhere' %}
  {% endzx %}

  {% zx 'card' 'square' 'Sweet mornings' 'https://picsum.photos/id/110/320/176' '#link-to-somewhere' 'Show me' %}
  A wonderful serenity has taken possession of my entire soul,
  like these sweet mornings of spring which I enjoy with my whole heart.
  {% endzx %}
  
  {% zx 'card' 'default' 'Blind texts' 'https://picsum.photos/id/33/420/172' '#link-to-somewhere' 'Show me' %}
  Far far away, behind the word mountains, far from the countries
  Vokalia and Consonantia, there live the blind texts. 
  {% endzx %}

{% endlayout %}

The bridge

Sweet mornings

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.

Take me there

Blind texts

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Show me