Workflow themeing with git, grunt and SASS
Permalink
I want to build my theme with grunt and git as this is my workflow at work.
I could see that instead of working with raw HTML then stripping out the HTML to PHP and putting in C5 hooks (as by the time you build your HTML it's going to be different to your php anyway), That I would just build my theme straight from Photoshop to PHP within the C5 theme folder.
Then I would somehow point my theme to a src folder where I could build and version and then package a final dist folder which would be my uploaded theme?
Does this sound correct?
I could see that instead of working with raw HTML then stripping out the HTML to PHP and putting in C5 hooks (as by the time you build your HTML it's going to be different to your php anyway), That I would just build my theme straight from Photoshop to PHP within the C5 theme folder.
Then I would somehow point my theme to a src folder where I could build and version and then package a final dist folder which would be my uploaded theme?
Does this sound correct?
I mean going 'straight from Photoshop to PHP' is many people mockup their site using Photoshop then the create a folder and create an exact replica of it using straight HTML and CSS. Then they go into C5 or WP and change out or 'Skin' the HTML template into the php theme.
I have found every time I have done this it doesn't quite fit or work so I will skip the HTML part and just make the theme file straight from the Photoshop comp.
I don't have a starting point yet. I've worked with C5 before but I would like to integrate these build tools into my build but unsure of the best way to go about it.
How to structure my build around the theme folder (folder structure) and Where (do I create a custom package first) or build straight from the theme folder.
I have found every time I have done this it doesn't quite fit or work so I will skip the HTML part and just make the theme file straight from the Photoshop comp.
I don't have a starting point yet. I've worked with C5 before but I would like to integrate these build tools into my build but unsure of the best way to go about it.
How to structure my build around the theme folder (folder structure) and Where (do I create a custom package first) or build straight from the theme folder.
I'm following - yes, my suggestion would be go straight from your design to the theme, don't waste time with some sort of HTML only mid-point. You're going to have to code up things like page list templates, so you might as well do that directly.
My suggestion here would be to create a really barebones theme, inside a package.
We used to just create themes outside of a package, but we've found there's too many good reasons to actually package it up.
I don't have something on github to link to as an example, but there are plenty of free themes you could download to check out as an example of how to put a theme inside a package and make it installable. Perhaps get that sorted out first before worrying about a more complex workflow.
I've attached a screenshot of our startpoint's folder structure as an example.
The main files to focus on would be the package's controller.php, where you need to set it up to install your theme, and the theme's page_theme.php files. We've got a few block templates in there as well, just some commonly used ones that we always tend to need. Block templates tend to go hand-in-hand with themes, hence why that are great to bundle within the related package.
My suggestion here would be to create a really barebones theme, inside a package.
We used to just create themes outside of a package, but we've found there's too many good reasons to actually package it up.
I don't have something on github to link to as an example, but there are plenty of free themes you could download to check out as an example of how to put a theme inside a package and make it installable. Perhaps get that sorted out first before worrying about a more complex workflow.
I've attached a screenshot of our startpoint's folder structure as an example.
The main files to focus on would be the package's controller.php, where you need to set it up to install your theme, and the theme's page_theme.php files. We've got a few block templates in there as well, just some commonly used ones that we always tend to need. Block templates tend to go hand-in-hand with themes, hence why that are great to bundle within the related package.
@mesuva you forgot to attach the screenshot :)
Doh!
Nothing overly exciting, but it helps to show a basic structure.
Nothing overly exciting, but it helps to show a basic structure.
I have the files remember? It's pretty useful.
I use sass, gulp and github for my projects. I tired to put the gulpfile and package.json files directly in the theme folder. Then install my dependencies using npm. But C5 did not like that. So I just decided to just use prepros and point it to my theme folder and POOF. Sass working in C5. lol.
Can you explain the bit where you'd be going 'straight from Photoshop to PHP'?
The way we work is that we've got a 'starting point' theme, which has the folder structure already set up, along with a package folder. In that we've got common files, Sass templates and a few commonly used scripts. It's also got a few block templates ready to go.
So when we want to develop a new theme, I'll copy that folder, rename the folders and the namespace of a couple of files, adjust it's name and then install it (so about 2 minutes work). Then we've already got lots of stuff already in it, like a header and navigation area.
We'll then use Sass to do all the styling and match it to the design concept.
Generally speaking the actual HTML/PHP markup for templates isn't _dramatically_ different between each theme build, we try to stick to pretty clean and semantic HTML.
We use Codekit to trigger off the compilation of our Sass, but we could swap that out for other tools, libsass, whatever. I'm sure Grunt could be used here, in conjunction with minimising scripts. Personally I've not really found much of a need, I tend to either manually concatenate already minified scripts by hand, and not worry a huge amount about a few dozen lines of custom scripting that aren't compressed.
I think some people worry about crazy workflows and compressing every little resource, but then miss obvious stuff like using the wrong file types for images or turning on server size caching. I like to strike a balance of a workflow that creates reasonably neat and compressed code, without it being a pain to set up (especially if you have to make modifications on a project from 3 years ago).
I've not used git myself to do with anything theme related, but I know some will use composer and github to help pull down packages into their concrete5 sites. I'm sure there's a way to set up git where you can push to it, to then have it deploy to your server. Personally I don't find there's enough complexity in a theme to warrant this, but it might be great if many developers are working on the same theme.