Background colors of Container, columns, text with Foundation 6

Hi all,
Still struggling with Foundation 6… How can I set the background color of (preferably individual) stacks like container, column etc.? Can’t find this in the info-pane, nor in the video’s.

The answer is going to be a swatch. Pretty much all styling in F6 is done with swatches.

There are a few videos on swatches I think. The weaver.space page jumps around so much I can’t tell you what one to look at.

Not at a Mac now but there should be a swatch for backgrounds.

In Site Styles go to the General section and click on the blue/white Plus icon. Pick Background, this now your Background Swatch. Select a colour/pic etc. on the inspector and give it a distinct class instead of the default myclass name. No spaces in the name and must start with a letter.
This is now your background colour swatch to apply wherever you wish it to be. You can add as many as you need, just remember to give each one a distinct name.

To apply it, find the Custom Classes: section and put your class name in there.

Many thanks, teefers, pmjd and joeworkman, for your kind and fast advices! As always it is quit simple ;o)
Leaves me with a following question: I can add a F6 stack called Swatch to the Site Styles, or, like Paul wrote, add a swatch in the General section of the site styles. What is the difference?

You can put swatches anywhere you want. They can be inside site styles or stand-alone (there’s a swatch stack). The effect is the same, it’s more of how you want to organize them.

1 Like

If I remember correctly when a swatch is in Site Styles it will be loaded on every page. If a swatch is in a separate stack then it will have to be added manually to each page it is required for.

So common swatches should be added to site styles but rarely used ones may be better added as needed.

Only if you put site styles in a partial, and put that partial on the page.

Of course, you can group swatches into the same or different partials as well. It’s the partial(s) that you put onto the page the places them on the page not being inside of Site Styles.

Indeed, sorry was a bit of a rushed reply that made a few too many assumptions about partial usage with Site Styles

OK, thanks again for all the information! It really helps. I think this subject can be closed by now. Till next time ;o)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.