• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

nauzethc/ghost-material: Material Design theme for Ghost blogging platform

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

nauzethc/ghost-material

开源软件地址(OpenSource Url):

https://github.com/nauzethc/ghost-material

开源编程语言(OpenSource Language):

CSS 62.2%

开源软件介绍(OpenSource Introduction):

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.

License

Creative Commons BY-SA 4.0 http://creativecommons.org/licenses/by-sa/4.0/




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap