Issue #730 - Content Sectioning - header #789

a2sheppy · 2018-04-23T17:44:38Z

Added example for the <header> element.

Added example for the `<header>` element.

welcome · 2018-04-23T17:44:40Z

💖 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.

wbamberg

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.

wbamberg · 2018-04-23T20:47:53Z

live-examples/html-examples/content-sectioning/css/header.css

+@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
+
+header.pageHeader {
+  background-color: rgb(200,245,190);


4-space indent.

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/.

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

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.

@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.

wbamberg · 2018-04-23T20:48:37Z

live-examples/html-examples/content-sectioning/css/header.css

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


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

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

wbamberg · 2018-04-23T20:51:52Z

live-examples/html-examples/content-sectioning/css/header.css

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


Same comment as above re: standard colors.

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).

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

wbamberg · 2018-04-23T20:53:54Z

live-examples/html-examples/content-sectioning/css/header.css

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


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

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

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

wbamberg · 2018-04-23T20:55:19Z

live-examples/html-examples/content-sectioning/css/header.css

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


This layout breaks at even quite generous widths:

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

wbamberg · 2018-04-23T20:56:19Z

live-examples/html-examples/content-sectioning/css/header.css

+
+main > article > p:first-of-type {
+  margin-top: 0;
+}


File should end with a newline.

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

wbamberg · 2018-04-23T20:58:01Z

live-examples/html-examples/content-sectioning/header.html

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


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

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

wbamberg · 2018-04-23T20:58:14Z

live-examples/html-examples/content-sectioning/header.html

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


File should end with a newline.

wbamberg · 2018-04-23T20:58:54Z

live-examples/html-examples/content-sectioning/meta.json

+            "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;",


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

Contributor doc needs to be updated then.

Please un-encode these characters.

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.

wbamberg · 2018-04-23T21:02:21Z

live-examples/html-examples/content-sectioning/css/header.css

+}
+
+header.pageHeader > h1 {
+  font: bold 42px "Dancing Script", cursive;


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

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.

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

wbamberg · 2018-04-25T20:59:25Z

live-examples/html-examples/content-sectioning/css/header.css

+    background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
+    height: 120px;
+    width: 100%;
+  	min-width: 380px;


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

wbamberg · 2018-04-25T20:59:30Z

live-examples/html-examples/content-sectioning/css/header.css

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


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

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

wbamberg · 2018-04-25T20:59:35Z

live-examples/html-examples/content-sectioning/css/header.css

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


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

they got there but they're fixed.

wbamberg · 2018-04-25T21:49:17Z

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:

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 · 2018-04-25T22:01:18Z

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.

wbamberg · 2018-04-26T04:06:35Z

live-examples/html-examples/content-sectioning/css/header.css

+    background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
+    display: flex;
+    height: 120px;
+  	min-width: 120px;


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

wbamberg · 2018-04-26T04:09:32Z

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.

wbamberg · 2018-04-26T15:08:07Z

live-examples/html-examples/content-sectioning/css/header.css

+    background: no-repeat left/cover url(/media/examples/puppy-header-logo.jpg);
+    display: flex;
+    height: 120px;
+    min-width: 120px;


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

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

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).

Fixed.

wbamberg

Thanks @a2sheppy , this looks great!

Issue mdn#730 - Content Sectioning - header

7d7910a

Added example for the `<header>` element.

wbamberg requested changes Apr 23, 2018

View reviewed changes

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 added this to the Quarter 2 ~ Sprint 2 milestone Apr 24, 2018

schalkneethling assigned wbamberg Apr 25, 2018

wbamberg reviewed Apr 25, 2018

View reviewed changes

Changed tabs to spaces in header.css. Not sure how

bd7c65d

they got there but they're fixed.

wbamberg reviewed Apr 26, 2018

View reviewed changes

Replaced a stray tab with two spaces, and switched to

4180749

using single quotes. Also outright removed quotes in a couple of places since they were optional there anyway.

wbamberg reviewed Apr 26, 2018

View reviewed changes

Forgot to un-escape <header> in the meta.json file.

82ae5a8

Fixed.

wbamberg approved these changes Apr 26, 2018

View reviewed changes

wbamberg merged commit cc82cbc into mdn:master Apr 26, 2018

a2sheppy deleted the html-header-element branch April 27, 2018 16:03

wbamberg mentioned this pull request May 5, 2018

[HTML Examples] Content sectioning ~ header #730

Closed

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

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

Issue #730 - Content Sectioning - header #789

Issue #730 - Content Sectioning - header #789

Conversation

a2sheppy commented Apr 23, 2018

welcome bot commented Apr 23, 2018

wbamberg left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbamberg commented Apr 25, 2018

a2sheppy commented Apr 25, 2018

Choose a reason for hiding this comment

wbamberg commented Apr 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbamberg left a comment

Choose a reason for hiding this comment