Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Project Space Theme

Project Space


Visualize projects in an organized manner, as notes on a board. Projects can be categorized, color-coded and tagged to be easily identified, and displayed in a variety of ways with filtering and sorting.

The Project Space theme is responsive, and its use of JavaScript is minimal and only as progressive enhancements. The theme is designed by the Graceful degradation methodology, wherein JavaScript is not necessary for the site to function. Scripts include PJAX, DatePicker for calendar, and Multiple Select for dropdowns.


Create a folder in /user/pages that will store your project-notes, like /projects. In this folder, create a with the following content:

title: Project Space

    changefreq: monthly
    priority: 1.03
    description: Projects
    limit: 10

Using any FrontMatter you prefer, of course. Each child-page, ie. folder below this page, is treated as a note when you visit the page. For example, a typical note may be in the folder /user/pages/projects/et-genus-fumant-et-omnes, and look like this:

title: 'Et genus fumant et omnes'
color: orange
    category: Ongoing
        - 'Lorem Ipsum'

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request

The headers color and taxonomy are completely optional, and only the former affects the styling of the note. taxonomy.category should be a string, not a list. taxonomy.tag should, however, be a list of tags. color may be one of:

  • white: White
  • red: Red
  • orange: Orange
  • yellow: Yellow
  • green: Green
  • teal: Teal
  • blue: Blue
  • dark-blue: Dark Blue
  • purple: Purple
  • pink: Pink
  • brown: Brown
  • gray: Gray

Categories are defined as a list in site.yaml, for example:

taxonomies: [category,tag]
  - Idea
  - Ongoing
  - Done
  - Archived

Note that taxonomies: [category,tag] is necessary for Grav to recognize that your pages use the category and tag taxonomies.

With the Admin-plugin

If you are using the Admin-plugin, this is very easy to manage when editing a page:

Style options:

Project Space

These settings are in the Options-tab, just below where you change the settings for Publishing when editing a page in Admin. The setting to "Truncate words" can be either an integer, ie. a number above 1, or a boolean state, ie. 1 or 0. This limits the amount of words in each note when rendered through default.html.twig.

Taxonomy options:

Project Space

Available layouts, filters and sorting

All options are managed through the Tools-menu, and applied as URL-parameters to the page.

Display mode (display):

  • Blocks (default): Masonry-layout
  • List: Listed vertically
  • Category: Grouped by category, list
  • Color: Grouped by color, list

Date range (start and end):

  • Start: Date to start search at
  • End: Date to stop search at

Order (sort-by and sort-dir):

  • Sort by: Name of post (title), date of post (date), or name of post's folder (folder)
  • Sort direction: Ascending (asc) or descending (desc)
  • Limit: Amount of posts to show per page (INT)

Category (category)

Comma-separated list of categories to include, URL encoded. These are defined as a list in site.yaml.

Color (color)

Comma-separated list of colors to include, URL encoded. Colors are hard-coded within the plugin for proper rendering in the interface(s).

Tag (tag)

Comma-separated list of tags to include, URL encoded. These are generated from all available posts.


Installing the Project Space theme can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install project-space

This will install the Project Space theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/project-space.

Manual Installation

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to project-space.

You should now have all the theme files under



Compiling CSS

Use a SCSS-compiler, like LibSass, eg. node-sass and compile src/scss/screen.scss to css/screen.css in the theme-folder. For example: npm run build for production or npm run watch for development. Requires Node-modules to be installed first.


Based on the Masonry Theme, which is a port of the Masonry Theme for Ghost.

This theme is free and open source software, distributed under the MIT License.

FOSSA Status