Can we standardize how we're using s-notice in the docs site? about stacks HOT 4 CLOSED

I'm not understanding the problem @TedGoas. You can provide some problem examples?

from stacks.

@hellohynes We have a few notice styles. Here's another one from the docs site:

Let's agree we won't use the outline style here anymore. 👍

Looking at the power blue example, here's the code:

<div class="grid ai-start gs4 s-notice s-notice__info mb48">
    <div class="grid--cell mr8">{% svg /resources/svg-icons/Alert.svg width="18" height="18" aria-hidden="true" class="svg-icon iconAlert" %}</div>
    <div class="grid--cell lh-lg">
        <strong>Note:</strong> The <code class="stacks-code bg-powder-200">unset</code> property is a combination property that resets a property to its inherited value. It behaves like the <code class="stacks-code bg-powder-200">inherit</code> and the <code class="stacks-code bg-powder-200">initial</code> keywords, but it properly selects the right value for you. Unfortunately, <code class="stacks-code bg-powder-200">unset</code> is not fully supported in Internet Explorer. Because of this all <code class="stacks-code bg-powder-200">unset</code> values have the correct <code class="stacks-code bg-powder-200">inherit</code> or <code class="stacks-code bg-powder-200">initial</code> value applied.
    </div>
</div>

There's some utility classes in there I think we can remove, or rather, move. Classes like mr8, lh-lg, and bg-powder-200. I'm suggesting we move stuff like this into a higher level class so we don't have to inline style each individual notice.

from stacks.

I don't agree that we should not use outlined style on the Stacks site. It's a Stacks style.

Going through the utility classes…

• You don't need mr8 on grid-cell. Use gs8 on the wrapping grid and you get the same effect
• Add lh-lg to the wrapping s-notice
• Unfortunately if you want to change the background color on stacks-code you will have to apply a different class. What's the problem using the default gray background?

from stacks.

@hellohynes FWIW that isn't my code.

I'm suggesting we standardize the default style because we're currently styling each of them inline and it's not scaling well (I have to redo a bunch of notices that should match but don't).

from stacks.