Following on from some (mainly mine) posts the other day and comments from @elixirgraphics I’m interested to hear “best practices” for when/how to use containers, margins and other similar stacks.
After reading @elixirgraphics comments I went back thru a project I was working on and concluded I was using containers where I should have been using margin stacks (I was using containers inside columns solely to add padding), and I was also using containers and margins to restrict content width to below 320 when I should have been using the default Stacks 1 col stack.
I’m looking now at another project and noticed I’ve used containers within containers, variously to add coloured backgrounds/padding etc, and I’m realising this is the wrong use of the container stack, I should really be using the margin stack inside the container stack for that task.
It then bought be on to thinking about the order I’m using containers and margins: Sometimes the container is inside the margin, sometimes the other way round.
I’m a big fan of the container and margin stacks, the control they give you is excellent and it’s one of the main reasons I’m slowly moving projects over to Foundry.
I would be really interested to hear the views of regular users and @elixirgraphics as to best practices for the two stacks, and do’s and don’ts.
I think they are pretty much interchangeable and can be used either way around. My preference is to add a container stack and then add a margin stack within it. I do this whenever I add a container stack. Then I add whatever content stacks I like within the margin stack. That does what I need it to most of the time.
Download the free project files and you’ll see how I use them.
As for combinations of stacks like Margins and Container – you can use them how you’d like in combination. You’ll get different results based on how you use them and if you use margins or padding or both in the Margins stack.
A related question (if we’re thinking about the same thread) - there was a comment about using multiple Containers in a Grid as being a bunch of unnecessary code. In the cases where you’re just housing content (and that container it isn’t really doing much), is a Column stack the best choice in terms of not adding unnecessary code? Margin stack?
What is your goal of using the Container stack in the above situation in the Grid? To add spacing? Just to group elements together? With a better knowledge of your end goal I can answer your question.
The 1 Col Stacks stack can set a Width which it calls Fixed Width.
The Foundry sets a Max Width which it also calls a Fixed Width. However, a Width and a Max Width are very different. If you set a block button to a Width of 400, it will not be responsive below 400. If you set a block button to a Max Width of 400, it will be limited to a width of 400 and then scale down below 400.
Max Width stacks are few and far between and one of the most important stacks in good web design. The Container stack is a good Max Width stack but is set to a minimum Max Width of 320. I think the Container stack is pretty light as it is in terms of settings so I don’t see any issue in using several on a page. It would make sense to have a Container Light that just set a max width and nothing else. Thinking about it, I usually have quite a few Containers on every page that just use the Max Width function.
I’m not sure we need to re-hash the same discussion from this thread here as well. I’ve already said I will take a look at your project file regarding this tomorrow when I’m back in the office to assess if what you’re wanting to do needs a new stack or not.
I mean, I know stuff inside a Container stack will become responsive, but is this handled by Container or is that all done Browser side now?
How heavy (in terms of code) is a Container stack? Compared to say the default Stacks 1 col stack?
I went thru a page when I posted that this morning and removed five container stacks that really didn’t need to be there. I replaced with Margin stacks, or in two instances, nothing, as they were serving no purpose, other than to add some more side margin on top of the margin already being added by the margin stack they were inside!
Oh, and thanks for the demo page links, forgot about those, will get a look in the week.
Is it going to drag your page down to use a ton of them? No.
Is it unnecessary to include the extra CSS for the drop shadows, the controls for the rounded corners, the javascript for eliminating the overflow: hidden on itself and all of its parent stacks, etc. over and over again when you don’t need it, for things like this? Yes.
You can use the Container stack many times on a page, but as I’ve said, it is not always necessary. Sometimes simpler means are the better way to do things.
The default 1-Column stack is just a <div></div> wrapper. Nothing more. It is practically nothing.
