rework-pure-grids icon indicating copy to clipboard operation
rework-pure-grids copied to clipboard

Add `.pure-u-0` and similar classes

Open FaultyAstragal opened this issue 9 years ago • 7 comments

This code allows for the hiding certain elements based on Media Queries.

FaultyAstragal avatar Oct 24 '14 22:10 FaultyAstragal

Do you have a demonstration somewhere that shows how this would be used?

lkraav avatar Oct 25 '14 07:10 lkraav

Not currently, however displaying one layout versus another based on screen size is the point of responsive web design. Showing one div element to mobile users and laying out a different one for desktop users, allows for greater flexibility for designers.

For example:

<div class='pure-u-0 pure-u-lg-1-2'> ... </div>
<div class='pure-u-1 pure-u-lg-0'> ... </div>

This code will display one div element for desktops at half width, and a separate div for mobiles (up to lg size) at full width.

FaultyAstragal avatar Oct 25 '14 17:10 FaultyAstragal

Seems like a good idea to me!

@jamesalley @jconniff @tilomitra what do you all think of this idea?

ericf avatar Oct 27 '14 16:10 ericf

Seems helpful, as long as its purpose is documented clearly so people don't think they have to hide and show duplicate code to get responsive layout.

jconniff avatar Oct 27 '14 18:10 jconniff

For the record I have a situation right now where I think this would be the cleanest way (which is how I've been brought to this issue). Is there something missing in this PR to get it merged?

adelgado avatar Mar 16 '15 15:03 adelgado

/cc @jamesalley

ericf avatar Mar 16 '15 17:03 ericf

+1 for this to be included in standard pure. Why it needs to be inside pure and example here, https://github.com/yahoo/pure/files/854487/purezero.zip (from the thread https://github.com/yahoo/pure/issues/640)

teson2000 avatar Mar 25 '17 12:03 teson2000