GH-84 - Modernize CSS

[jhung]

Modernizing CSS of the Design Guide site. This PR addresses the following issues:

• UI Options panel should occupy 100% width of the client #66
• Create a stronger association between the icon shapes and the individual categories in the Design Guide #67
• Fix Design Guide category tabs stacking and hamburger menu transition #70
• Three Dimensions content box on home page should have larger padding and header text size #71
• Hamburger menu should behave like a toggle instead of showing on hover #72
• Text size lacks visual distinction on mobile layout #76
• Import Logos with as svg sprites #80
• Use a disclosure widget for language selection #81

[jobara]

They skip link in mobile is unreadable as it overlaps the UIO button.

[jobara]

For the menu widgets, we didn't implement the up/down arrow keys for moving about the options. Do you think we should do that?

[jobara]

@jhung could you please clean up the Package dependencies it seems that some could be removed, and maybe update the rest to the latest versions.

At least the following could probably be removed:

• sass
• sass-loader
• stylus
• stylus-loader
• docs-core
• jQuery-ui

[jobara]

The contrast themes could use some work. There isn't much visual distinction between the header, navigation, content and footer.

Also the edit on GitHub link and the menu widget options don't have proper focus styling. There isn't any hover styling in the contrast themes either.

[jobara]

There doesn't appear to be any hover focus for the site. Should we add some for the interactive elements?

[jhung]

For the menu widgets, we didn't implement the up/down arrow keys for moving about the options. Do you think we should do that?

Let's file a new issue for that and implement in the future if it's needed.

[jobara]

Do you think it's necessary to set a specific font to display this character in?

[jhung]

Are you thinking we need to do this because of rendering issues? Would using the unicode be safer?

[jobara]

Depending on the font that is applied to that element, the character may look different. Possibly not there at all if it doesn't exist in the font, although that's probably not an issue with the fonts we'd choose.

[jhung]

I'm thinking perhaps we should use an SVG to avoid this issue altogether. Thoughts?

[jobara]

That's an option. Although it'll have to be added in the markup instead of CSS, if you want to make it easily themeable.

[jobara]

The active menu background colour doesn't appear when the contrast themes are applied.

[jobara]

The language menu looks out of place, it might be better if it was lined up with the UIO tab. It might also be nice if these both lined up with the left border of the other content.

[jhung]

The active menu background colour doesn't appear when the contrast themes are applied.

I have filed a feature request to add a no-invert style to child containers (https://issues.fluidproject.org/browse/FLUID-6693).

In the meantime, the fl-inverted-color is being overridden for the menu.

[jhung]

@jobara this is ready for another review. If aren't any outstanding issues, I'm going to prepare to send out an email to get some feedback.

[jobara]

@jhung I think you can ask for feedback now. I believe the only remaining item from my review is the attribution for the icons.

[jobara]

Any empty white box appears on the home page when the Table of Contents is off.

[jhung]

Any empty white box appears on the home page when the Table of Contents is off.

@jobara -This is an interesting quirk with UIO - display: none is only applied to flc-toc-tocContainer after the Table of Contents has been toggled at least once. display: none, or ideally aria-hidden=true, should be on the container by default and toggled accordingly by UIO.

See: https://issues.fluidproject.org/projects/FLUID/issues/FLUID-6696

[jobara]

I think if you want to go a route other than display: none it would be to use the hidden attribute. It also means hide for everyone.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

Although interestingly it seems that setting the display style can override the hidden attribute. Not sure if that is only for inline styles or any setting of display.

[jobara]

Could you pin this to a specific version?

[jhung]

What version should be used?

[jobara]

The focus styling for some elements such as the category links, footer, UIO tab, and links could be improved. In particular some don't provided theme specific contrast styles, and the links in the content are hard to see focus styling for.

[jobara]

Focus styling for breadcrumbs could be improved. At the moment it just appears to remove the underline. This is both with and without the contrast themes.

[jobara]

Focus styling for the UIO tab does not match theme.