Content unordered/ordered list

[nicdford]

UL/OL need to be able to both function with and without the wsu- design system prefix. To accomplish this the proposed plan is to have a "utility" class that can be thrown onto any ul/ol to provide the wsu styles. Something like.... wsu-u-list and wsu-u-list-item.

<ul class="wsu-u-list">
    <li class="wsu-u-list-item">...</li>
    <li class="wsu-u-list-item">...</li>
    <li class="wsu-u-list-item">...</li>
</ul>

The second option, designed to work more with wysiwyg's and/or more generic third-party templating is to provide a wrapper class that styles children elements beneath it... wsu-u-content-styles which could include ul, li, h1-h6, block qoutes, etc. (for the scope of this issue though, will only include ul/ol/li styles inherited from that wrapper class).

<div class="wsu-u-content-styles">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

[RyanSavage]

Are these more baseline styles, or optional styles to provide different options?

If they are baseline styles, could you setup a "baseline" component that would hold all of those styling elements directly on the html element ans skip the CSS class?

Ex: https://designsystem.digital.gov/components/typography/

[nicdford]

@RyanSavage at the moment, for lists, these act as baseline styles. I think with regards to skipping css classes on each, wsu-u-content-styles could in theory be put on a body class and then the elements on the whole page could inherit from it as it's "baseline" styles, is that what you're thinking? We just need to scope the styles somewhere in the document to ensure our styles get applied correctly. We're really just trying to avoid having conflicting styles and/or override from third-party systems that might interact with the same elements (and vice versa). This gives a couple different ways to interact with elements/css at different specificity levels to help make sure we can avoid using !important on things as much as possible too.

[RyanSavage]

Ah, ok. I wasn’t thinking about 3rd party stuff squashing styles. I personally don’t want to deal with putting a class or wrapper on/around each ol/ul so the idea of wsu-u-content-styles on a body/main/article type tag seems reasonable to me if that gets us to the end goal.

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Nic Ford notifications@github.com Sent: Monday, November 4, 2019 4:24:41 PM To: washingtonstateuniversity/wsu-web-design-system wsu-web-design-system@noreply.github.com Cc: Savage, Ryan ryan.savage@wsu.edu; Mention mention@noreply.github.com Subject: Re: [washingtonstateuniversity/wsu-web-design-system] Unordered/ordered list component (#9)

@RyanSavagehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_RyanSavage&d=DwMFaQ&c=C3yme8gMkxg_ihJNXS06ZyWk4EJm8LdrrvxQb-Je7sw&r=SNlBapC8rsoXyKo1pMFEzDN1314nz_cnkeovtCdzpLA&m=b2CNZtwXG-hL9QKQpZpg6LcnwBhuTMU7R2O_RJPXCbU&s=30le0n_dZj3l9SiQAu4hBWyvqaXnsNlH9oGxOf71uSg&e= at the moment, for lists, these act as baseline styles. I think with regards to skipping css classes on each,wsu-u-content-styles could in theory be put on a body class and then the elements on the whole page could inherit from it as it's "baseline" styles, is that what you're thinking? We just need to scope the styles somewhere in the document to ensure our styles get applied correctly. We're really just trying to avoid is having conflicting styles and/or override from third-party systems that might interact with the same elements (and vice versa). This gives a couple different ways to interact with elements/css at different specificity levels to help make sure we can avoid using !important on things as much as possible too.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_washingtonstateuniversity_wsu-2Dweb-2Ddesign-2Dsystem_issues_9-3Femail-5Fsource-3Dnotifications-26email-5Ftoken-3DAB26H3T4HE7HLG5BYSWFU2DQSC4MTA5CNFSM4JI2JPKKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDBFVRI-23issuecomment-2D549608133&d=DwMFaQ&c=C3yme8gMkxg_ihJNXS06ZyWk4EJm8LdrrvxQb-Je7sw&r=SNlBapC8rsoXyKo1pMFEzDN1314nz_cnkeovtCdzpLA&m=b2CNZtwXG-hL9QKQpZpg6LcnwBhuTMU7R2O_RJPXCbU&s=Vv2UGyByhMSU_qVlR-XJ6R5zH-hXoBXXbXwSTtsEouQ&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AB26H3TDWMZBD223T6UE5MDQSC4MTANCNFSM4JI2JPKA&d=DwMFaQ&c=C3yme8gMkxg_ihJNXS06ZyWk4EJm8LdrrvxQb-Je7sw&r=SNlBapC8rsoXyKo1pMFEzDN1314nz_cnkeovtCdzpLA&m=b2CNZtwXG-hL9QKQpZpg6LcnwBhuTMU7R2O_RJPXCbU&s=7-X3naKnXfKzWj9wLl8RyQcaHz7hvkfODjyLd1FTftI&e=.

[nicdford]

Oh that's actually a great idea. We're currently thinking we're going have a few different "packages" that offer different use-cases and using it in a closed environment that we know won't interfere with the styles (Umbraco for instance) we could then make some safe assumptions to help make things as easy as possible to work with the design system.

[nicdford]

Closed by #40

[nicdford]

Discussion relates to #41

[nicdford]

Reopen issue to serve as parent issue for further content list development.