Companion Stylesheet - Twentyseventeen

[hnla]

Add a new companion stylesheet addressing any layout issues for the latest WordPress theme twentyseventeen.

This ticket acts a reference point for direct commits relating to the addition of supporting stylesheet & styles to address specific layout issues that may arise between BP and twentyseventeen.

[hnla]

In 11275:

Commit Twentyseventeen companion style sheets

Commit is first pass to add the scss,css files to core.

This commit updates the stylesheet to match to 2017 breakpoints & general styles; Corrects any overly apparent style conflicts; updates our mixins and vars where necessary, & is a fairly rounded pass to improve the look of BP run under 2017.

Subsequent passes will address any further style issues encountered & address some visual styling aspects such as backgrounds, borders that are better removed.

See #7338

[Offereins]

Thanks for taking this up, @hnla! Here's my initial feedback for the pages that I'm looking at now:

• BP increases font-size on the .entry-title page title. This deviates from the global theme layout.
• The page's content column width since breakpoint @ 880 is too wide to my liking. The page title has to wrap because of it.
• Buttons in directory items have stretched 100% width (since breakpoint @ 767). The Profile 'Save Changes'-button is not, for instance. Is that also true for other twenty-* themes?

Small screens (before breakpoint @ 480)

• Page content is always centered, for single items as well as directories (Members, Activity) For page headers that seems okay, but directory content looks off.

PS. Tested with Chrome on my laptop with some screen-resizing for each page.

[hnla]

Thanks @Offereins,

BP increases font-size on the .entry-title page title. This deviates from the global theme layout.

yes I dithered over this as generally I want to follow themes styles as much as possible, on the titles they just looked far too small and just odd, to some extent BP adds unique content and on it's screens I tend to think we take liberties and do what looks best for BP rather than theme but this isn't perhaps best.

I'll re-factor to remove the heading sizes.

The page's content column width since breakpoint @ 880 is too wide to my liking. The page title has to wrap because of it

Hmm I'll check, for major elements I use the themes breakpoints, for granular BP elements I'll use a further set - I'm assuming this for screens where the two column look is set?

I'll check button element for profile save, it may have been by design but also maybe just an element that has yet to be corrected for this theme(not sure about the other themes).

I'll check the smaller screens for directory content, again might just be something not yet addressed.

Thanks for the feedback.

[hnla]

-01 patch addresses points raised by offereins and also adjusts some backgrounds/borders and table styling to lighten elements.

[hnla]

Updated styles.

[hnla]

patch -02 addresses further styling issues between theme styles & BP, removes some styling aspects such as backgrounds, adjusts act stream comments slightly.

Patches iterate on the last one, so only necessary to patch to latest version.

[hnla]

Updates & revisions to styles.

[hnla]

-03 patch adjusts:

• Cover image elements in screens where 2017 theme is set to page-two-column.
• Removes link colurs & removes object nav small screen slide down.
• Adds in the vertical user/group nav for screens not displaying themes two column style page for medium up.

[hnla]

Updates navs, cover image,.

[hnla]

Adjust: search form style, act comment margening & fine tweaks.

[hnla]

Last round of style adjustments.
I'll run patch for .scss file towards end of week, lint and commit.

[Offereins]

I haven't found the time to test yer patches, but I recently stumbled upon the color scheme options in Twenty Seventeen (see Customizer > Colors). @hnla Are you considering to support the Dark color scheme? BP becomes quite unreadable when using the default (light) colors in it.

[hnla]

@Offereins no hadn't really considered this, it's moving right off the original purpose of these corrective styles into a whole different area, just the initial companion sheet ties up a lot of my time.

I'll look at, but it's going to be very perfunctory at best, possibly a few of the global color vars can be adapted to work under classes if 2017 provides them.

[hnla]

@Offereins checking quickly don't see too many issues with the default/light scheme. The dark scheme needs some of the set backgrounds doubled up under the body classes so that they can be flipped in and out other than that as I've been quite careful to inherit or not state colours the majority of BP elements /screens adjust to be white text so overall things aren't too bad.

[hnla]

Add two groupings for 2017 theme color selections

[hnla]

-05 adds two groups to handle the backgrounds & colors set by both companion sheet and BP main styles.

2017 adds two body classes for dark or light theme selection this patch extracts properties to assign to one or other parent class and overrides BP main styles where required.

[hnla]

Further border adjustments for nav items in dark scheme.

[hnla]

Update search form for dark-scheme, additional background adjustments user account settings..

[hnla]

Last adjustments for BP & parent style property overrides

[hnla]

In 11379:

Commit Twentyseventeen companion style sheets

Commit adds final revision for style adjustments including rules to account for dark/light schemes.

Fixes #7338
Props hnla, offereins

[netweb]

Reopening, r11379 doesn't pass the scss-lint tests

See Travis CI job: ​https://travis-ci.org/buddypress/BuddyPress/jobs/190911934

Running "scsslint:core" (scsslint) task
Running scss-lint on core
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2160:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2165:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
src/bp-templates/bp-legacy/css/twentyseventeen.scss:2167:1 [W] Indentation: Line should be indented 3 tabs, but was indented 4 tabs
Warning: Task "scsslint:core" failed. Use --force to continue.
Aborted due to warnings.
The command "grunt $BP_TRAVISCI" exited with 3.

[hnla]

In 11382:

Twentyseventeen scss formatting

Commit corrects some over indented lines.

Fixes #7338
Props netweb

[Offereins]

Reopening because the .colors-dark subset needs some refining on the following parts:

• input field coloring (xprofile)
• list item separation border color
• activity-header border color
• screen-reader-text has defined width

Patch pending.

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

[DJPaul]

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.