Companion Stylesheet - Twentysixteen

[hnla]

This ticket manages the Twentysixteen companion stylesheet implementation.

Twentysixteen is the latest default WP theme due to be released towards the end of December. This companion styles is a first pass to tackle some basic adjustments and may be iterated on further when Twentysixteen finally arrives.

Following on from our previous companion stylesheets Twentyfourteen (#6338), Twentyfifteen (#6291) and Twentythirteen (#6533) we continue with the process of supporting styles for the default WordPress themes to enhance the display of BuddyPress screens within those themes.

Style discussions and all patches for the task will be maintained here.

An initial commit of files, twentysixteen.scss and the compiled .css file will be made shortly in the next day or so which can be iterated on.

Patches can be offered for the .scss file or even code snippets that can be worked into the scss file if it's easier.

Once the core files are committed it will be very helpful if everyone can run their test sites on this theme for reporting any issues that may exist.

As with the other companion styles these tasks are to add enhancements to the layouts and pick up any obvious style clashes rather than providing what may be thought of as true design elements, we have to follow the theme in question and attempt to harmonize with it's styling as much as possible.

[hnla]

One initial issue that needs tackling is 2016 styles the entry-content width using a not('type-page') Buddypress removes the post class classes 'page' and 'type-page' for it's user account screens so we inherit styles that are a little narrow for our elements.

In changeset ​https://buddypress.trac.wordpress.org/changeset/8682 we made adjustments to the WP post class array adding in BP specific classes and then unsetting the default WP ones.

I suggest we can probably safely re-introduce the 'type-page' which will remove the issue for BP, the alternative is we'll have to provide rulesets to overload the WP ones and is slightly hacky although doable!

[hnla]

Cc @r-a-y

[r-a-y]

In 10209:

Add back 'page' and type-page CSS classes on BuddyPress pages.

This fixes issues for the twentysixteen theme not displaying at the
proper width.

We should keep an eye on this to see if other themes are affected by this
change.

Props hnla.

See #6648.

[hnla]

Thanks r-a-y, I'll be sweeping through the twenty* themes checking whether any issues arise from this update.

[hnla]

In 10225:

Twentysixteen Initial Commit.

Commit adds new scss file and compiled .ccs versions to manage BP styles running with the twentysixteen theme.

Adjustments made to update & re-factor breakpoints & a first pass to adjust BP screens for new layout breakpoints.

Check and update for any obvious styling issues across majority of BP screens.

See #6648

[hnla]

In 10244:

Twentysixteen Companion Styles Updates

• Adjust main elements margins for breakpoints and sidebar display, adjust secondary bottom content widgets for margins.
• If sidebar present display BP object nav at default horizontal layout to maximize layout widths.
• Tweak object nav hover small screens.

See #6648

[hnla]

In 10285:

Twentysixteen Companion Styles Updates

• Update nav styles, remove active anchor backgrounds.
• Add mobile menu dropdown.
• Correct nested CSS comments within scss hierarchical selectors preventing ruleset compilation.

See #6648

[hnla]

In 10310:

Twentysixteen Companion Styles Updates

• Update item-lists; member .update & group desc blocks for small screen.

• Update BP search boxes for label/input widths to balance with submit width.

See #6648

[DJPaul]

Real nice work on this, @hnla! Let's open new tickets for future release if we spot issues in the future, or if we have further ideas.