sidebar

[acivitillo]

What would be the right way to add a sidebar to this? I find this css refreshing and clean for docs, but docs should have a sidebar.

I think

could be used? But then I wonder how to work with the grid layout to add this.

[ghoshriju33]

My best bet would be to use aside and main as only two childs of body. Then using either flex or grid on body to make them appear as two columns.

[acivitillo]

I am trying that approach: https://gist.github.com/acivitillo/aededad3d5fc4c659a6eae2c6891defc

But I am struggling with making the header full width and getting the sidebar margin-right to work. Currently it sort of works but the sidebar should be a bit further away from the content.

[3x]

Honestly, a sidebar was never considered, but if anyone can find a good way to implement one with the <aside> element, I'd be more than happy to merge. It would have to be saved for 2.0.0 though, as it is a breaking change with an existing element.

It's currently planned for 2.0.0 to use the <section> element as a "card" element, so I'd recommend doing as much as you can with the <aside> element alone. I will be adding a better roadmap so upcoming breaking changes are clear.

Leaving issue open in case anyone makes a good sidebar element.

[acivitillo]

I think the problem is what to do with the body element. I have managed to create a sidebar with aside and main, but I had to change body too.

[hunzaboy]

@acivitillo : I palyed around with your gist. https://codepen.io/hunzaboy/pen/vYNMzrv can help with your issue.

[acivitillo]

@hunzaboy great thanks! I have added a center element for the header:

https://codepen.io/acivitillo/pen/QWjPJKB

It would be nice for the header to align to the content column but I wasn't able to do that. Center is an ok workaround.

[jegadeessa]

@acivitillo Is this issue still exists that header is not aligned to the content column

[ghost]

Here's my attempt - https://codepen.io/xcartmods/pen/qBbrWWb

[acivitillo]

@xcartmods I think your solution is close, I would add margin left and top and review the background color. Overall your idea to move the sidebar to the right makes much more sense. @jegadeessa I think @xcartmods solutions is close to complete.

[ghost]

As it's flexbox, you can change the order of the columns, but as we're only using one element for main and aside, padding them out's a bit tricky :) Not so bad though...

https://codepen.io/xcartmods/pen/BajZGmq