New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds h1-h6 example #1180

Merged
merged 4 commits into from Oct 15, 2018

Conversation

Projects
None yet
3 participants
@TremaineNeethling
Contributor

TremaineNeethling commented Oct 12, 2018

This adds the missing h1-h6 interactive example. @wbamberg r?

@welcome

This comment has been minimized.

welcome bot commented Oct 12, 2018

💖 Thanks for opening this pull request! 💖
Here is a list of things that will help get it across the finish line:

  • If this is a new or updated CSS interactive example, please ensure that you followed the CSS styleguide - If this is a new or updated JavaScript interactive example, please ensure that you followed the JavaScript styleguide - If your changes affects any of the steps in our contribution docs, please also make the relevant changes there.
Tremaine Neethling
Adds h1-h6 example
This adds the missing h1-h6 interactive example.

@wbamberg wbamberg self-requested a review Oct 12, 2018

@wbamberg

Thanks for your contribution!

I like the beetle theme and the overall example :) but had a few comments on the contents and on the styling.

Contents

On the contents: I don't think we need h1-h6 and I think including them all makes the example a little unwieldy. I think h1-h4 is enough.

Also the contents doesn't really make sense: "Jurassic" etc are not subheadings of "Etymology" (they are geologic periods) and "Cenozoic" should come after "Cretaceous". Similarly "Pterothorax" is not a subsection of "Mouthparts" and "Prothorax" is not a subsection of "Pterothorax" - they are both subsections of "Thorax".

So I think it would be worth simplifying the contents to something like:

<h1>Beetles</h1>
  <h2>External morphology</h2>
    <h3>Head</h3>
      <h4>Mouthparts</h4>
    <h3>Thorax</h3>
      <h4>Prothorax</h4>
      <h4>Pterothorax</h4>

Styling

On the styling: I think it's not ideal that we only see two headings in the output pane without having to scroll. I think we should reduce the font sizes and margins a bit so they fit. I also think the colors are distracting and make the CSS, which is quite long anyway, even longer. So we could have something like:

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1rem;
}

h1,
h2,
h3,
h4 {
    margin: .3rem 0;
}

I think it would be nice to use font-style: italic to help distinguish some heading levels, rather than just size. I'd be tempted to use some indentation as well:

h1, h2, h3, h4 {
    margin: .3rem 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
    padding-left: 20px;
}

h3 {
    font-size: 1.2rem;
    padding-left: 40px;
}

h4 {
    font-size: 1rem;
    font-style: italic;
    padding-left: 60px;
}

...which would give us an output pane like:

screen shot 2018-10-12 at 2 52 56 pm

(Not sure, maybe the indentation makes it look too much like a table of contents. But it looks nicer this way.)

Please note that although I've quoted some code here to illustrate the points I'm making, you don't have to use this exact code, although you are welcome to if you want. But feel free to adapt it as long as it meets the same criteria: that the content makes sense and the output is reasonably concise.

Tremaine Neethling and others added some commits Oct 15, 2018

Tremaine Neethling
Changes based on review feedback
Thanks for the thorough review, this has been updated.
@wbamberg

Thanks for your contribution @TremaineNeethling !

I just pushed a couple of commits to make the indentation 4 spaces rather than 2. Otherwise this looks great to me.

@wbamberg wbamberg merged commit 0c28b93 into mdn:master Oct 15, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
security/snyk - package.json (schalkneethling) No new issues
Details
@welcome

This comment has been minimized.

welcome bot commented Oct 15, 2018

Congrats on merging your first pull request! 🎉🎉🎉

wbamberg added a commit to wbamberg/interactive-examples that referenced this pull request Oct 16, 2018

Merge remote-tracking branch 'upstream/master'
* upstream/master: (36 commits)
  Adds h1-h6 example (mdn#1180)
  chore(deps): update dependency eslint to v5.7.0 (mdn#1181)
  chore(deps): update dependency ajv to v6.5.4 (mdn#1178)
  chore(deps): pin dependency mdn-bob to 1.1.16 (mdn#1177)
  Removing some folders that was leftover (mdn#1179)
  Issue#1005 web api examples editor (mdn#1142) (mdn#1174)
  chore(deps): update dependency husky to v1.1.1 (mdn#1173)
  chore(deps): update dependency puppeteer to v1.9.0 (mdn#1172)
  Adding an example for the String.toString() method (mdn#1076)
  Adding method for String.valueOf() method (mdn#1078)
  Added an example for String.length (mdn#1080)
  Clarifying Promise.resolve() Example (mdn#1125)
  Remove background from datalist example (mdn#1099)
  Remove background from option example (mdn#1102)
  Removed background image from optgroup (mdn#1101)
  Update <img> to use CC0 image (mdn#1087)
  use `+=` instead of `a = a + x` (mdn#1171)
  chore(deps): update dependency husky to v1.1.0 (mdn#1168)
  chore(deps): update dependency eslint to v5.6.1 (mdn#1167)
  chore(deps): update dependency stylelint to v9.6.0 (mdn#1165)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment