Companion Styles Task Updates

This is a brief update on the current progress for this task of creating supporting styles for BuddyPress when activated on the default WordPress themes.

The task origin & concept

This task was originally prompted by a discussion on the rendering of Buddypress on the WP Twentyfifteen theme and the concern we had that BP did not display to it’s best on this theme. We discussed and agreed in essence that it would be nice that BP displayed at it’s best when activated on these default WP themes as they may well be a users first impression of BP and first impressions last 🙂 On the original discussion, having agreed in principle that we needed to correct twentyfifteen display we did create an initial set of corrective styles provided by @mercime and which are rolled into the first iteration of the twentyfifteen styles.

On discussion the proposal or one proposal was that we actually programatically check and enqueue an additional set of styles dependent on the theme activated and that these styles then would address any issues or conflicts arising from the buddypress styles and themes styles. This process would also be used, moving forward, to provide support for any new WP themes released. For existing WP themes we would approach them from a current latest version first tracking back as time allowed in a given release cycle.

The task in hand

This task is now underway and using a patch provided by @r-a-y we can now enqueue new stylesheets if found for the twentysomething themes.

We introduce  styles under pre-processor support (.scss) for these companion styles which likely will be compiled to the bp package as a grunt task, for the purposes of developing and testing I’m compiling locally and including the compiled file in the patch and any subsequent patch updates on a ticket.

A master ticket exists to manage technical discussion at #6248

Individual tickets exist and are underway to manage particular WP theme tasks

The Task Objectives

  • Primary: Correct any obvious issues with styles as pertaining to BP component screens
  • Secondary: Enhance the rendered BP elements with a view to maintaining a harmony with the themes look and style
  • Tertiary : Look to add refined styling for BP elements

For a task to be considered ‘completed’ and viable for inclusion in a release we must fulfill the primary and secondary objectives with the third objective being considered a bonus if we are able to achieve some additional and interesting visual styles that harmonize with the theme.

In this overall task it’s important to keep focused on the initial reason we are tackling these styles as a means of ensuring BP is presented in the best possible light, however we are not ‘theming’ BuddyPress so the third objective while great if we can tackle and add a little bit of an extra ‘wow’ factor should not be the driving force behind the tasks.

Current state of ticket tasks

All ticketed tasks provide a patch containing two files the Scss file and a compiled css file. The scss file provides the framework we will work to and guidance notes and will have some essential initial styles that address the main areas of concern with displays. Breakpoints used in a given theme are noted and provided in commented examples for use if needed.  A few essential mixins are provided to manage font-sizing on a rem/px basis and variables to manage margin/padding, we attempt to ensure we work to the themes parameters in use.

Twentyfifteen currently is underway and addresses in the styles areas such as the restricted content width of the layout which while fine for textual content i.e a post or magazine doesn’t suit more complex content such as is presented on the BP user account screens. re-styles the user object navigation to a vertical style, it also takes a look at the search forms to re-style those.

Twentyfourteen is very similar to Twentyfifteen in it’s content layout and we take the same approach to re-factoring the BP screens layout widths to better render BP elements and also again implement the vertical menu for user accounts. The initial styles are attached to the ticket.

Getting Involved

We welcome any participation in this mini project and people can follow along on the tickets as linked to above, comments are welcome as are contributions of code.

Working with the sheets can either be done by patching a local dev install and using the scss  file to work in, pushing changes back up to the ticket as a fresh patch or if not comfortable working in a pre-processor environment one could simply  copy the the compiled css file from the patch view on a ticket to the bottom of the themes style.css and work there building rulesets but being careful to isolate and mark / section new styles so they can be easily extracted out and added to the ticket as a simple text file, we can then run those to test and then work them into positions within the scss file if need be.

What to get involved with?

As mentioned comments on work to date welcome but if you do fancy running up some visual styles then suggested areas worth looking at might be as follows:

  • The loops: styling the activity stream entries or member lists
  • User account screen specific components
  • BP buttons in general action buttons/actions in lists and /or account headers

In other words drilling down to look at just how specific aspects are rendered and how they may be better presented.