Foundation Swatch Pack

icon

Additional Swatches for Foundation

This Swatch Pack contains over 2 dozen new swatches that can help you take your Foundation 6 websites to an entirely new level. Swatches are tools that you can use together to create entirely new designs that no one has ever thought of. This is the true power of Foundation 6 swatches. You are only limited by your imagination in what you can achieve.

This Swatch Pack is an addon to Foundation 6. You must purchase it separately from the core Foundation 6 stacks.

Key Features

Requires Foundation 6

This is an addon pack for Foundation 6. You need to purchase F6 before you can use these swatches.

Transform

Build amazing animations with transforms by moving, scaling, rotating and skewing anything you want.

Underscore

Add lovely animated underscore accents to your text content.

Toggler

Add custom interactions onto your site that you could never do before. Toggler allows you to toggle a class on or off on click, hover or scroll.

Tables

Style your tables in all kinds of ways. You have separate control over the table headers and table body.

SVG

Easily style the fill and outline of your SVGs. This allows you to quickly apply a consitent style across all fo your SVG images.

Gradients

There are multiple different gradient swatches that allow you to generate any type of gradient that you want.

FA5 Styles

The FA5 Icon swatch makes it much easier to style the size and colors of your Font Awesome 5 icons.

Equalizer

You can equalize the heights of anything that contains a particular class.

Display

This swatch allows you to create a custom visibility stack based on whatever breakpoint you want.

Cursor

Define a specific cursor when a user has hovered over an element on the page.

Clip Path

Clip any content to a shape. The swatch comes with over 20 pre-made shapes to choose from.

Aspect Ratio

Maintain a specific aspect ratio on any element that you want. Easily keep content square or any aspect ratio you want.

A Whole Lot More

Check out the demo there is a lot that comes with this swatch pack.

Demo

Foundation Swatch Pack has an external demo .

Reviews

 5/5 (3 reviews)


Norbert Kohlhauer

Norbert Kohlhauer

Springfield Nuclear Power Plant

star-alt
star-alt
star-alt
star-alt
star-alt

"Many web design tools are either too simple or too complex. Foundation 6 strikes the right balance, offering a user-friendly yet powerful platform for building responsive websites. It provides robust functionality without requiring deep coding knowledge. With regular updates and a fair price, it’s an excellent choice for all levels of web designers."



Massimo

Massimo

RW Pro Space

star-alt
star-alt
star-alt
star-alt
star-alt

"Foundation 6 makes you free to do whatever you want. The limit is only yours 😀."



Bill Burden

Bill Burden

RetirementIsAwesome Inc.

star-alt
star-alt
star-alt
star-alt
star-alt

"Don't let all those videos and tutorials fool you, this one is so easy...really. It may be true the F6 existed before the Swatch Pack, but I am not sure that I believe it. Go from a pleasant V6 to a turbocharged V12...get the swatch pack and join the converted. Elegant programming in Web Design at your fingertips."



We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.

Screenshots

screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots
screenshots

Tutorials

Loading...
Join this Hangout you will... May the 4th Stacks Hangout
Join this Hangout you will... May the 4th Stacks Hangout
Animate Swatches in Foundation 6 stacks
Animate Swatches in Foundation 6 stacks
Toggler Swatches for Foundation 6 stacks
Toggler Swatches for Foundation 6 stacks
What's New in Foundation v6.9?
What's New in Foundation v6.9?
Extra Swatches - Foundation 6 Stacks Swatch Pack
Extra Swatches - Foundation 6 Stacks Swatch Pack
Underscore Swatch - Foundation 6 Stacks Swatch Pack
Underscore Swatch - Foundation 6 Stacks Swatch Pack
Transform Swatch - Foundation 6 Stacks Swatch Pack
Transform Swatch - Foundation 6 Stacks Swatch Pack
Toggler Swatch - Foundation 6 Stacks Swatch Pack
Toggler Swatch - Foundation 6 Stacks Swatch Pack
Tables Swatch - Foundation 6 Stacks Swatch Pack
Tables Swatch - Foundation 6 Stacks Swatch Pack
SVG Swatch - Foundation 6 Stacks Swatch Pack
SVG Swatch - Foundation 6 Stacks Swatch Pack
Gradients Swatch - Foundation 6 Stacks Swatch Pack
Gradients Swatch - Foundation 6 Stacks Swatch Pack
Clip Path Swatch - Foundation 6 Stacks Swatch Pack
Clip Path Swatch - Foundation 6 Stacks Swatch Pack
Aspect Ratio Swatch - Foundation 6 Stacks Swatch Pack
Aspect Ratio Swatch - Foundation 6 Stacks Swatch Pack
Equalizer Swatch - Foundation 6 Stacks Swatch Pack
Equalizer Swatch - Foundation 6 Stacks Swatch Pack
Cursor Swatch - Foundation 6 Stacks Swatch Pack
Cursor Swatch - Foundation 6 Stacks Swatch Pack
Display Swatch - Foundation 6 Stacks Swatch Pack
Display Swatch - Foundation 6 Stacks Swatch Pack
Font Awesome 5 Swatch - Foundation 6 Stacks Swatch Pack
Font Awesome 5 Swatch - Foundation 6 Stacks Swatch Pack
Overview the new Foundation 6.8 Swatch Pack
Overview the new Foundation 6.8 Swatch Pack
Foundation v6.7 Update Overview + Pre-Launch of new Swatch Pack
Foundation v6.7 Update Overview + Pre-Launch of new Swatch Pack
Let's Hangout - Live meet and greet on Zoom
Let's Hangout - Live meet and greet on Zoom

Downloads

Fun with Circles

Here is the project from the Fun with Circles live stream

Uploaded by Weaver's Space

Updates

v6.14.0

  • CSS Builder rules now have a new option to display a color value used in Edit Mode
  • New Selector Addons added to most swatches for styling the first letter or entire first line of a text element
    • First Letter
    • First Letter of First Paragraph
    • First Line
    • First Line of First Paragraph

v6.13.3

  • In every swatch the Pseudo State setting has been renamed to Selector Addon. I think that this term betterportrays what the setting has become. It's also a less scary term

v6.13.2

  • Improved performance when using the Aspect Ratio swatch. This will cause aspect ratios to be ignored in IE11.

v6.13.1

  • Updated the tooltip docs in the Equalize swatch to reflect some important tips that trip up some use cases:If you have multiple Equalizer swatches for a layout, they cannot share the same Equalize Parent.

v6.13.0

  • New CSS Builder stack!
See all updates Thanks!

You may also like…

scroll me

HANGOUTS

Next Hangout Session
Friday, April 25

Subscribe

For product releases and updates by email, please subscribe below.

© 2025 Weavers Space | Terms of Service | Privacy Policy