Documentation CSS #92

Closed
ashclarke opened this Issue Oct 15, 2012 · 13 comments

Projects

None yet

4 participants

@ashclarke

First off, LoDash is brilliant.

A colleague and I wrote some alternate CSS for the documentation page. We use this in conjunction with style extensions in Chrome.

I am not familiar with the markdown readme file you have in the docs folder, so I am just providing the CSS overrides here (this modifies the footer to be the header, so it isn't semantic, but you'll see what I am trying to achieve).

Let me know what you think!

#docs {
    background: #fff;
}

#docs body {
    width: 100%;
    background: #fff;
    box-shadow: none;
}

#docs body > div:nth-child(2) {
    position: fixed;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    overflow-y: scroll;
    background: #fff;
}

#docs body > div:nth-child(3) {
    position: fixed;
    width: 80%;
    height: 90%;
    bottom: 0;
    top: 80px;
    right: 0;
    left: 384px;
    background: #fff;
    overflow-y: scroll;
}

#docs footer {
    position: fixed;
    top: 0;
    width: 100%;
    height: 47px;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

#docs h3 {
    margin: 24px 0;
    padding: 8px 0 8px 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    border-top: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 1px solid rgba(0, 0,0, .15);
}

#docs div div div {
    margin: 0 0 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .15);
}

#docs pre {
    width: 90%;
    margin: 0 0 24px 40px;
}

Here's a screenshot:

Alternate Documentation CSS

@jdalton
Member
jdalton commented Oct 15, 2012

@ashclarke Thanks! I'll look into incorporating some of this. I dig the TOC on the left and the clearer separation between entries too ;D

@ashclarke

Cool that's great!

With thanks to @adaz too! :)

@adampoczatek

Keep in mind that this will only work in Good Browsers+

@mathiasbynens
Member

This looks great, you guys! Nice work.

The current CSS works in all browsers that Lo-Dash supports, though. I’m not sure if this is much of an issue, though… (Looking at @jdalton and @kitcambridge)

Potential cross-browser issues I see are position: fixed, :nth-child(), and overflow-y. We could avoid the use of :nth-child by adding a classname instead.

@mathiasbynens mathiasbynens reopened this Oct 15, 2012
@jdalton
Member
jdalton commented Oct 15, 2012

@mathiasbynens I'll let you be the judge on CSS and doc support. I think as long as the docs are readable in some way for older browsers it's fine (maybe even a link to the tagged docs in the repo). I wouldn't want to hold your feet to Lo-Dash's tested browsers though (as some are pretty old and less relevant or are on the chopping block as newer browsers are releases). I'd guess that docs are usually read in a more modern browser even if the lib has wider support.

@adampoczatek

Hi guys, @ashclarke and I have written this CSS in less than 10 minutes and it meant to be used in Chrome (Stylebot extension) - hence the lack of support for older browsers.

Let me know if you're actually interested in the new layout, I'm more than happy to come out with something!

@ashclarke

@mathiasbynens

Hi Mathias, agreed on the XBC issues - rules such as nth-child and position: fixed were used because the extension only overrides the CSS. We could achieve a similar effect with named elements, float and overflow: auto.

The use of loose selectors such as div div div aren't something I'd usually include either. Plus having the footer as the header is an interesting take on modern web dev! ;)

@jdalton
Member
jdalton commented Nov 5, 2012

@ashclarke / @adaz Would you all mind tweaking this for IE8 and up support (conditional comments are fine).
Once that's done I'll update the styles on the site.

@ashclarke

Hi @jdalton

How flexible is it to add classes to the elements on the docs page? If I or @adaz make a mockup, with some elements newly classed to suit the changes, would that be ok?

@jdalton
Member
jdalton commented Nov 5, 2012

How flexible is it to add classes to the elements on the docs page?

Pretty flexible. A mockup would be awesome. Thanks!

@jdalton
Member
jdalton commented Nov 17, 2012

I went ahead and implemented a form of this.
@mathias feel free to tweak it when you have time.

@jdalton jdalton closed this Nov 17, 2012
@ashclarke

Sorry @jdalton, I've only just seen your question. Have been super busy over the past couple of weeks.
I have a week off from the 22nd so let me know if you'd like me to look at it still.

Best regards

@jdalton
Member
jdalton commented Nov 18, 2012

@ashclarke

Sorry @jdalton, I've only just seen your question. Have been super busy over the past couple of weeks.
I have a week off from the 22nd so let me know if you'd like me to look at it still.

No worries, you and @adaz did all the leg work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment