Base RHDS styles

[markcaron]

We going to need to provide some base RHDS styles, similar to what we did with PFE, for basic typography and flow and phrasing content, like:

• lists (basic styles, no bullets, line separators, etc.)
• links
• abbr
• dl

Some of these base styles could be helper classes too.

Potentially included, or perhaps a separate CSS file, could be our layouts. Though this is likely a whole separate topic on its own: is layout a component or simple classes to be applied to any block-level HTML element.

[bennypowers]

Potentially included ... could be our layouts.

Would it be better to supply tokens for grid settings, rather than class names?

[bennypowers]

@dcaryll You brought this up at standup today, so let me expand on the idea...

We should offer CSS grid tokens instead of vending a new <rh-grid> element to take the place of the old <pfe-grid>

PROS: Just using CSS means shipping less javascript, and levels up our developers' platform skills
CONS: It's possible that some use cases might not be so easily able to apply their own CSS rules. We need some requirements discovery on that cc @methomps

[markcaron]

My hope was to have only CSS supply grid and helper classes. This way grid could be more easily applied with no JS. Making a grid web component would be unnecessary and likely a bad idea, IMO.

[dcaryll]

Looking for something similar to Carbon, where we have grid styles available if needed: https://carbondesignsystem.com/guidelines/2x-grid/implementation

Does that go against what we think we should provide? I know JVP had needs for grid styles.

Thinking any team using RHDS is going to need some sort of layout styles. Happy to chat further about the need here.

[markcaron]

Related issues

• [feat] pfe-styles | add primary ordered list styles patternfly/patternfly-elements#1565
• [update] List style spacing, pfe-styles patternfly/patternfly-elements#878

Are these separate components?

[bennypowers]

I'm not opposed to some <rh-listbox> or some such, but for now I think we should just vend spacing tokens and class names for this stuff.

[bennypowers]

update: we have spacer and length tokens in https://npm.im/@rhds/tokens

[bennypowers]

we did get a request for <pfe-menu>

[markcaron]

Bumping this, since we'll need to tackle this situation soon.

I propose 2 separate stylesheets that ship with RHDS:

1. Base styles, which includes basic typography and element formatting (lists, etc.) along with basic anchor/hyperlink styles
2. Layouts, which includes our grid

With Layouts/Grid, we should determine which approach we want to take, and think about potential limitations as well as collect feedback from other teams. A couple approaches I'm thinking about:

• Helper classes for HTML elements (common approach in libraries like Bootstrap)
• Semantic custom elements with attributes