My current workflow

[rgilman]

Now that I'm incorporating Pinegrow, I'd like to describe my overall workflow, both to get feedback and to share what I'm learning.

PHP workflow

I'm using VS Code as my editor and liking it. I imagine Atom is similar. I'm also using Firefox Developer Edition as my development browser.

Templating

This part of the workflow deals with changing the structure on pages of interest. We have all of the templates for BuddyPress and bbPress copied into bfcom where they can be freely modified.

Since we're modifying a fairly complex system, I do a lot of reverse engineering. I generally start with identifying the appropriate templates among these copies and how they nest on the page of interest. That leads me to the particular places to change on each template. In the simplest cases, I just remove items. Often, there is a bp or bbp function that needs to be understood to enable the change. I take that function into google to learn what I can about it and find examples of how it has been modified. Places I'm frequently finding useful include

• https://codex.buddypress.org
• https://codex.bbpress.org
• http://hookr.io (especially for bbPress)
• https://hotexamples.com

https://buddypress.wp-a2z.org has been very helpful for BuddyPress but is currently offline.

Sometimes there is a hook in the function where the change can be injected. In that case, I'll google for examples of add_action or add_filter functions that address the issue. With these examples as inspiration, I'll craft something for our case.

When there isn't an appropriate hook or changes are more extensive, I'll create a bfc function, often starting with a copy of the bp or bbp function.

I work my way through all the templates until I have the overall structure I want.

I do this by making changes with VS Code and reviewing in Firefox Developer Edition.

Styling

For the CSS work, I have added Pinegrow to VS Code and Firefox Developer Edition.

I start by going to the page of interest in Firefox pointed to dev.bfcom.local. I save the page as a complete web page into a folder. I make that folder into a local repo so changes will be recorded. I open the folder as a project in Pinegrow, which loads both that page (as an HTML page) and all of its dependencies (especially the various style sheets).

Pinegrow isn't as effortless as one might dream – you still need to think about what you are doing – but it gives you a lot of "expert system" support and gives you realtime feedback as you make changes to the CSS. Most CSS can be adjusted through a "visual editor" which lets you know what (all) your options are and allows for a more intuitive adjustment of things like font-size and line spacing. Their support system for creating new selectors displays all of the selectors above your current point in the tree and is very helpful in targeting the right specificity. There are many helpful features like this. They require some learning but I'm finding the speed and intuitive-ease gains are worth it. It's a great match for my intermediate skill level.

In our complex system there are a lot of stylesheets, so if I'm not paying attention, I can make changes to a bp or bbp stylesheet rather than having the change go into style.css. That's where it's helpful to check the changes via git, which I can do in VS Code directly.

Once I have the design to a place I'm comfortable with in Pinegrow, I check to make sure all of the changes have gotten into style.css (as well as I can remember). This version of style.css is in the folder saved out of Firefox. It is NOT in bfcom. I manually transfer these so that I can check them and see if there are better ways to group them or add comments.

Once the changes are in the bfcom version of style.css, I go through them to create the git commits.

Any thoughts on all this?

[iangilman]

All sounds great to me! This seems like a great thing to share with the existing team and future members. I suppose I live here as an issue, though it could potentially move to the wiki or whatever.

[rgilman]

The wiki is in major need of updating. I hope to devote some time to that before the end of November when Adam may be joining the team. I'd like to bring in some of the recent docs in our Google Drive as well.

[iangilman]

Sounds good :)