pure-hidden-* removed but not documented

[SimonSteinberger]

Looks like the helper classes pure-hidden-phone, pure-hidden-tablet and pure-hidden-dekstop appear to be removed - which should be mentioned in the release notes ... I guess :) Or is it a bug in the RC1?

[hmaesta]

Duplicated from #324.

Ps: I don't think this should be removed. ):

[BigBlueHat]

@hmaesta from what I can tell they were removed in favor of the hidden HTML5 attribute. The conditional hiding of elements would then be handled by the responsive CSS statements.

[hmaesta]

@BigBlueHat Thank you for you answer. It's nice to know! 👍

[SimonSteinberger]

Is there a documentation on how that works? Right now I don't know what you mean ...

[BigBlueHat]

@nasmon basically, you'd have to have more selective selectors: hiding/showing in the various @media sections for your selectors. hidden could be used for the default display: none scenarios...but you'd still need to set your own selectors for hiding/showing in the various contexts...

It would be much simpler to have ye olde pure-hidden-* selectors.

Maybe someone on the Pure team can enlighten us for real? /me is (mostly) guessing/filling-in-blanks.

@ericf @tilomitra?

[HelloLudger]

While I support the decision to deprecate classes like pure-hidden-phone, I think the new grid-keys call for a replacement in the style of

pure-hidden-sd
pure-hidden-md
pure-hidden-lg
pure-hidden-xl

The grid builder could, and should, create thoses classes automatically.

[tilomitra]

@HelloLudger That's a good suggestion. @ericf, what do you think about that?

[hmaesta]

+1 👍

[SimonSteinberger]

Like it :-)

[BigBlueHat]

👍

[ericf]

In general, I would not advise that people content from people using a certain class of device or window size. Could sometime provide a real-world concrete use-case for this feature?

I would like to understand how onerous this would be for people to add these rules to their app's stylesheet. And also where the limit it, i.e. how many other features like this could we see bloating the tooling before people just write Media Queries in their app's CSS.

[lkraav]

I've definitely found use cases.

Menu items are occasionally hidden from smaller devices, since you want them to focus on the more important ones.

There's also conditions where it makes sense to have a different element order for certain media queries, such as the sidebar. Sometimes you want to show the sidebar first on the mobile. So technically sidebar could be output on the screen twice, before and after main content, each one hidden and shown for a certain width.

I guess it's also possible to do such magic via DOM manipulation. Haven't reached a definitive view which makes more sense, yet.

[SimonSteinberger]

I don't think it's big thing to add these classes manually where needed. On the other hand, I usually always need them when building responsive sites. E.g. in a typical main menu that collapses on smaller devices, I want certain items to disappear. Those items may show up somewhere else then, maybe the footer where's enough space.

Am I doing something wrong/unusual here or is it common practice? I guess that's your question ...

[ Edit: @lkraav, we posted basically in the same second with the same use case, lol ]

[ericf]

Someone should feel free to open an issue or PR on the rework-pure-grids repo for this. The option can be added how the other options are processed.

[bgarrant]

So how can I hide an element on the mobile version then if pure-hidden-phone has been removed?

[hmaesta]

If you really need this, you can do by yourself...

Pure 0.4.2 code of this function:

@media (min-width:980px){
    .pure-visible-phone{display:none}
    .pure-visible-tablet{display:none}
    .pure-hidden-desktop{display:none}
}
@media (max-width:767px){
    .pure-hidden-phone{display:none}
    .pure-visible-desktop{display:none}
}
@media (min-width:768px) and (max-width:979px){
    .pure-hidden-tablet{display:none}
    .pure-visible-desktop{display:none}
}

[bgarrant]

awesome. do you know how can I adjust them for the new media queries so that we can use:

pure-hidden-sd
pure-hidden-md
pure-hidden-lg
pure-hidden-xl

[hmaesta]

You can update the @media like the values below.

key	CSS Media Query	Applies	Classname
sm	@media screen and (min-width: 35.5em)	≥ 568px	.pure-u-sm-*
md	@media screen and (min-width: 48em)	≥ 768px	.pure-u-md-*
lg	@media screen and (min-width: 64em)	≥ 1024px	.pure-u-lg-*
xl	@media screen and (min-width: 80em)	≥ 1280px	.pure-u-xl-*

from http://purecss.io/grids/ - 0.5

(It's manual work, just replace/adjust the values and try it. I am not on my work computer to try if the code is working, so I prefer to not give you wrong answers.)

[bgarrant]

In case anyone is looking, I think this is correct. Add this to your stylesheet. If not, please let me know.

/* pure-hidden-xs */
@media screen and (max-width:567px) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}

[bgarrant]

Here is the em equivalent in case anyone needs it:

/* em pure-hidden values */

/* pure-hidden-xs */
@media screen and (max-width:35.438em) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:80em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}

[lewisjenkins]

@bgarrant Thanks for posting the hidden classes. I'm missing these in 0.5 and hope they eventually get included again. They are far too useful when building responsive sites.

Although, I think the correct spelling is visible rather than visable :)

[bgarrant]

Yeah I missed that one. These work well though. Hope they add it back to the core.

[ericf]

This is "up for grabs", whoever is feel up for making this change, the rework-pure-grids tool's repo is the place to do it.

[binaryoung]

+1 Hope add it back to the core.

[everyx]

Back to the core +1, it's userful.

[chibicode]

The lack of documentation hit me hard too :(

.pure-g-r img also was removed, and although .pure-img was documented, the removal itself wasn't documented. (Related: #337)

Instead of grepping all image tags and adding pure-img, I just resorted to what InuitCSS did:
https://github.com/inuitcss/base.images/blob/c6fe0243793dcf09dbfa8e33596d21b9f0b924e6/_base.images.scss#L12

[kernc]

👍

What about pure-u-0, pure-u-sm-0, ...? At least it doesn't break the mental model invariant that widths are specified as fractions. And the required additional code is minimal.

@BigBlueHat favoring the the HTML5 hidden attribute doesn't work with Pure.

<div hidden class="pure-u-md-1">...</div>

This doesn't work precisely only because Pure sets [hidden] elements display: none !important. Which certainly has its merits. But @ericf was right in expressing his doubts, obviously.

Bootstrap supports @media-dependent hiding out-of-the-box, Zurb Foundation supports it; how, honestly, can Pure ever allow itself not to?

[jamesalley]

While classifying devices as phone, tablet, etc. seems a bit old-fashioned at this point, it seems like doing this with a sm-md-lg-xl implementation would be welcome. I'm keeping this open and will consider adding this in to Pure.

[boris-chervenkov]

@bgarrant Thank you for this snippet - I don't understand why such feature was removed from Pure :o)
I stumbled upon an issue with this, while trying to hide/show some pure-menu-horizontal items:

<nav class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li class="pure-menu-selected"><a href="#" class="">Item 1</a></li>
        <li class="pure-hidden-xs"><a href="#" class="">Item 2 with long text</a></li>
        <li class=""><a href="#" class="">Item 3</a></li>
    </ul>
</nav>

"Item 2 ..." was not getting hidden. As it turns out, there's a rule in Pure that sets the display to inline-block:

.pure-menu-horizontal li {
    display: inline-block;
    . . . 
}

and since its CSS selector is more specific, it overrides "pure-hidden-??" classes. I had to add !important to all rules in your snippet - ugly, but it worked.

[jamesalley]

@boris-chervenkov Have a look at http://stage.purecss.io to see the latest version of Pure in release candidate form. The Menus construct has been totally revised. No more high-specificity selectors such as .pure-menu > li > a, which were difficult to override. The new Menus use much flatter, low-specificity selectors designed to make it much easier to customize or override. I hope you like it. I wonder if they will allow the responsive hidden class to take effect?

[ghost]

Conditional hiding based on media queries is absolutely basic functionality for a CSS framework that support building responsive sites.

I know that we can implement it ourselves, but then again it makes sense for you to support this given that there is and going to be a huge demand for it.

Could this be part of 0.6, please?

[rob2d]

2nd-ed. Rewriting media queries for something as basic as hiding on specific device generalized views (e.g. md, lg) sort of eliminates the point of using a library like PureCSS.

[PixelPotts]

It seems like this hasn't been resolved yet? It's hard to do mobile-first development when you can't hide non-mobile elements. This is certainly core functionality.

[wkoszek]

@jamesalley @ericf I'm trying to understand how people develop for mobile with PureCSS without an ability to hide stuff. I have [1: mobile menu on top][2: big textarea][3: wide menu pane on right for desktop].

For desktop: I need to show 2+3, hide 1.

For mobile: I need to show 1+2, hide 3.

How do you do this now?

[redonkulus]

@wkoszek responsive grids gives you the ability to alter the size of the containers but does not allow you to hide them today.

Even without this ability, you could use your server side code to remove the container that is not needed. For example, for mobile, instead of hiding 3, don't return the markup. This also gives the added benefit of reducing the markup size and bandwidth costs for the user.

[redonkulus]

Please reopen or respond if needed.

[janzikmund]

@bgarrant thanks for the snippet, it just has issues if you add more visible classes to the same element, eg. if you want to display it for both xl and lg. I have it fixed like this:

/* pure-hidden-xs */
@media screen and (max-width:567px) {
    .pure-visible-sm:not(.pure-visible-xs){display:none}
    .pure-visible-md:not(.pure-visible-xs){display:none}
    .pure-visible-lg:not(.pure-visible-xs){display:none}
    .pure-visible-xl:not(.pure-visible-xs){display:none}
    .pure-hidden-xs {display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
    .pure-visible-xs:not(.pure-visible-sm){display:none}
    .pure-visible-md:not(.pure-visible-sm){display:none}
    .pure-visible-lg:not(.pure-visible-sm){display:none}
    .pure-visible-xl:not(.pure-visible-sm){display:none}
    .pure-hidden-sm {display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
    .pure-visible-xs:not(.pure-visible-md){display:none}
    .pure-visible-sm:not(.pure-visible-md){display:none}
    .pure-visible-lg:not(.pure-visible-md){display:none}
    .pure-visible-xl:not(.pure-visible-md){display:none}
    .pure-hidden-md {display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
    .pure-visible-xs:not(.pure-visible-lg){display:none}
    .pure-visible-sm:not(.pure-visible-lg){display:none}
    .pure-visible-md:not(.pure-visible-lg){display:none}
    .pure-visible-xl:not(.pure-visible-lg) {display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    .pure-visible-xs:not(.pure-visible-xl){display:none}
    .pure-visible-sm:not(.pure-visible-xl){display:none}
    .pure-visible-md:not(.pure-visible-xl){display:none}
    .pure-visible-lg:not(.pure-visible-xl){display:none}
    .pure-hidden-xl{display:none}
}

[wkoszek]

@redonkulus Hi. Just replying after a while, because @janzikmund snippet showed up in my mailbox as a GitHub notification. The snippet from above should be a part of the main framework. I think it'd make PureCSS easier to use and more successful. IMO nobody wants to modify the server-side to hide HTML stuff. This is what CSS is for. For static pages deployed in a server-less there's no solution right now with PureCSS. I think that's the reason for 4 thumbs down above. I agree with @pottspotts

[tererero]

@redonkulus I concur with everyone here, this feature is essential because a CSS framework should expect no backend to render a static website in a responsive (mobile and desktop) mode on every screen size.

[redonkulus]

I agree that a CSS framework shouldn't care how the markup is delivered. However, I do believe desktop related markup for a mobile device should not be delivered; its just a waste of bytes sent for the user.

Anyways, the PR to support .pure-u-0 is still open, I haven't tested it or reviewed it. If someone wants to test it out to ensure it works with Pure, please do. If everything is ok, I can merge it in.

[wkoszek]

@redonkulus You waste some bytes, but often that's the design choice. It's a small price to pay for being able to deploy to GitHub Pages, which is 100% static, without any server side elements. But even with the server side element, I don't know how that would work. You'd send a resolution of the client to an API HTTP endpoint? Not really. It's just that the client has a layout engine and all the "view" data, and it's where the view must be rendered.

I've looked at 4 pending pull requests here. I can't see the one you're mentioning. If you need tester, I can volunteer, and maybe so do @tererero @janzikmund @kernc @scottadamsmith and others here.

[redonkulus]

@wkoszek The PR I mentioned was pure-css/rework-pure-grids#10. I'm not familiar with that code, so if anyone else wants to pull it down and test it with pure, that would help a lot.

[rob2d]

Is this project still actively maintained?

This was a great library a few years ago when there weren't really good cross-browser solutions available e.g. flex, and I rarely feel the need to say something negative on an open source project but: a company-backed CSS library primarily based on grids which does not have simple built in hide points in 2018 after it's been pointed out since 2014 just yells out "YMMV if you are considering this".

If we have to create our own custom additive code/presets specifically addressing grids every time we want to deploy a project, it is kind of eliminating the point of responsive grids. We can always add classes or if using something like React (which I think Yahoo uses a lot lately), don't display a component, but that is not ideal compared to simple media queries sometimes for performance reasons.

(I might be misunderstanding what this project is/intended for, and I don't know what's up with who were the original contributors who would know this stuff best; if I'm just uninformed, please don't take this comment too much to heart)

[hmaesta]

I don't think this project is active anymore. 😥

[KeiroD]

This project is still actively maintained by me and a few others. I've been dealing with a lot of health issues of late, which should soon be improving, so there hasn't been much activity from me.

[redonkulus]

@rob2d I mentioned in the comment right above yours that if someone can test it with Pure then I'd be open to merging it in. Seems many people would like this added. I don't have the time to test it, so if someone from the community wants it, then they have to test it out.