I've put together a patch which enhances a few things about the style guide visually:

  • Added cleaner markup. Each section (header/nav/styleguide items) are wrapped in their own div with meaningful classes. Each style guide item is also wrapped in it's own div.
  • Better visual separation. Each style guide item is now completely surrounded by a thin border with ample padding and margins.
  • The navigation has been floated to the left, and the actual style guide floated to the right. This makes things a lot neater, but may require people to turn off sidebars depending on width.
  • Refined all styling of headers, list items, etc.
  • Added "top" links to each style guide block so users can easily jump to the top of the page.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jptaranto’s picture

Status: Active » Needs review
FileSize
5.55 KB
agentrickard’s picture

Can we get a before/after pic, please?

jptaranto’s picture

Here's an after pic anyway.

agentrickard’s picture

I like it, but the reason I didn't do it that way initially was that it changes the layout of the theme. By default, Bartik has a left rail, so not showing it, I think, is deceptive.

But this is certainly open for debate.

jptaranto’s picture

yeah its a tough one. I felt the same way as it does conflict with the theme's layout considerably.

On the other hand though its problematic to layout vertical lists floated left as was the approach before (as they all have different heights it's difficult to get them to line up properly). The list is also a considerable size, and having it laid out horizontally makes it harder to read.

Hence I think a vertical navigation is the right approach. Splitting the page up and applying layout styles isn't necessarily though!

So we could perhaps offer a block that has the menu? So site builders could manually add the block to their page's sidebar? If the block is added to the page then the menu might hide automatically?

I could look into implementing it this way if you'd prefer.

agentrickard’s picture

I don't know, I'm not the active maintainer right now. I was just explaining the trade-offs. We really need imput from themers and designers.

dead_arm’s picture

Let's focus on the menu improvements first since the supported list of elements is growing and we want it to be manageable for users/themers/developers/designers/clients. I like the idea of having a more concise side-by-side pattern, it reminds me of Pears, but I agree that it will be problematic for a lot of themes.

I think we should consider introducing styleguide-specific styling carefully. I'm open to the idea of cleaning up style guide's standalone styling, but one of the huge features of it being stark is for someone to clearly evaluate their theme's coverage of the elements without interference.

The jump to top links are definitely a good idea!

chrisjlee’s picture

FileSize
233.84 KB

I don't think the vertical bar works very well. It's a nice enhancement and it looks nicer though.

I think the best move would be to move the vertical navigation as a block as suggested by #5.

So +1 vertical nav -> block.

E.g. see screenshot attached it breaks down is there's a block in the sidebar already

dead_arm’s picture

Status: Needs review » Needs work

Since discussion is ongoing, I'm marking this needs work.

malcomio’s picture

Issue summary: View changes

I'm not sure about the floated navigation - I think that the module should require minimal changes to other settings.

Back to top links are a great idea though, I've created #2402423: Add "back to top" links to styleguide elements for this.