classes for hiding content needed in core

[teson2000]

there's no way to add classes outside of pure allowing easy hiding of content.

pure.css and -responsive.css could easily be extended with ..

.pure-u-md-0-0 {
    display: none;
}

and respectively. base class in pure.css also needs this extension. Probably after 24-24?

This would allow easy hiding of content as in
<div class="pure-u-0-0 pure-u-sm-2-5 pure-u-md-0-0 pure-u-lg-5-5"><p>hide'n'seek</p></div>

[Goury]

I disagree

[redonkulus]

This is easily done in userland with a simple class. I don't think Pure needs to provide this.

[guest20]

.pure-u-md-0-0

"divide the containers width by zero, then make my box zero times that wide" ... width:100%, right?

[teson2000]

Sorry for any digital noise here, but I've tried my best "with a simple class", and pure's css interferes with any display: none. @guest20, yeah the name itches, doesn't it. Could be 0-12.

[teson2000]

sorry if I can't explain the problem well enough. browsers take no notice on class ordering (as in class="pure-class my-class pure-other-class"). If I define class in userland with display:none it will either be overriden by pure, or override pure wrongly, since there's no way to add userland classes between breakpoint-parts in pure itself. Man that's a crap description but I hope you get it..

[Goury]

Go learn CSS

[teson2000]

Yeah i could. Or a framework could make things easier.

[guest20]

If your declaration is more "specific" than the one from the framework, it will win.

style= on the element is more specific than class=, and a class declared later than another is more specific than it. There's a whole set of rules to it, those are the "go learn css" that you're being pointed at.

[teson2000]

@guest20 , thanks for your elaboration regaring style="", but we wan't to stay out of inline styles, don't we?
And the fact that a "class declared later" has priority is the key problem here. That's why it isn't possible to add this functionality in userspace, at least to my knowledge, (and using pure rwd-classes).

Example 1:
Userclass .pure-u-md-0-0 defined in userspace before regular pure-classes
Used in html: div class="pure-u-1-3 pure-u-md-0-0"
Problem: .pure-u-1-3 will override "display:none" declared in pure-u-md-0-0

Example 2:
Userclass .pure-u-md-0-0 defined in userspace AFTER regular pure-classes
Used in html: div class="pure-u-1-3 pure-u-md-0-0 pure-lg-1-3"
Problem: Content will be hidden even on -lg, since the media-rule will still apply,
(if not using min-width AND max-width on the userspace class, but that's asking for flickering..)

[teson2000]

Working example for any clarification:
purezero.zip

[AndreiMotinga]

hey @tomjoad2000, wanted to give my 2c but it turns out not to be as trivial as I thought.

Working example for any clarification:
purezero.zip

anyhow, I'm not sure whether you're familiar or not, just wanted to mention that for demo purposes you probably better use something like http://codepen.io/pen/ or https://jsfiddle.net/ as it'll be much quicker/easier for others to see and experiment.

[teson2000]

Thanks Andrei, having to mod the pure.css, those online services became clumbsy, also kind of stuck in size of viewport. It's just a zip away. Cheers, :)

[absalomedia]

I thought the Pure being dependent on Rework Pure Grids already covered this?

[teson2000]

My knowledge is limited in the subject, but isn't rework for customization. I belive hiding a col should be pretty close to the core. or am I being biased?

[Goury]

If you need to hide anything anywhere on page — just add display: none; to its style or do .remove(); on this element. There is exactly zero reasons for this to be in CSS framework.

If, for some reason, you absolutely need to hide elements by adding extra class to em — define this class yourself.

It is fine to have extension pack (or name it plugin or whatever) with those extra classes, but don't add those classes to Pure. Because it will only make it less pure.