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

CSS examples: example needed for vertical-align #561

Closed
wbamberg opened this issue Feb 9, 2018 · 10 comments

Comments

@wbamberg
Copy link
Member

commented Feb 9, 2018

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

There are already a couple of examples in the page that could be interactivised:

screen shot 2018-02-08 at 10 04 20 pm

screen shot 2018-02-08 at 10 04 25 pm

The trick is, these are two quite different contexts. Which one should we choose for the example? Which is a more common usage?

@LLyaudet

This comment has been minimized.

Copy link
Contributor

commented Feb 10, 2018

Hello,
I would like to give a try at creating an interactive example for vertical-align.
You asked "Which one should we choose for the example?".
Why not allow to have multiple interactive examples for one page ?
I could create vertical-align.html/vertical-align.css and vertical-align2.html/vertical-align2.css for covering the two contexts.
I have no clue whether it would be complicated to allow multiple examples.

Best regards,
Laurent Lyaudet

@wbamberg

This comment has been minimized.

Copy link
Member Author

commented Feb 10, 2018

@LLyaudet , thanks for offering to have a go!

Why not allow to have multiple interactive examples for one page ?

It's a good idea, but unfortunately, for technical reasons, we can't have >1 example on a page yet. I think we should probably choose the first example here.

@LLyaudet

This comment has been minimized.

Copy link
Contributor

commented Feb 11, 2018

Hello,
I have a problem, I cannot install nodejs on my Debian.
I first installed the Debian package nodejs but it doesn't contain npm and is outdated as it appears when you google it.
Then I purged it and tried to install nodejs from nodejs.org, but the download fails in the middle anytime I try.
I did the code anyway but couldn't test it.
I don't know if it may help you if I send a pull request anyway.
The file star2.png is from https://mdn.mozillademos.org/files/15189/star.png
It is joined to this comment.

Here is my commit log (below the commit log are the texts one-more time so that it is easier to copy-paste if needed):

commit f4f383b5d3c2071c8fff790b905777bc26b70ffa
Author: Laurent Lyaudet <Laurent.Lyaudet@gmail.com>
Date:   Sun Feb 11 14:32:40 2018 +0100

    Added example for vertical-align in text context

diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
index aebd640..0bff617 100644
--- a/live-examples/css-examples/text/meta.json
+++ b/live-examples/css-examples/text/meta.json
@@ -46,6 +46,14 @@
             "title": "CSS Demo: text-transform",
             "type": "css"
         },
+        "vertical-align": {^M
+            "baseTmpl": "tmpl/live-css-tmpl.html",^M
+            "cssExampleSrc": "../../live-examples/css-examples/text/vertical-align.css",^M
+            "exampleCode": "live-examples/css-examples/text/vertical-align.html",^M
+            "fileName": "vertical-align.html",^M
+            "title": "CSS Demo: vertical-align",^M
+            "type": "css"^M
+        },^M
         "white-space": {
             "baseTmpl": "tmpl/live-css-tmpl.html",
             "cssExampleSrc":
diff --git a/live-examples/css-examples/text/vertical-align.css b/live-examples/css-examples/text/vertical-align.css
new file mode 100755
index 0000000..4854760
--- /dev/null
+++ b/live-examples/css-examples/text/vertical-align.css
@@ -0,0 +1,9 @@
+p.starInside {
+  height: 3em;
+  padding: 0 0.5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
diff --git a/live-examples/css-examples/text/vertical-align.html b/live-examples/css-examples/text/vertical-align.html
new file mode 100644
index 0000000..ed42e62
--- /dev/null
+++ b/live-examples/css-examples/text/vertical-align.html
@@ -0,0 +1,79 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
+    <div class="example-choice" initial-choice="true">
+        <pre><code class="language-css">vertical-align: baseline;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: top;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: middle;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: bottom;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: super;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: sub;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: text-top;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: text-bottom;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: 0.2em;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: -1em;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: 20%;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+    <div class="example-choice">
+        <pre><code class="language-css">vertical-align: -100%;</code></pre>
+        <button type="button" class="copy hidden" aria-hidden="true">
+            <span class="visually-hidden">Copy to Clipboard</span>
+        </button>
+    </div>
+</section>
+<div id="output" class="output large hidden">
+    <section id="default-example" class="default-example">
+      <p id="starInside">The following star will align vertically:<img id="example-element" src="/media/examples/star2.png"></p>
+    </section>
+</div>
diff --git a/media/examples/star2.png b/media/examples/star2.png
new file mode 100644
index 0000000..bee01b9
Binary files /dev/null and b/media/examples/star2.png differ

END of commit log

=================
vertical-align.css
=================
p.starInside {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
==================

=================
vertical-align.html
=================
<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
    <div class="example-choice" initial-choice="true">
        <pre><code class="language-css">vertical-align: baseline;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: middle;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: super;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: sub;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: 0.2em;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: -1em;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: 20%;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: -100%;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
</section>
<div id="output" class="output large hidden">
    <section id="default-example" class="default-example">
      <p id="starInside">The following star will align vertically:<img id="example-element" src="/media/examples/star2.png"></p>
    </section>
</div>
==================


=================
meta.json
=================
        "vertical-align": {
            "baseTmpl": "tmpl/live-css-tmpl.html",
            "cssExampleSrc": "../../live-examples/css-examples/text/vertical-align.css",
            "exampleCode": "live-examples/css-examples/text/vertical-align.html",
            "fileName": "vertical-align.html",
            "title": "CSS Demo: vertical-align",
            "type": "css"
        },
=================

Best regards,
Laurent

star2

@LLyaudet

This comment has been minimized.

Copy link
Contributor

commented Feb 11, 2018

Hello,
I found an error by reading my code.
Here is a correction for the css:

=================
vertical-align.css
=================
#starInside {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
==================

Best regards,
Laurent

@wbamberg

This comment has been minimized.

Copy link
Member Author

commented Feb 11, 2018

Hey @LLyaudet . I'm afraid I can't help with your Debian/node issue, but I'll take a look at your example and try to get it into the repo :).

@LLyaudet

This comment has been minimized.

Copy link
Contributor

commented Feb 11, 2018

Hello @wbamberg ,
Good news that you'll try to put it in the repo :).
Let me know when it's done so that I can check in your commit if you corrected something that was wrong with my code.
Best regards,
Laurent

@wbamberg

This comment has been minimized.

Copy link
Member Author

commented Feb 14, 2018

Sorry to be slow getting to this. Thanks for the contribution!

I tried it out. It works well, but a few comments:

  • you have 12 choices here: you should restrict yourself to 6 choices, so choose 6 that are representative of the syntax.

  • I think it works better if the text does not wrap, so I'd choose something shorter, like:

<p id="starInside">Align <img id="example-element" src="/media/examples/star2.png"> the star</p>
  • think the text could be a little bigger, like 1.2em or so.

  • I might be missing something, but I don't think you need most of the styles. I think just this:

p {
    font-family: monospace;
    font-size: 1.2em;
    text-decoration: underline overline;
}

...should work, and then you don't need the id="starInside" either. But like I say, I might be missing something.

@LLyaudet

This comment has been minimized.

Copy link
Contributor

commented Feb 16, 2018

Hello @wbamberg,

Thanks for the feedback.

I chose 6 examples that are representative I think, as you suggested.

I had no idea it would wrap since I didn't knew which width the id="output" div would have.
Can you style the id="output" div also? Or is it fixed by the JS of the framework for interactive-examples?
I shortened the text as you suggested.

Again since I don't know how the framework for interactive-examples works and the styles applied interactively are aimed at the element with id="example-element", I thought that it would be safer to give an id to the paragraph and style it that way. I couldn't know if it would conflict or not with the whole css of the page unless reading the source code of the framework.
From your comment, I assume it is safe to simplify the code.

For the CSS,
margin-left: auto;
margin-right: auto;
width: 80%;
is for centering horizontally the paragraph. Since I don't know how it displays when you test it I assume that it is safe to remove it as you suggested.

height: 3em;
was a mistake I meant "line-height: 3em;" since it helps to see the difference between the examples (top and text-top, etc.).

Here is the code:

=================
vertical-align.html
=================
<section id="example-choice-list" class="example-choice-list large" data-property="vertical-align">
    <div class="example-choice" initial-choice="true">
        <pre><code class="language-css">vertical-align: baseline;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: middle;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: bottom;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: sub;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
    <div class="example-choice">
        <pre><code class="language-css">vertical-align: text-top;</code></pre>
        <button type="button" class="copy hidden" aria-hidden="true">
            <span class="visually-hidden">Copy to Clipboard</span>
        </button>
    </div>
</section>
<div id="output" class="output large hidden">
    <section id="default-example" class="default-example">
      <p>Align the star: <img id="example-element" src="/media/examples/star2.png"></p>
    </section>
</div>
==================

=================
vertical-align.css
=================
p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}
==================

Best regards,
Laurent Lyaudet

@wbamberg

This comment has been minimized.

Copy link
Member Author

commented Feb 21, 2018

@LLyaudet , this looks good! The only problem I can see is that you need 4 spaces indentation for the CSS file.

Could you open a PR with these changes in, so I can review it properly and get it merged? Thanks!

@wbamberg

This comment has been minimized.

Copy link
Member Author

commented Feb 24, 2018

Fixed: #606

@wbamberg wbamberg closed this Feb 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.