Organising sections

[lukebrooker]

Just wondering how the sectioning is currently working? i.e. The h3's in my comments are creating extra sections in the menu but with no content under them.

Good work on this by the way. I do prefer your navigation over Styledocco's and it does seem easier to use in most cases.

Would love the to see the component in iframe functionality that Styledocco has though, as it allows you to see each component in different viewport contexts.

Actually I have a bunch of ideas that I would love to talk to you about haha and I just noticed we are both from Brisbane :)

[thomasdavis]

Hey Luke,

this project has been mostly catered to myself up until nowish. So I'd love to bring on more suggestions and improvements.

The H3 menu items are suppose to become inline page links that scroll you to that section. It might be buggy on different browsers.

By viewport contexts you mean, what it looks like with only the stylesheet in question being applied and not all the sites stylesheets?

Feel free to add me on gmail chat thomasalwyndavis@gmail.com and I'm always on the look out for local Brisbane developers!

[lukebrooker]

Sounds great,

I think what I am trying to do is have sections all within one stylesheet. Say..

/*

styles.css

# Style Guide

## Components // Section

### Buttons

    <a href="#" class="button">Button</a>

/*

.button {
  color: blue;
}

What I am currently doing to try and make it work is:

/*

styles.css

# Style Guide

### Components // Section

## Buttons

    <a href="#" class="button">Button</a>

/*

.button {
  color: blue;
}

But what I think would be ideal would be something like...

/*

styles.css

# Style Guide

@section Components

## Buttons

### Button

    <a href="#" class="button">Button</a>

/*

.button {
  color: blue;
}

/*

### Button Primary

    <a href="#" class="button-primary">Button</a>

*/

.button-primary {
  color: red;
}

Hope that makes sense. I actually split my code into heaps of partials with Sass and then use the single compiled stylesheet to create the Style Guide.

With the viewport context I mean how you can use the icons down the bottom to show different widths: Style Docco Example

And it also allows you to just grab and resize each iframe.

[jameswilson]

I'm also experiencing this behavior where h3's below an h2 are getting pulled up as top-level sidebar navigation.

From what I can tell the model currently works like this:

The h3 simply cannot be used as a sub-section underneath an h2, without being pulled up as an entirely new section in the sidebar.

The layout seems to be the inverse of what it should be:

### <-- an H3, creates new top-level section in sidebar.

## <-- an H2,  creates a second-level section inside an H3 (this is where it starts to get weird)

# <-- an H1, creates a second-level section in the sidebar (same as h2 (##) above just with a slightly larger font. The exception here is the very first "#" on the page, which is also used for the main-top-level sidebar. 

Semantically speaking, this is kind of awkward, and its becoming difficult to work with and structure multiple documents.

[jameswilson]

I guess the simplest proposal, with smalest code impact would be to pull up all H1's into the sidebar as top-level elements (instead of currently used H3). And make H3 just act like H2s with a smaller font size.

[webmaven]

I have this same issue. I worked around it by just adding an actual <h3>, which prevents them from becoming menu items.