Feedback on the current Styleguide design

[quicksketch]

@dariusgarza has done some amazing work building out the styleguide in this repository. It can be previewed at http://backdrop-ops.github.io/styleguide. This issue is to cover feedback of the current design (not implementation details)

Blocking design issues

Progress Bar backdrop/backdrop-issues#758

• Progress Bar might be a bit too blingy / psychedelic. New color?

Fieldsets backdrop/backdrop-issues#755

• Fieldsets collapsed/collapsible/regular all look the same, thinking collapsed should look particularly 'clickable', as they can be hiding items the user is looking for.
• The color difference between the fieldset labels and the rest of the labels is very subtle - see recommendations

Form elements pt 3 backdrop/backdrop-issues#883

• Buttons look good on their own, but when a primary and secondary button exist at the same time the green-on-hover for the secondary button has a greater feeling of primary-ness than the primary button.

[quicksketch]

Overall looks amazing!

[wesruv]

Adding my two cents, fwiw:

• Blockquote - worried that these styles might get a little cramped on skinny viewports? Pickin' nits though. Maybe a little more width and a teensy less padding?
• This might be too late, but I think the » in the breadcrumbs should be added using CSS pseudo element instead of HTML, since it's presentational content (implementation detail) Moved to implementation ticket.

• Missing styling on quotes? (<q>)
• Ordered lists have more left margin than unordered lists (both should be equal, I prefer the margin amount on ordered lists)
• Can/should we add a subtle row highlight to tables on hover? (e.g. http://www.textfixer.com/tutorials/highlight-table-row.php)
• Increase <blockquote> width to 90%
• Overall size of all headings can be increased (something like 250%, 180%, 130%, 100%, 90%, 80% respectively?)
  -~~ <h6> missing color styling (is grey instead of black like other headings)~~
• Monospace (<code>) font size can be decreased (to 1em?)

BTW, Love! the styling for the pager (nice to finally have decent-sized pager links).

[wesruv]

So I'm chunking out tickets for the implementation step... and got to Dialog... what is this?

[quicksketch]

@jenlampton is working on fixing the broken examples in Styleguide module. I think the dialog is busted because we get a JS error on the page currently. Jen, is that progress being tracked anywhere?

[wesruv]

Feedback from @klonos on fieldsets from backdrop/backdrop-issues#755 (comment)

The color difference between the fieldset labels and the rest of the labels is very subtle. How about we do either of these:

• intent the fieldset contents a tiny bit
• change the label color to look like a link (something clickable)
• move the label over the top border line of the fieldset. like the ones here

[jenlampton]

@wesruv dialogs are the pop-up boxes (modals) that you see, for example, when editing a view. we'll also see them (soon) in the Token UI, when using the Rich-Text editor, and on confirm forms. It's a common UI element used all over backdrop. Sorry it's not working in the styleguide :/

Anyone who wants to work on implementation of the Backdrop admin theme styleguide should start by installing backdrop + and adding the styleguide module. That will give you the correct CSS + JS as a starting point.

At some point it may be worth replacing the markup in this styleguide with the real stuff, but at this point I don't want to loose the actual style here since we are using this as our guide ;)