Hiya, I’m wanting to add responsive padding to columns, for instance 0 at x-small, small, 10 at medium and 20 at large.
I don’t see it as an option in columns anymore, so I’m thinking Spacer will be a bit laborious bringing down everytime for individual columns and setting it up each time 9or copying and pasting a premaid one or partial), so thinking that using Blacksmith and creating three CSS rules for each breakpoint using Media Queries in the one Blacksmith tool so I can add the class to each column.
Does this sound like the best approach or am I missing some other method such as a Parent option with some tool that can assign responsive padding.
I’m guessing Blacksmith is better because I apply sitewide changes if I change my mind, but just want to check. Thanks - Ben
Can you give us a better example of what you are trying to do? The new columns/grid tool is vastly more versatile to use than F2. Are you talking about gutters? Here is a screen shot of the gutter settings for each breakpoint. None there is zero padding.
In conjunction with the max-width tool you can achieve some great layouts. I strongly suggest you explore the starter packs that were included with Foundry 3 to see how great the new columns/grid tool is.
Hi Steve, no it’s not gutters, I’m more looking along the lines of responsive padding for the contents of the columns so that when I place content in the column (as in the attached screenshot) the content for the columns is padded at different breakpoints.
If you see in the screenshot just simple Headers and Paragraphs, I have no padding to columns 1, 2 & 3 but in this example I have used a Spacing tool added inside column 4 to add responsive padding at different breakpoints.
What I’m really trying to get at is if there is a global or parent method to add responsive padding to columns, which is why I was thinking Media Query stylesheets. Or a setting similar to the gutters in your screenshot but padding instead.
The reason being that I will want to create a background colour and a border to the columns so the spacing needs to be inside the column with padding as opposed to outside with gutters.
I’m thinking the way I’m probably best going is to create a Spacing drop zone partial that I bring in to each column.
Personally I use the Spacing tool. I like the quickness with which I can apply padding via a preset. Changing multiple Spacing tools is as easy as selecting them all and changing the settings. It then gets applied to all that are selected.
If you go the route of Blacksmith you’re going to need to add a wrapper of some sort in each column, as the Columns / Grid tool uses Padding and Margins for its own gutters, so yours would override that. You could drop an HTML tool in a Column and apply your class to that.
I don’t think using Spacing is any different than it would have been in previous versions of Foundry, and is pretty quick, IMHO.
That’s great, thanks for the clarification, I just didn’t want to go down the route of creating several columns for several pages and then finding “Arrrgh! I should have used a global/parent method”.
When you say using a preset do you mean in the sense of making a Spacing dropzone partial that I can then tweak and change halfway through a project?
When it comes down to it, there are multiple ways to do anything when it comes to web design. You have to use what works best for you. You can look through the included Maker templates and Starter Kits to see how I like to work.
Ahha! I see Steve_J, thanks for the heads up on that, do you know I’ve never known you could do that with Stacks select multiples of the same and change the settings for all selected. And Adam thank you for clarification with the preset, I see what you mean.
