mdl-liquid-layout

A set of layout files that implement the layout part of Google's Material Design Lite templates.

Dependencies

The default behaviour for this layout is to use a CSS file called main.css, although this can be overridden as described below.

Overrides

If using Markheim then any partial can be overridden by placing a partial of the same name in a higher priority directory. For example, to use a different CSS file than main.css simply create a partial called head-styles.html and ensure Markheim has access to it; Markheim will then use it in preference to the head-styles.html partial in this module.

More information on this process will follow when Markheim becomes available.

Layouts

MDL provides a number of layouts. So far only the entry.html file has been converted, from the blog template.

Partials

A collection of partials.

google-tag-manager.html

Adds the necessary script for Google Tag Manager.

Requires a GTM ID.

Example usage in a Liquid template:

{% include google-tag-manager.html id=site.google_tag_manager %}

Needs to be kept in sync with Google Tag Manager for Web Tracking - Quick Start Guide.

disqus-comments.html

Adds the necessary script for Disqus comments.

Requires the site shortname and an optional page identifier.

Example usage in a Liquid template:

{% if page.comments %}
  {% include disqus-comments.html
      shortname=site.disqus_shortname
      identifier=site.disqus_identifier | append:page.url | replace:"index.html", ""
  %}
{% endif %}

Needs to be kept in sync with Disqus Setup Instructions for Universal Code.

head.html

Adds a container for various head partials. All of the partials beginning head-* are included.

head-canonical.html

Add a canonical URL.

Requires the URL of the page, the base URL for the page, the URL for the site, and the title of the page.

Example usage in a Liquid template:

  {% include head-canonical.html
      url=page.url
      baseurl=site.baseurl
      siteurl=site.url
      title=site.title
  %}

head-description.html

Add a description of the page, based on either the page content or a description of the whole site.

head-title.html

Add a title for the page, based on either the page itself or the title of the whole site.

head-charset-utf-8.html

Adds the UTF-8 charset meta tag.

head-fonts.html

This can be overridden in order to provide font information.

head-styles.html

This can be overridden in order to provide style information.

head-ie-legacy-document-mode.html

Adds settings for Internet Explorer Legacy Document mode.

head-viewport.html

Adds the viewport settings.

head-homescreen-android.html

Add tags for setting a homescreen link on Android.

head-homescreen-ios.html

Add tags for setting a homescreen link on iOS.

head-homescreen-win8.html

Add tags for setting the icon on Windows 8.