Skip to content
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

Issue #730 - Content Sectioning - header #789

Merged
merged 6 commits into from
Apr 26, 2018

Conversation

a2sheppy
Copy link
Contributor

Added example for the <header> element.

Added example for the `<header>` element.
@welcome
Copy link

welcome bot commented Apr 23, 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.

Copy link
Contributor

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @a2sheppy ! The HTML looks good, with a couple of nits. There are a few formatting nits in the CSS, but also the layout breaks at narrower (but not much narrower) widths.

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

header.pageHeader {
background-color: rgb(200,245,190);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

4-space indent.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spaces after commas: rgb(200, 245, 190);. Also it would be good to choose one of our standard colors: https://mdn.github.io/mdn-fiori/patterns/scss/variables/.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll fix the space after comma thing. I always use them, so I'm stumped as to where they went. :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LOL -- VS Code is automatically fixing all the 4-space tabs I manually create to be 2-space tabs. I really need to figure out how to make this specific project not do that, I guess, if we're going to insist on sticking with this deviation from standards.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@a2sheppy I would suggest you add https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode to VS Code. That will solve this problem. You can set the options for Prettier to only format if a .prettierrc file is present, which would then only apply Prettier for this project.

@@ -0,0 +1,32 @@
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if importing fonts from googleapis might have an effect on performance. Let's ask @schalkneethling :).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Answered on Discourse. I feel that we should rather not for performance reasons to some degree, but also to keep the number of fonts we use low. It also makes review easier, because the fonts available has already been OK'd


header.pageHeader {
background-color: rgb(200,245,190);
border-bottom: 2px solid rgb(90, 150, 90);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above re: standard colors.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to pick colors to blend somewhat with the photo. I assumed stuff like that would be a reasonable deviation from the standard colors (also not mentioned in the HTML contributing doc, btw; they just mention the mdn-fiori style guide, which also doesn't mention standard colors).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The updated PR I will submit later no longer uses these colors but fills the entire header with image.

header.pageHeader {
background-color: rgb(200,245,190);
border-bottom: 2px solid rgb(90, 150, 90);
margin: 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to make no difference, it's 0 anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It made a difference for me. Strange. I'll investigate.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. This one can go. :)

border-bottom: 2px solid rgb(90, 150, 90);
margin: 0;
height: 120px;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This layout breaks at even quite generous widths:
screen shot 2018-04-23 at 1 54 50 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, didn't know we were supposed to have perfected layout given the space constraint. Will adjust it.


main > article > p:first-of-type {
margin-top: 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

File should end with a newline.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did not find a mention of that in the contributing doc. It should be added then.

@@ -0,0 +1,13 @@
<header class="pageHeader">
<img src="/media/examples/puppy-header-logo.jpg">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please confirm that we are allowed to use this image?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are; however, I forgot to include attribution. I will add it as a comment in the CSS.

</header>
<p>Like really, a lot. They're adorable and their ears are so, so snuggly soft!</p>
</article>
</main>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

File should end with a newline.

"exampleCode": "live-examples/html-examples/content-sectioning/header.html",
"cssExampleSrc": "live-examples/html-examples/content-sectioning/css/header.css",
"fileName": "header.html",
"title": "HTML Demo: &lt;header&gt;",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since #777 landed, we don't need to encode < and > any more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Contributor doc needs to be updated then.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please un-encode these characters.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops - thought I saw on IRC that they still needed to be encoded pending a production push, so I left it alone. Fixing it now.

}

header.pageHeader > h1 {
font: bold 42px "Dancing Script", cursive;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wee seem to discourage people from using pixels for font-size: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Pixels

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, this has been informative. I hadn't realized just how much we were trying to make all the things ideal here, rather than focusing on just making the example show the element in question. I will work to make these more adherent to all the things going forward.

@schalkneethling schalkneethling added p1 We will address this soon and will provide capacity from our team for it in the next few releases. in sprint labels Apr 24, 2018
@schalkneethling schalkneethling added this to the Quarter 2 ~ Sprint 2 milestone Apr 24, 2018
This commit corrects the following issues:

* Indentation fixed
* Removed use of background color and the border line.
  instead, the header image is used to fill the entire
  header background
* The Dancing Script font is now local
* Substantial rework of the CSS to optimize as much as
  possible
* Fixed problems with the layout breaking at narrow
  widths
* Shortened up the HTML by getting rid of the fake
  blog post and just having short body text instead
* Added attribution for the background image
background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
height: 120px;
width: 100%;
min-width: 380px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting nit: this looks like 2 spaces and a tab, not 4 spaces.

header.page-header > h1 {
font: bold 3em "Dancing Script", cursive, fantasy;
position: absolute;
width: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting nit: this looks like 2 spaces and a tab, not 4 spaces.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weird. I'll fix these. Not sure how it happened.

width: 100%;
text-align: center;
margin: 0;
bottom: calc(60px - 0.7em);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting nit: this looks like 2 spaces and a tab, not 4 spaces.

they got there but they're fixed.
@wbamberg
Copy link
Contributor

Thanks for the updates @a2sheppy , this looks great. But there are still some issues with the layout I think.

https://developer.mozilla.org/en-US/docs/User:wbamberg/HTML_editor_user_test_pages/datalist shows what the editor will look like in an MDN page. In that page, with a window width of 1440 px, the entire editor gets about 1000px of width, and the output pane gets about 375px.

At that width, the header is overflowing and getting cut off:

screen shot 2018-04-25 at 1 50 26 pm

I think we should aim to have the examples work well at this width.

Of course it's possible that people will have a narrower browser window, and ideally it should work with that, too. The CSS examples switch mode from side-by-side to top-and-bottom with the editor at about 730px, which would give the HTML output window only about 260px. Having the layout work at that width is potentially quite hard to achieve, and if it's not practical then I think it's OK, but we should consider it.

I wonder if we could use flexbox to make the layout more responsive, like:

<header class="page-header">
    <img src='/media/examples/puppy-header-logo.jpg'>
    <h1>Cute Puppies Express!</h1>
</header>

<main>
    <p>I love Beagles <strong>so</strong> much! Like really, a lot.
        They're adorable and their ears are so, so snuggly soft!</p>
    <p>Photo licensed by Wikimedia Commons under the
        <a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en">
        CC-ShareAlike 3.0 Unported license</a></p>
</main>

@font-face {
    font-family: "Dancing Script";
    src: url('/media/examples/DancingScript-Regular.ttf');
}

header.page-header {
    display: flex;
    height: 120px;
    align-items: center;
    color: #fff;
    text-shadow: #000 0 0 0.2em;
    background-color: green;/*or whatever*/
}

header.page-header > h1 {
    font: bold 2em "Dancing Script", cursive, fantasy;
    margin: 2%;
}

header.page-header > img {
    flex: none;
    width: 10em;
}

main {
    font: 1em "Lucida Grande", "Arial", "Helvetica", sans-serif;
}

What do you think? (this also reduces the h1 font size because 3em will never fit)

@a2sheppy
Copy link
Contributor Author

Huh. I tested this thing like crazy and never had it get cut off at all. That's disappointing. Anyway, I was trying to avoid flexbox but agree it's probably the way to go here. I actually don't know why I was trying to avoid it, since it's sort of the "right" way to do this stuff. :)

I'll update and submit a revision shortly.

the size of the header's font so that the text is
scaled between 1em and 3em depending on the window
width. Use a short, wide image as the backdrop. Change
the body to match other examples.

Moved font-face stuff to the end so it's not hogging
valuable space above the fold.
background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
display: flex;
height: 120px;
min-width: 120px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you don't need this line (it's also got a tab in)

@wbamberg
Copy link
Contributor

This works great! r+ with a couple of nits, noted above.

using single quotes. Also outright removed quotes in
a couple of places since they were optional there
anyway.
background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
display: flex;
height: 120px;
min-width: 120px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need this line at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do. Without it, the text escapes the header box at very narrow widths.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What very narrow width? At about 180px, it looks the same with or without this line, and I don't think it is expected to work at narrower widths than this (at this point you are getting 1-2 words per line, so it isn't very usable anyway).

Copy link
Contributor

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @a2sheppy , this looks great!

@wbamberg wbamberg merged commit cc82cbc into mdn:master Apr 26, 2018
@a2sheppy a2sheppy deleted the html-header-element branch April 27, 2018 16:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p1 We will address this soon and will provide capacity from our team for it in the next few releases.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants