Layout options - hides

[dainbrump]

Shouldn't the "hide-sm" attribute hide an element when the viewport is less than or equal to the media query dimensions? Currently, hide-sm hides an element when the viewport is greater than the small dimension.

[kpgarrod]

+1
On 11 Nov 2014 18:48, "Mark" notifications@github.com wrote:

Shouldn't the "hide-sm" attribute hide an element WHEN the viewport is
less than or equal to the media query dimensions? Currently, hide-sm hides
an element when the viewport is greater than the small dimension.

—
Reply to this email directly or view it on GitHub
#609.

[mjweaver]

See the comments in #494. Angular Material intends to be mobile-first. So when I design, I start with mobile as the default and work up. The naming conventions follow that approach:

• (no suffix) - as default, applies to smallest devices and up (all devices)
• -sm - applies to small devices (600px) and up
• -md - applies to medium devices (960px) and up
• -lg - applies to large devices (1200px) and up

This is a little different from desktop-first where the default behavior applies to desktops and I work down. This ensures that the web application is completely usable from a mobile device (which has and continues to be overlooked, unfortunately). In this case the hide attribute should be applied (as default behavior) and then block-sm to show on small screens and up. This would force me to think of elements with hide and block-sm as "extra elements" for larger screens that are OK to hide by default.

This confused me at first because mobile screens are small, so I associated -sm with mobile. However, from a mobile-first perspective, I do not categorize mobile since it is default (I should not have to apply special suffixed classes for the default behavior) and "small" should be associated with 600px - 959px.

[PaulMougel]

Note that this is documented and well explained in this video at ngEurope.

[dainbrump]

Makes more sense. It is a little confusing. Translates as "hide this element from small viewports" in my head. Just need to retrain the translator apparently. Thanks.