Theme Development or Port from HTML

Hi Grav community,

I'm a front-end coder and new to Grav. I'm trying to build my own theme for Grav but I can't understand fully to do it.

I want to build theme consist of a blog page, home, and other pages. I can build those in HTML5 using frameworks like foundation or bootstrap but I can't figure out how to port it as Grav theme.

If you can point me to any details tutorial it will be a big help. I have tried to read the documentation but it was too complex for me.

Thanks.

It's really a very simple process to port themes to Grav. I have done quite a few myself.

Basically start by creating a new base theme. I suggest using devtools plugin to get started (use "pure-blank") example:

bin/gpm install devtools
bin/plugin devtools newtheme

Fill in the info for the name of your theme, etc.

Once you have this new theme, set it as default in the /user/config/system.yaml file.

The "pure-blank" theme, uses a very basic layout with the Pure CSS framework.

The meat of the theme is contained in templates/partials/base.html.twig. Tweak this to mimic the theme you are porting. Just keep the same kinds of block and also use the Grav assets paths. Make sure you copy the original theme's CSS and JS and stuff into proper locations.

The templates/ folder contains the page templates, but these should generally extend base, and then just override certain blocks where needed.

Some tips:

1) Read the Twig Docs for designers: http://twig.sensiolabs.org/doc/1.x/templates.html
2) Use Antimatter theme (probably already installed) for helpful references.

A tutorial: http://gravcart.com/blog/create-a-grav-site-theme