Hello RapidWeaver Community… One month ago I made the big RapidWeaver + Third Party purchases but just getting hands on this week as I have been training, doing server setup and taking care of other business related demands.
Thank you to those who have already assisted with a couple foundational setup related inquiries. Now that I have gotten comfortable with the overall RapidWeaver workspace and completing orientation with the Stacks 3 tool, I have a couple questions relating to how a few things are being published and what is going on under the hood. Please note that while I have purchased the full Foundation bundle with all it’s built in stacks, the following questions are based on my practice with the built in Stacks 3 stacks.
It appears that the responsive controls are only hiding html elements not removing them. I am accustom to using display:none at given break points when hand coding. Why is the Stacks 3 Responsive feature only hiding the html element not removing it from the HTML DOM? Only hiding the HTML element leaves it on the page thus creating unwanted gaps in the layout.
Some time ago I asked this question and while the input was helpful, I am curious if anyone can point me to a more detailed tutorial or documentation for gaining control over break points with a RapidWeaver + Stacks 3 + Foundation workflow? It appears that I am locked into predefined breakpoints.
They are using display:none. That does not remove elements from the physical DOM. This should not leave gaps in the layout however as elements will have zero height and width.
If you are using Foundation though, I would advise that you use the Foundation Visibility stack, purely as it has more controllability.
As we have discussed previously, the nature of RW means that the breakpoints have to be hard coded into the theme. Essentially you would need to re-build the theme each time using SASS variables and that, is not possible at present.
Hello Andrew… Thank you for the prompt reply. Regarding content hiding, it is good to know that this is actually using display:none. I think what is throwing me off is that I am using a three column stacks with text stacks in each column. In my practice page I set the center column text stack to not display for a given break point which it does just fine but there is still a gap as the column architecture is still there, div’s, padding and such.
Apologies if I am missing something simple here, with hand coding I would assign display:none to the outer most element of the column, not the text element? Hope you can show me what I am missing here inside of RW?
You cannot hide a column before they have stacked - although it will collapse to zero height the width will still be detained - 1/3 of the space for a 3 column for example. You would need to change all the column classes to reflect the fact that there are now 2 rather than 3.
While this is easy in code, it would make for incredibly complex and confusing settings in stacks edit mode.
Hiding a columns content once stacked on mobile will not leave a gap in your content.
Thank You For Your Assistance With This Andrew… In my practice page I have the three column stack with all stock settings and added 10px of padding. In each text stack added to each column i have add 10px of padding as well. I have also applied background colors to make things easier to see. I have set the text stack in the center column to be hidden on Tablet.
As you can see from the Screenshot_02 that when the stack is hidden there is still a div and the padding seems to still be there. This all seems quite simple, what am I missing?
To stop the padding persisting you have two choices. Firstly you could pad the content that is being hidden with display:none - this will therefore be removed. IMO opinion this is not ideal though as, the padding should really be on the column as you have done.
It is this limitation that led me to include a setting to remove responsive padding in the Foundation Grummage column stacks that I made. The only limitation is that I only did 1 and 2 column versions and so you would need to make a pseudo 3 column arrangement out of 2 x 2 column stacks.
Hmmm… This seems like a pretty basic need. Kind of surprised that others have not run into this and that the user is not able to hide at the outer column element level.
Just started practicing with Foundation, will it’s stacks, e.g. columns, paragraph and such address this?
Check out my free BWD plus stacks and Paragraph and Header Pro. They will give you a lot more responsive options, such as 4 way responsive sizing etc.
I also want to check that you are not applying the padding in the Stacks 3 settings at the top of the settings pane - this will apply the padding to the stacks wrapper div rather than the “.row” div itself.
Just to confirm as there is only one set of settings. I am practicing with the Stacks 3 three column and the Stacks 3 text stack. Had a quick look at Foundation and I see there are padding settings under the Layout section as with the Stacks 3 text stack as well as a few sections down under Responsive Padding.
Sorry - I thought you were referring to the Foundation column stacks - you are of course correct when referring to the Stacks 3 columns.
If you are using the Foundation theme though either use the Foundation columns or the Grummage columns which have all the foundation classes consequently can utilise many more features that are built in to the Foundation CSS. Things such as column push/pull, offsetting and per column (rather than just per row) padding for example are the main things that people use often.
Thanks Andrew… So I take that to mean that this is a Stacks 3 issue and that when applying padding with Foundation Stacks via the proper method that all is good?
So… I moved on to testing this with the Foundation Theme and getting the same issue.
I must be missing something here as hiding (display:none) an element on a page is dead simple. Would value some assistance as I must be using Stacks or Foundation wrong hen it comes to the Responsive, Hide This Stack feature?
Yes, that is as I mentioned above. The grummage column stacks however do have the option to remove the padding though. Give them a try. http://www.bigwhiteduck.com/stacks/grummage/
Thank You Andrew… You have been most helpful. I did get control of this but a couple of div’s were left behind but no more Padding or margin throwing off the layout. Seems like there would be a need to include the hiding functionality for columns as well as their content. Perhaps this is a Stacks 3 thing.
This whole RapidWeaver, Stacks and Foundation approach seems dead simple. I do see there are going to be some compromises I am going to have to make when it comes to fine tuning all aspects of a layout throughout the break points.
Again thanks for staying with me on this and I will most certainly be looking deeper into your offerings.
The big thing to remember when working with a framework like Foundations, BootSnap, etc is that you should be using their products (most of the time) for best compatibility. Having said that, @tav has some stacks that work with or without foundations as a framework, but he also has stacks that work specifically with Foundations and they are sortable so you can see them all on his site. Please remember that @tav does not charge for his stacks and works off a donation based system. The best way to keep him happy and developing is to throw a bone (donation) once in a while. Similarly to Stacks4Stacks.
As far as Stacks goes, as I am sure @isaiah will agree, he has provided basic stacks to ‘generally’ work in any Theme, framework, etc. These are called courtesy/starter/basic stacks that are included with the Stacks Plugin. For fancy things you’re going to have to go with third party stacks.
