Responsive Stack: Change class at breakpoints


(John S.) #1

Hi All,

I’m looking for a stack that does a very specific thing: dynamically apply/change the class of an item at various break points.

What I’m trying to achieve is this:

I have a responsive 2-column layout. Inside each column I’m using a text stack to put custom HTML for a font-awesome list. At iPad landscape and above, I want the lists to be center aligned (which requires some custom CSS to change the behavior of the Font Awesome icons so they center along with the text, instead of remaining out at the margin)… which I’m achieving by applying a class of “center” and styling it in custom CSS.

Below iPad Landscape size, I’d like the columns to go back to left-aligned. Right now I’m using media queries to do this… but I’d love it if there was a Stack I could use so it could be managed right on page, in the GUI.

Anyone know of something like this? I’ve looked at Jack (Joe Workman), Paragraph Pro (Big White Duck), Align (Doobox) and some others. Align comes the closest… but handles the application of the media queries internally and doesn’t change classes on the items.

Thanks!


(Jannis from inStacks Software) #2

That’s possible, but the applied CSS would have to be entered by yourself still in a textarea in the settings, correct me if you think it should be solved differently.


(Andrew Tavernor) #3

To add and remove classes you need to use javascript.

Your current method of using CSS media queries is the right way to go - it would be overkill to use JS for something like that. You will have to watch the window resize event which is quite an intensive process - the browser is already doing this for you when you use media queries.


(John S.) #4

@instacks - That would certainly work (I think!).


(John S.) #5

@tav - True… hadn’t thought of that. Changing the applied classes would be much more intensive. Perhaps @instacks has the idea… allowing a textarea where custom styling could be applied at each breakpoint. Still manual… but at least the styling/changes are being applied on-page, instead of flipping back-and-forth to custom CSS.