'Related' design effect for WET4 needed

[cfarquharson]

Per the discussions about left menus etc, it came out that we need a 'Related' styled.

The relies mostly on Bootstrap but needs a minor bit of custom CSS:

.wb-related :first-child{margin-top:0;}
.wb-related .btn-link {text-align:left;}
.wb-related h2{font-size:28px;}
.wb-related h2 ~ h3 {font-size:20px;}

We will still use the list-unstyled and the btn btn-link

<div class="well wb-related">
        <h2>Related</h2>
        <h3><span class="fa fa-picture-o text-muted"></span> Design guide </h3>
        <ul class="list-unstyled">
          <li><a href="../design/blockquotes-en.html" class="btn btn-link">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
        </ul>
        <h3><span class="fa fa-wheelchair text-muted"></span> Accessibility guide</h3>
        <ul class="list-unstyled">
          <li><a href="../accessibility/quotations-en.html" class="btn btn-link">Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
        </ul>
      </div>

@pjackson28 if you want to rename .wb-related, to something else, I am good with that @rubinahaddad and @shawnthompson can you confirm this is all good

[shawnthompson]

This is good, you will still put a list of a few links in a row example in the style guide, right?

[cfarquharson]

This is how is would typically appear as most content would not have sub-headings

[shawnthompson]

Now that's what I'm talking about!

[shawnthompson]

If we use .wb-related :first-child{margin-top:0;} that won't work if we use section elements?

<div class="well wb-related">
<section>
        <h2>Related</h2>
        <h3><span class="fa fa-picture-o text-muted"></span> Design guide </h3>
        <ul class="list-unstyled">
          <li><a href="../design/blockquotes-en.html" class="btn btn-link">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
        </ul>
        <h3><span class="fa fa-wheelchair text-muted"></span> Accessibility guide</h3>
        <ul class="list-unstyled">
          <li><a href="../accessibility/quotations-en.html" class="btn btn-link">Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
        </ul>
</section>
      </div>

I know we can add the class wb-related to the section but I can foresee a lot of people struggling with it.

[cfarquharson]

Should we just directly apply it to the H2-h6 instead of :first-child?

[shawnthompson]

I think so… I had that problem with the modules because they were targeting the first-child and if I wanted to add sections or nav elements I couldn’t. Would be nice if you can target the first h*...

[cfarquharson]

Or we could do this

.wb-related :first-child, .wb-related section :first-child {margin-top:0;}

[shawnthompson]

we would have to add every possibility... not sure

[cfarquharson]

Ok, we can target the headings then, so it would be

.wb-related h2,.wb-related h3,.wb-related h4,.wb-related h5,.wb-related h6, {margin-top:0;}
.wb-related .btn-link {text-align:left;}
.wb-related h2{font-size:28px;}
.wb-related h2 ~ h3 {font-size:20px;}

[shawnthompson]

What about first-of-type?

http://www.w3schools.com/cssref/sel_first-of-type.asp

[cfarquharson]

Wouldnt you still have to define each heading 1-6 though...cuz then it is the same amount of CSS

[shawnthompson]

Because the only h# we want to have no top margin on is the first one in the box, right? So we need to find a way to target only that h# and not the other headings in the box..

[cfarquharson]

yeah fair enough. bit first-of-type does not work in IE8. Does that matter?

[shawnthompson]

Aren't we using modernizr? @pjackson28?

[cfarquharson]

I just tried it in my IE8...does NOT work. Works in my Firefox.

[cfarquharson]

@shawnthompson what if we go back to

.wb-related :first-child, .wb-related section :first-child {margin-top:0;}
.wb-related .btn-link {text-align:left;}
.wb-related h2{font-size:28px;}
.wb-related h2 ~ h3 {font-size:20px;}

which covers off the standard likely situations and then if someone has another, they can just put a mrgn-tp-0 manually?

I can`t think of what the other situations would be for a simple aside so this might just be the easiest approach.

[pjackson28]

@cfarquharson @shawnthompson Why would there be an issue with apply the CSS directly to section? Aren't you telling them precisely what markup to use? If not, then you should be. Also, shouldn't we be avoiding redundant markup such as nesting a section within a div?

So we shouldn't be supporting anything other than wb-related being applied directly to the container (in this case section or whatever element you choose). That will keep the CSS and the markup lean.

Also you should use .wb-related > :first-child unless you want to affect the first child of every nested element as well.

As for headings, why do you need to support multiple heading levels? Isn't this supposed to be a standardized section of the page? Why would it be anything other than an h2 within a section or aside element?

[cfarquharson]

@shawnthompson @pjackson28 An aside is contextual to whatever area of the page it's in. For example: http://wet-boew.github.io/wet-boew-styleguide/new/writing/formatting-en.html#blockquotes the aside on blockquotes would be h3's (granted I miscoded them as h2s, but as you can see the main heading is an h2 so these should be h3s.

We certainly not have a wb-related class at all and just rely on Bootstrap/WET core CSS. The only small thing is that all the links would have underlines cuz it the .btn class forced text-align:center and would want left align. Also the .btn was adding some nice padding that a normal link list wont' have.

Do you guys want this coding? It takes no extra coding as it's 100% existing

FOR A SIMPLE STANDARD RELATED BOX:

<div class="well">
  <h2 class="mrgn-tp-0 h3">Related</h2>
  <ul class="list-unstyled">
    <li><a href="../design/blockquotes-en.html">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
     <li><a href="../accessibility/quotations-en.html" >Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
  </ul>
</div>

and THIS FOR A NESTED ONE?

<div class="well">
  <h2 class="mrgn-tp-0 h3">Related</h2>
  <ul class="list-unstyled">
    <li><span class="fa fa-picture-o text-muted"></span> <strong>Design guide</strong>
      <ul class="list-unstyled mrgn-lft-lg mrgn-bttm-md">
        <li><a href="../design/blockquotes-en.html">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
      </ul>
    </li>
    <li><span class="fa fa-wheelchair text-muted"></span> <strong>Accessibility guide</strong>
      <ul class="list-unstyled mrgn-lft-lg">
        <li><a href="../accessibility/quotations-en.html" >Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
      </ul>
    </li>
  </ul>
</div>

[cfarquharson]

Also, per my last comment, we can use the .nav class instead of .list-unstyled as it nicely gives padding to the items and a hover effect:

<div class="well">
        <h2 class="mrgn-tp-0 h3">Related</h2>
        <ul class="nav">
          <li><span class="fa fa-picture-o text-muted"></span> <strong>Design guide</strong>
            <ul class="nav">
              <li><a href="../design/blockquotes-en.html">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
            </ul>
          </li>
          <li class="mrgn-tp-md"><span class="fa fa-wheelchair text-muted"></span> <strong>Accessibility guide</strong>
            <ul class="nav">
              <li><a href="../accessibility/quotations-en.html" >Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="well">
        <h2 class="mrgn-tp-0 h3">Related</h2>
        <ul class="nav">
          <li><a href="../design/blockquotes-en.html">Blockquotes<span class="wb-inv"><span class="wb-inv"> - Design guide</span></span></a></li>
          <li><a href="../accessibility/quotations-en.html" >Quotations and language<span class="wb-inv"> - Accessibility guide</span></a></li>
        </ul>
      </div>

This is the hover effect:

Which should we go with... .nav or .list-unstyled

[cfarquharson]

Opps, closed by mistake. pressed the wrong button

[shawnthompson]

I think we should keep it simple and use .list-unstyled. Giving people the option to use bullets or no bullets and not have to explain what .nav actually does.

[rubinahaddad]

Visually looks good to me :+1: I think we should keep the hover/active/visited states the same as links, since these are basic links as well.

[sviens]

Housekeeping question: can this issue be closed? cc/ @cfarquharson @rubinahaddad @shawnthompson @burgvan

[shawnthompson]

I'm ok to close this, I've changed my way of thinking to use more classes for margin than to modify existing module classes.