Lack of interest Responsive Helper Classes

[xf_phantom]

I'm sure that i've requested this already, but i can't find it (sorry if it's really a duplicate of MY suggestion )


Could we get some "responsive css classes as helpers" like http://getbootstrap.com/css/#responsive-utilities.


e.g. http://xenforo.com/community/thread...plate-that-disappear-during-responsive.56414/

I don't want to have a fat list like

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        #firstBox { display: none; }
        #secondBox { display: none; }
        .headerFoo ...........
    }
</xen:if>

I would prefer to add just add some css classanmes to the element i want to show/hide and that's it
Much less work, much less needed code

 

[xf_phantom]

OK i've seen now, that i could put

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.hiddenResponsiveElementForWide{ display: none; }
}
@media (max-width:@maxResponsiveMediumWidth) { 
.hiddenResponsiveElementForMedium{ display: none; } 
}
</xen:if>

but having this in core would be much better instead of having the same duplicate code in all addons

 

[xf_phantom]

e.g. instead of endless lists in the css template

<xen:if is="{xen:property enableResponsive}">
@media (max-width:{xen:property maxResponsiveMediumWidth})
{
   .Responsive .discussionList .sectionHeaders .stats
   {
     display: none;
   }
   

   
   .Responsive .discussionList .sectionHeaders .main .postDate
   {
     display: none;
   }
   
   .Responsive .discussionList .statsLastPost
   {
     display: none;
   }

.Responsive .discussionListItem .listBlock.stats .minor
     {
       display: none;
     }
.Responsive .discussionListItem .listBlock.lastPost dt
     {
       display: none;
     }

we would just need to add hideForMedium class to the elemenents

 

[Mike]

They already exist:

.visibleResponsiveFull,
.visibleResponsiveWide,
.visibleResponsiveMedium,
.visibleResponsiveNarrow

.hiddenResponsiveFull,
.hiddenResponsiveWide,
.hiddenResponsiveMedium,
.hiddenResponsiveNarrow

 

[Mike]

That said, there may not be an ideal "hide for this and smaller" option there.