Skip to content
A simple Grav CMS theme for creating an online portfolio
CSS HTML JavaScript PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css-compiled
css
images
js
scss added util css classes and vars Sep 16, 2019
templates only show published pages in blog listing Sep 16, 2019
CHANGELOG.md
LICENSE
README.md
blueprints.yaml
screenshot.jpg
thumbnail.jpg
webfolio.php
webfolio.yaml

README.md

Webfolio Theme

The Webfolio Theme is a basic theme for creating an online portfolio and blog with Grav CMS. It is partially based on the Quark Theme.

Sample

My own personal website uses this theme. Feel free to check it out or even look at the source code.

Intstallation

  1. From the root of your Grav installation, run bin/gpm install webfolio.
    • Alternatively, download this repository, unzip it, rename the folder to webfolio, and place it in the user/themes/ directory of your Grav install
  2. Edit user/config/system.yaml to contain the following:
    pages:
      theme: webfolio

Alternatively, you can install Webfolio via the Grav Admin interface.

Templates

Webfolio offers several templates for your site's pages. Here's a brief overview of each one.

Default

The default template is a simple template that just renders your content as-is.

Modular

The modular template is used to create modular pages made up of several sub-pages. The actual modular.md file typically only contains YAML FrontMatter; any Markdown content will not be rendered.

Intro

The intro template is used to create an introduction section within a modular page. It can display an image and icon links in addition to the Markdown content. The first image file within this page's directory, if there is one, will be used as the image.

Custom FrontMatter Fields

  • use_footer_links - Whether the footer_links from the site-wide customization should also appear in this section. See the Customization section below for more information about footer_links.
  • links - A list of icon links to be displayed. Each link needs to specify a link (the URL to which it points) and an icon (Font-Awesome CSS classes, such as fas fa-code). These links will be displayed after the footer_links if use_footer_links is true.
  • img_alt - The alt text to be used for the image in this section.

About

The about template is used to display a section containing some Markdown content and a few details.

Custom FrontMatter Fields

  • details - A list of details to be shown in this section. Each detail can have a title, icon (Font Awesome CSS classes, such as fas fa-code), and content. Three details looks the best on the page.

Projects

The projects template shows a section containing a grid of project tiles.

Custom FrontMatter Fields

  • projects - A list of projects to be shown in this section. Each project can have a title, image (name of an image file stored in the page's directory), description, and link (URL).

Contact

The contact template is used to create a section containing a contact form, a contact button, or both. Note that the contact form should be set up in the header of the modular.md file as indicated here.

Custom FrontMatter Fields

  • button - If this field is present, a button will appear in this section with the following properties:
    • link - The URL that the button will load when clicked.
    • text - The text to be displayed on the button.
    • icon - Font Awesome CSS classes, such as fas fa-envelope.
  • show_form - Whether or not the contact form should be shown in this section.

Plain

The plain template is like the default template, but for creating a section in a modular page.

Blog

The blog template displays a list of blog posts (organized as sub-pages of the blog page).

Blog Post

The blog-post template is used to render a blog post. You'll want to set the title and date FrontMatter fields.

If both publish_date and date are set, publish_date is interpreted as the date of original publication, while date is the date the post was last updated.

Customization

Site-wide

The following customizations are available by editing user/config/themes/webfolio.yaml (see the repo for my personal site for an example file) or via the Grav Admin interface.

  • Custom Logo (custom_logo) - A logo image to be placed on the left side of the header throughout the site.
  • Mobile Cusom Logo (custom_logo_mobile) - A logo image to be placed at the top left of the navigation overlay on smaller screens. Note that this logo will appear on a dark background.
  • Favicon (favicon) - A small image to be used as the icon for your site in the browser.
  • Show Credit in Footer (footer_credit) - Whether or not to display a sentence in your site footer giving credit to this theme and to Grav.
  • Footer Links (footer_links) - A list of links to be shown in the footer of every page. Each link has a link (URL) property and a icon (Font Awesome icon classes, such as fas fa-envelope) property.
  • Copyright - Include any of these fields to show a copyright notice in your site's footer.
    • Year (copyright.year) - The year to be displayed next to the copyright symbol.
    • Copyright-Holder's Name (copyright.name) - The name of the person holding the copyright for the site.
    • Link Target URL (copyright.link) - A URL to which users will be directed when clicking on the copyright-holder's name.

Page Specific

Some pages can have a bit of extra customization. These properties are set within the YAML header of the Markdown file for the page.

All Pages

  • body_classes - A space-separated list of CSS classes to be applied to the body of the page.

Modular Pages (markdown.md)

The following properties are available to customize the navigation menu:

  • modules_in_menu - If set to true, each of the modular page's modules will appear in the navigation menu as children of the page. (Note that on the modular page itself, the modules may appear as top-level menu items depending on how single_page_menu is set.)
  • single_page_menu - If set to true, each of the modular page's modules will appear in the page's navigation menu as top-level items, and sibling or parent pages of the modular page will not appear in the modular page's menu.
  • onpage_menu (DEPRECATED) - Same behavior as single_page_menu. If either modules_in_menu or single_page_menu is set, this setting will be ignored.

All Modular Sections (any page using a template inside the modular directory)

  • class - A space-separated list of CSS classes to be applied to the modular section.

Advanced

More stylistic elements of the site (e.g., colors, fonts, etc.) can be customized using the css/custom.css file within the theme. Alternatively, you can edit scss/variables.scss and then recompile scss/theme.scss into css-compiled/theme.min.scss using Sass.

Webfolio provides several CSS classes and variables for you to use. Take a look inside scss/util.scss to see what they are.

Help

Don't hesitate to reach out to me at contact@jasoncarloscox.com if you're having trouble using Webfolio. I'm happy to help!

Contributing

Feel free to submit an issue or merge request if you see a way to make this theme better!

You can’t perform that action at this time.