Logical properties #598

rachelandrew · 2018-02-21T17:13:54Z

A set of examples for logical properties. I have tried to keep these consistent with their physical counterpart examples, which I think makes sense, although these need to show the changes in Writing Mode or direction.

wbamberg

Thanks @rachelandrew , really nice work. I had a few comments but they are all minor. The main thing I think is to make sure the choices fit without scrolling.

It is correct that Chrome does not support these, or have any immediate plans to[1]? Caniuse is confusing me: https://caniuse.com/#feat=css-logical-props.

[1] https://www.chromestatus.com/feature/6325742262550528

wbamberg · 2018-02-21T19:47:55Z

live-examples/css-examples/logical-properties/border-block-end-color.html

+        <div id="example-element" class="transition-all">This is a box with a border around it.</div>
+    </section>
+</div>
+


Files should end with a blank line (here and in some of the other HTML files in the PR).

I think they all do end in a blank line

It looks to me like they end with a line containing only 4-spaces, but I don't think it's worth not merging for :).

wbamberg · 2018-02-21T19:50:17Z

live-examples/css-examples/logical-properties/block-size.html

+    <div class="example-choice" initial-choice="true">
+        <pre><code class="language-css">block-size: 150px;
+writing-mode: horizontal-tb;
+        </code></pre>


The leading spaces here are giving us an extra blank line in the example, here and in all, or anyway most, of the HTML files.

wbamberg · 2018-02-21T20:09:56Z

live-examples/css-examples/logical-properties/border-inline-end-color.html

+    <div class="example-choice">
+        <pre><code class="language-css">border-inline-end-color: rgb(170, 50, 220, .6);
+writing-mode: horizontal-tb;
+direction: rtl;</code></pre>


Because this choice is 3 lines, this example (and all the inline ones I think) is going to overflow, which I would like to avoid.

I think I'd suggest only having 3 examples, and dropping the 4th one:

border-inline-end-color: hsl(60, 90%, 50%, .8); writing-mode: vertical-lr;

...which is close enough to the second:

border-inline-end-color: #32a1ce; writing-mode: vertical-rl;

Does that sound OK to you?

yup, I've updated the inline ones accordingly.

wbamberg · 2018-02-21T20:10:59Z

live-examples/css-examples/logical-properties/inline-size.html

+
+<div id="output" class="output large hidden">
+    <section id="default-example" class="default-example">
+      <div id="example-element" class="transition-all">This is a box where you can change the block-size.</div>


Should be inline-size?

wbamberg · 2018-02-21T20:25:06Z

live-examples/css-examples/logical-properties/margin-block.css

+    height: 33.33%;
+    display: inline-block;
+    border: solid #5B6DCD 10px;
+    background-color: rgba(229, 232, 252, 0.6);


Please omit leading zeroes: 0.6 -> .6.

wbamberg · 2018-02-21T20:25:16Z

live-examples/css-examples/logical-properties/margin-block.css

+
+#example-element {
+    border: solid 10px #FFC129;
+    background-color: rgba(255, 244, 219, 0.6);


Also here, please omit leading zeroes: 0.6 -> .6.

wbamberg · 2018-02-21T20:26:04Z

live-examples/css-examples/logical-properties/margin-inline.css

+.col {
+    width: 33.33%;
+    border: solid #5B6DCD 10px;
+    background-color: rgba(229, 232, 252, 0.6);


Also here, please omit leading zeroes: 0.6 -> .6.

wbamberg · 2018-02-21T20:26:09Z

live-examples/css-examples/logical-properties/margin-inline.css

+
+#example-element {
+    border: solid 10px #FFC129;
+    background-color: rgba(255, 244, 219, 0.6);


Also here, please omit leading zeroes: 0.6 -> .6.

wbamberg · 2018-02-21T20:28:35Z

live-examples/css-examples/logical-properties/padding-block-end.html

@@ -0,0 +1,44 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="padding-block-start">


This should be padding-block-end.

rachelandrew · 2018-02-22T06:51:35Z

Made a bunch of updates to address the requests. Chrome doesn't support these yet, would be good to apply some encouragement there, as having to use the physical properties with writing modes is horrible.

Also, some of the nits (leading zeros and so on) were values copied over from the physical examples which are a bit untidy compared to the new ones. I might do a round of tidying up at some point to make things consistent.

wbamberg · 2018-02-22T23:03:11Z

Thanks @rachelandrew , for these updates! They look really good, and I appreciate the consistency with the physical properties.

Also, some of the nits (leading zeros and so on) were values copied over from the physical examples which are a bit untidy compared to the new ones. I might do a round of tidying up at some point to make things consistent.

Sorry about that. I've not been very consistent in picking these things up. I know Schalk has plans to have these things linted automatically, which will be great.

I might do a round of tidying up at some point to make things consistent.

That would be awesome. Maybe it would be worth waiting until we have linting, then it can find the places to update?

wbamberg

Thanks @rachelandrew , this is a really nice set of examples.

wbamberg · 2018-02-22T23:11:06Z

live-examples/css-examples/logical-properties/border-block-end-color.html

+        <div id="example-element" class="transition-all">This is a box with a border around it.</div>
+    </section>
+</div>
+


It looks to me like they end with a line containing only 4-spaces, but I don't think it's worth not merging for :).

…tical-align * upstream/master: Logical properties (mdn#598) Revert "Adds next iteration of the HTML interactive editor (mdn#576)" (mdn#605)

rachelandrew added 11 commits February 1, 2018 10:13

flex-wrap example

71cc0e2

fixing missing semi-colons

c429bb8

Merge remote-tracking branch 'upstream/master'

fd58b58

updates to flexbox example to fix issues

53bb046

merging

a1cdc92

merging upstreamMerge remote-tracking branch 'upstream/master'

44d546a

merging upstream changesMerge remote-tracking branch 'upstream/master'

e2b74fc

merge upstreamMerge remote-tracking branch 'upstream/master'

253559a

merge upstreamMerge remote-tracking branch 'upstream/master'

e0793c1

merging masterMerge remote-tracking branch 'upstream/master'

c4cf08e

logical properties examples

5b0d9b8

wbamberg suggested changes Feb 21, 2018

View reviewed changes

requested changes to PR

efcdd49

wbamberg approved these changes Feb 22, 2018

View reviewed changes

wbamberg merged commit 1b556d9 into mdn:master Feb 22, 2018

		@@ -0,0 +1,44 @@
		<section id="example-choice-list" class="example-choice-list large" data-property="padding-block-start">

Logical properties #598

Logical properties #598

Uh oh!

Conversation

rachelandrew commented Feb 21, 2018

Uh oh!

wbamberg left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rachelandrew commented Feb 22, 2018

Uh oh!

wbamberg commented Feb 22, 2018

Uh oh!

wbamberg left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants