Bring back the old layout attribute names ({-sm, -md, -lg})

[gkalpak]

Although the new layout attribute names ({-phone, -tablet etc}) read nice, they are too verbose.
(Especially the -tablet-landscape suffix 😃)

Considering they might have to appear several times in a single element (e.g. to control layout, order, visibility, offset etc in several viewport sizes) it makes the templates way too clattered.

I wonder if there is any particular reason for replacing the old suffixes, which where equally declarative but much more compact and readable. (Maybe there is something I am missing.)

[pandaiolo]

Another quality issue related to these layout modifiers, IMO, even if they do not seem to be implemented yet (#682)

From the docs:

layout-tablet sets the layout on devices >=600px and <960px wide.

layout-tablet-landscape sets the layout on devices >=960px and <1200px wide.

layout-pc sets the layout on devices >=1200px wide.

This setup would force to add all three options for non-mobile layout (>=600px), correct ?
(Also this would triple all non-mobile CSS definition in all components, I guess, which might impact the final payload weight)

The problem I see : In a mobile-first design point of view, the special modifiers are usually needed only for non-mobile devices (as the default layout is mobile)

As a consequence, developers might prefer to design desktop-first by using the shorter layout-phone for mobile layout. The previous behaviour seemed preferable in a sense that the simplest way was the correct, helping developers fall into the pit of success

What about removing the upper bound of media queries ? or just bring back previous behavior, renaming them to *-m, *-l and *-xl for clarity purpose ? (small = mobile = default)

[ThomasBurleson]

@rschmukler - care to respond to @pandaiolo questions?

[rschmukler]

@gkalpak and @pandaiolo the problem is that the queries were not logical to most people.

However, your points are well received. We think we can handle the confusion around these issues by switching layout-sm to layout-gt-sm (gt = greater than).

We can than also keep layout-sm, layout-md, etc to allow people to directly modify things for the upper bound media queries.

As an example <div layout="row" layout-phone="column" layout-tablet="column"> would become <div layout="column" layout-gt-md="row">. At the same time, if people want to do something like <div hide-sm> that is also easy.

To me, this takes the best of both worlds, and clears up the confusion around the existing system. Expect to see changes in the next couple of days.

[epelc]

Does anyone else think the new names using device names aren't very future proof? I prefer the sm md lg because they are just ideas and they can change at any given time to represent something else. But using phone pc tablet seems like it might date it self. I mean two of those would hardly be an option a few years ago.

[pandaiolo]

@rschmukler, that would be nice [to keep unbounded MQ] ! I hope this does not mean too many additional bytes in the css

[jamesspencer]

Came along to say the same thing, glad this has already been hashed out! So...

+1 to unbounded MQs, interested to see how far you go (e.g. layout-gte-md or layout-lt-md etc.)

+1 to moving away from layout-phone and back to layout-sm as mentioned by @epelc

[kpgarrod]

I found the original names confusing at first, but really, once the secret
is revealed, it makes little difference.

If the classes are tied to different screen sizes in pixels, then to be
more future-proof, why not make that explicit? e.g. layout-gt-800,
layout-lt-1200.

Why not define both sets of names on the classes?

On 20 November 2014 15:49, James Spencer notifications@github.com wrote:

Came along to say the same thing, glad this has already been hashed out!
So...

+1 to unbounded MQs, interested to see how far you go (e.g. layout-gte-md
or layout-lt-md etc.)

+1 to moving away from layout-phone and back to layout-sm as mentioned by
@epelc https://github.com/epelc

—
Reply to this email directly or view it on GitHub
#693 (comment).

Keith Garrod

Tel: +27-83-3000-988
Fax: +27-86-5757781

[michaelkrone]

+1 what @epelc said.

I would like to add that device dependend names imply that some kind of device detection is performed. This might be handy, but since the class names apply on viewport width the old md, lg style were "semantically correct" and, like metioned above, future proof.

We might need show/hide-watch classes as well :)

[epelc]

@michaelkrone There are already show/hide classes refer to the chart at the bottom of this page

@kpgarrod I dont think we should use both names that will just cause more confusion, extra css, and make it seem like it wasnt thought out very well. I think we should pick one and go with it. As for adding things like layout-gt-800 I think it'd be better to add a media query directive. So that we could do something like show-media="min-width: 800px" or similar if you really wanted that.

As for going back to the old names. I also agree with @gkalpak that using device names is too verbose. Most apps will have layout related things all over the place going from 2 chars to 4+(except for pc) seems like a waist.

If people are having problems understanding sm,md,lg we can always improve the docs. Maybe we should add some pictures to help convey this or a small demo that shows all the different sizes.

[michaelkrone]

@epelc Yes I know about the show/hide classes, thats why I proposed a show-watch class or layout-watch, which applies for viewports smaller than phone (eg. watches). Was just kidding.

The point is that the new attribute names (as well as the class names) do not fit.
They even do not align with the names used in the spec which reads Mobile Tablet and Desktop, not Phone, Tablet, and PC.
So if device names are used they should align with the wording: http://www.google.com/design/spec/layout/structure.html#structure-ui-regions-guidance

[kpgarrod]

Neither the old nor the new style is future-proof, because changing the
breakpoints in a future release would affect all existing applications.

The implication is that the classes represent specific numbers of pixels
which for practical purposes will be fixed for all time.

However, the number of pixels that a 'small' device or a 'phone' contains
will change over time and the breakpoints we want to use in our
applications may or may not change with them.

A solution may be for the coming online css customizer to allow each of us
to define our own breakpoints to suit our own applications and audience.
On 20 Nov 2014 20:07, "Michael Krone" notifications@github.com wrote:

+1 what @epelc https://github.com/epelc said.

I would like to add that device dependend names imply that some kind of
device detection is performed. This might be handy, but since the class
names apply on viewport width the old md, lg style were "semantically
correct" and, like metioned above, future proof.

We might need show/hide-watch classes as well :)

—
Reply to this email directly or view it on GitHub
#693 (comment).

[gkalpak]

The original issue has been resolved, so closing...