add css font-size examples #567

benji1304 · 2018-02-09T15:17:37Z

As per this issue
#563

welcome · 2018-02-09T15:17: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.

benji1304 · 2018-02-09T17:02:41Z

c3b37aa for issue #566 as discussed.

Hope this is getting better.

wbamberg

Thanks for your contribution @benji1304 !

Looks good, just a couple of minor comments.

Also, all the example sizes are on the small side - maybe make 1em->1.2em?

wbamberg · 2018-02-09T16:54:42Z

live-examples/css-examples/fonts/font-size.html

@@ -0,0 +1,43 @@
+<section id="example-choice-list" class="example-choice-list" data-property="font-size">
+<div class="example-choice" initial-choice="true">


You should only have (at most) one initial-choice="true" value - it should select the choice that's selected by default. If you omit it, you just get the first choice selected by default, and that's probably fine in this example.

wbamberg · 2018-02-09T18:34:21Z

live-examples/css-examples/fonts/meta.json

            "title": "CSS Demo: font-weight",
            "type": "css"
+        },
+        "font-size": {


This should be camel-cased - fontSize - and appear in alphabetical order in meta.json.

benji1304 · 2018-02-09T19:21:16Z

Sure, sounds good. I'll take a look asap and update.

wbamberg · 2018-02-09T19:46:34Z

Sorry, I didn't see you had the updates for color as well. I'll review that now.

wbamberg · 2018-02-09T19:59:09Z

A couple of minor comments on color, neither of which you introduced, so it seems a little unfair to complain about :)

coding style is to omit the leading 0 before a period, so color: hsla(30, 100%, 50%, .3); not color: hsla(30, 100%, 50%, 0.3);. We don't AFAIK have this documented anywhere :(
the rgb value looks almost black, you might want to consider something a bit more obviously different.

Also I just realised that opacity has a name-collision with the opacity() function, but this is not your problem :).

benji1304 · 2018-02-12T10:32:04Z

@wbamberg new PR on here with the fixes for color and font-size

wbamberg

Thanks for the updates @benji1304 ! Just a couple more comments.

wbamberg · 2018-02-12T17:05:45Z

live-examples/css-examples/fonts/font-size.html

 </div>  

-<div class="example-choice" initial-choice="true">
+<div class="example-choice"></div>


You have a rogue </div> here that's breaking the layout...

wbamberg · 2018-02-12T17:06:22Z

live-examples/css-examples/fonts/meta.json

            "type": "css"
        },
-        "font-size": {
+        "fontSize": {


This should appear in alphabetical order (after fontFamily).

benji1304 · 2018-02-13T14:39:22Z

550d515 with updates

wbamberg

Looks great, @benji1304. Thanks for your contribution!

welcome · 2018-02-13T22:14:33Z

Congrats on merging your first pull request! 🎉🎉🎉

wbamberg · 2018-02-14T00:31:26Z

I've updated the MDN pages:
https://developer.mozilla.org/en-US/docs/Web/CSS/color
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
:)

add css font-size examples

66606fb

updated color css examples and example text in opacity.html

c3b37aa

wbamberg suggested changes Feb 9, 2018

View reviewed changes

wbamberg mentioned this pull request Feb 9, 2018

Use prefixes for functions and types #568

Merged

fixes for color font-size

9341f3e

wbamberg suggested changes Feb 12, 2018

View reviewed changes

updated font-size.html and meta.json

550d515

Remove empty line from meta.json

4b52097

wbamberg approved these changes Feb 13, 2018

View reviewed changes

wbamberg merged commit a0bba7f into mdn:master Feb 13, 2018

This was referenced Feb 14, 2018

CSS examples: example needed for color #566

Closed

CSS examples: examples needed for font-size #563

Closed

		@@ -0,0 +1,43 @@
		<section id="example-choice-list" class="example-choice-list" data-property="font-size">
		<div class="example-choice" initial-choice="true">

add css font-size examples #567

add css font-size examples #567

Uh oh!

Conversation

benji1304 commented Feb 9, 2018

Uh oh!

welcome bot commented Feb 9, 2018

Uh oh!

benji1304 commented Feb 9, 2018

Uh oh!

wbamberg left a comment

Choose a reason for hiding this comment

Uh oh!

wbamberg Feb 9, 2018

Choose a reason for hiding this comment

Uh oh!

wbamberg Feb 9, 2018

Choose a reason for hiding this comment

Uh oh!

benji1304 commented Feb 9, 2018

Uh oh!

wbamberg commented Feb 9, 2018

Uh oh!

wbamberg commented Feb 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benji1304 commented Feb 12, 2018

Uh oh!

wbamberg left a comment

Choose a reason for hiding this comment

Uh oh!

wbamberg Feb 12, 2018

Choose a reason for hiding this comment

Uh oh!

wbamberg Feb 12, 2018

Choose a reason for hiding this comment

Uh oh!

benji1304 commented Feb 13, 2018

Uh oh!

wbamberg left a comment

Choose a reason for hiding this comment

Uh oh!

welcome bot commented Feb 13, 2018

Uh oh!

wbamberg commented Feb 14, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

wbamberg commented Feb 9, 2018 •

edited

Loading