classes for hiding content needed in core
teson2000 opened this issue · 22 comments
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>
I disagree
This is easily done in userland with a simple class. I don't think Pure needs to provide this.
.pure-u-md-0-0
"divide the containers width by zero, then make my box zero times that wide" ... width:100%, right?
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.
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..
Go learn CSS
Yeah i could. Or a framework could make things easier.
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.
@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..)
Working example for any clarification:
purezero.zip
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.
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, :)
I thought the Pure being dependent on Rework Pure Grids already covered this?
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?
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.
None of your suggestions works towards different viewports. The core of pure(responsive) is to create areas with different sizes for different viewports. Hiding an area in favor of others, is pretty core to me. Pls checkout the purezero.zip above.. Cheers.
For the sake of humanity, GO LEARN CSS!
ok. we're at roads end. I'll go for the double media-query.
@tomjoad2000 Have you tried adding "!important" to the style/breakpoint that you want to hide? That is the easiest way to override all other rules on the object.
Bear in mind that the !important is a powerful tool, aka it should not be used willy nilly. If you can solve the issue by putting it lower in the css file or making a more specific selector that might help you avoid the following:
(Hmm.. There's something about that illustration...)
geekosupremo, thanks. :) However, any added important, style, or javascript are less pure solutions that could be avoided if pure by default would support the numer zero as a grid-size. There has been some debate in the ancient history regarding if zero is a number or not, but if we can agree on that it is indeed a number, then maybe it's a good idea to add zero-width as a size-class for each BP.
It's just a suggestion and it's all in the zip. Do as you like. I'm fine.
And humanity too as long as we try our best to understand each other.
ATB
Rework Pure Grids is the codebase that builds the grid structure inside Pure. This PR has been outstanding for a while & allows hiding for content in core as it becomes part of the grid logic.
@absalomedia great stuff.