/Slimer

The default theme for Ghost

Primary LanguageCSSMIT LicenseMIT

Slimer

A fork of the default theme for Ghost. This contains the things I like to do for every site;

  • Moved the blog post list to posts.hbs
  • Added a custom route for index pages to index.hbs (Just tag a page w/ the label "index" and users can edit this page).
  • Ignoring built js files

 

screenshot-desktop

Development

Slimer styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:

# install dependencies
yarn install

# run development server
yarn dev

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

# create .zip file
yarn zip

PostCSS Features Used

  • Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
  • Color Mod

SVG Icons

Slimer uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs - use {{> "icons/rss"}}.

You can add your own SVG icons in the same manner.