Source

Originally from nauzethc to adapt it to my needs. Unless otherwise spacified the rest of the README (except the Modifications paragraph) is from the original author.

Modifications

Disqus

Discus comments have been added, the only parameter to change is located in post.hbs. You need to change myblog in the line s.src = '//myblog.disqus.com/embed.js' under the {{! Comment }} section by you blog shortname.

Menu instead of social profiles

Replaced the social links for menu links to particular tags or pages, just change the icon (from Material Design Icons), the menu name and the link at the top of index.hbs. Same goes for partials/author.hbs.

Added Tumblr share button on the article pages

Used the Tumblr icon from Material Design Icons and the default link form to share a blog post on Tumblr.

Ghost Material

Material Design inspired theme for Ghost blogging platform. Visit my blog for a demo.

Features

• Zero-dependency on CSS frameworks or Javascript libraries
• Mobile-first and adapted to all screens according to Material Design guidelines
• CSS Flexbox for layout structure
• CSS Animations (no jQuery or Javascript)

Installation

Go to your Ghost installation path and clone repository under content/themes directory.

cd /your/ghost/path
cd content/themes/
git clone https://github.com/nauzethc/ghost-material.git

Then restart your Ghost service and select "Material" theme on your blog setup page.

Customization

Colors

For color palette customizing you only have to edit the assets/css/theme.css file. I recommend to use Material Palette web to generate color palette based on two main colors, one for backgrounds and one for accent (links and buttons).

Animations

Animation timings, functions and definitions are customizable via assets/css/animations.css. Navbar autohide and cards slide-on events are triggered using Javascript, but animations and transitions are fully CSS based.

Components

Some widgets are customizable via CSS classes.

• Navigation Bar (navbar)

  • shaded: Add shadow
  • fixed: Set navbar as fixed on top
  • autohide: Hide/unhide navbar on scroll (fixed is required)

• Header (header)

  • shaded: Add shadow

  • bg-darken|bg-lighten: It draws dark/light gradient on top of background images (for better readability)

  • Header Content (header--content)

    • onTop|onMiddle|onBottom: Align vertically header content

• Cards (card)

  • image: Set bigger height on card header to show image

  • slide: Card is animated when is rendered

  • Card Header (card--header)

    • bg-darken|bg-lighten: It draws dark/light gradient on top of background images (for better readability)

• FABs (fab class on <a>,<button> elements)

  • large: Display a bigger button (55.5px)
  • disabled: It's rendered as disabled button
  • ripple: Show ripple animation on click

• Buttons (button class on <a>,<button> elements)

  • shaded: Add shadow
  • solid: Add solid color background
  • ripple: Show ripple animation on click

Motivation

Ghost Material is widely motivated by Materialize and Material Design Lite projects. I've tried to use both frameworks with Ghost before but for some reason none of them convinced me, so I wanted to replicate what I like from them without using any heavy library or framework, just vanilla Javascript and CSS3.