Feature Request: Hide/Show breakpoints

[boustanihani]

Could you please add a way to show or hide content depending on the screen size (breakpoints)?

Something similar to: http://getbootstrap.com/css/#responsive-utilities-classes

• visible-xs
• visible-sm
• visible-md
• visible-lg
• hidden-xs
• hidden-sm
• hidden-md
• hidden-lg

[0zguner]

I can work on this 😃

[0zguner]

I've looked at the docs of flexboxgrid ; It does not include this feature, am I wrong ? I think we should first contribute to flexboxgrid package for this feature. Any ideas ?

[roylee0704]

@mzgnr , yes you are right, indeed flexboxgrid.css doesn't support these features. I'm not sure if the author of flexboxgrid would want to have these features, but worth trying. :)

[boustanihani]

I forgot that I already did a feature request, and there is also a pull request for this, but the author seems not willing to add this feature, check:

• Feature request: Hide/Show content kristoferjoseph/flexboxgrid#138 (feature request)
• Implement and document hide- classes kristoferjoseph/flexboxgrid#140 (pull request)

[0zguner]

I'm on this feature guys. I'll be back with this feature :)

[gingur]

I'm in the same boat, I'll be needing to use the bootstrap-ish responsive utils, but I feel that falls outside the scope of what this project was intended for. If the author of flexboxgrid refuses to add it, maybe an extension/utility lib could be implemented to expose that functionality and then wrapped similarly with React components as you guys have done in a separate optional repository.

[veeracs]

It's a feature that'll make more sense if it's added to a React component as opposed to flexboxgrid because we don't want to render the DOM in the first place based on a media query match and not because of a CSS media query.

[renato]

I've been using flex-grid (see VladShcherbin/flex-grid#1) in another project and looks like it's an unpretentious drop in replacement for flexboxgrid with visibility and stretch classes.

[shilpan]

Any updates on this?

[silvenon]

@shilpan I don't see how it's accurate to add visibility classes, since flexboxgrid doesn't have this feature, and react-flexbox-grid should just be a React wrapper around flexboxgrid. But I guess it wouldn't hurt 😁

[rcherem]

I guess this will solve it:

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
@media (max-width: 48em) {
    .visible-xs      { display: block !important; }
    .row.visible-xs  { display: flex !important;
                       display: -webkit-flex !important;
                       display: -ms-flexbox !important;
                       display: -webkit-box !important;
                       display: flex!important; }
    table.visible-xs { display: table !important; }
    tr.visible-xs    { display: table-row !important; }
    th.visible-xs,
    td.visible-xs    { display: table-cell !important; }
}
@media (min-width: 48em) and (max-width: 62em) {
    .visible-sm      { display: block !important; }
    .row.visible-sm  { display: flex !important;
                       display: -webkit-flex !important;
                       display: -ms-flexbox !important;
                       display: -webkit-box !important;
                       display: flex!important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm    { display: table-row !important; }
    th.visible-sm,
    td.visible-sm    { display: table-cell !important; }
}
@media (min-width: 62em) and (max-width: 75em) {
    .visible-md      { display: block !important; }
    .row.visible-md  { display: flex !important;
                       display: -webkit-flex !important;
                       display: -ms-flexbox !important;
                       display: -webkit-box !important;
                       display: flex!important; }
    table.visible-md { display: table !important; }
    tr.visible-md    { display: table-row !important; }
    th.visible-md,
    td.visible-md    { display: table-cell !important; }
}
@media (min-width: 75em) {
    .visible-lg      { display: block !important; }
    .row.visible-lg  { display: flex !important;
                       display: -webkit-flex !important;
                       display: -ms-flexbox !important;
                       display: -webkit-box !important;
                       display: flex!important; }
    table.visible-lg { display: table !important; }
    tr.visible-lg    { display: table-row !important; }
    th.visible-lg,
    td.visible-lg    { display: table-cell !important; }
}
@media (max-width: 48em)                       { .hidden-xs { display: none !important; } }
@media (min-width: 48em) and (max-width: 62em) { .hidden-sm { display: none !important; } }
@media (min-width: 62em) and (max-width: 75em) { .hidden-md { display: none !important; } }
@media (min-width: 75em)                       { .hidden-lg { display: none !important; } }

[carloscuatin]

You could use a high-level component to do this they think ?

[silvenon]

Closing this in favor of #57.