Overview

This Swatch Pack contains over 2 dozen new swatches that can help you take your Foundation 6 websites to an entirely new level. Below is a good set of demos that illustrate some of what is possible. Remember that 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.

Aspect Ratio

The Aspect Ratio swatch will allow you to maintain a specific aspect ratio on any element that you want. As you can see below, there are two boxes that are maintaining an aspect ratio of 16x9 and 1x1 (a square). If you resize the browser you will see that the shape will maintain itself so that the dimensions are always consistent.

16:9

1:1

Clip Path

The Clip Path swatch is super fun. It allows you to clip any content to a shape. The swatch comes with over 20 pre-made shapes to choose from. You can also use your own custom SVG shapes to clip. While clipping images will probably be the most used scenario, you can clip whatever you want. The triangle button allows you to really make a unique design that is completely different. Clipping text essentially renders it unreadable. However, it could make for a very interesting design element. Happy clipping...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Cursor

The Cursor swatch allows you to define a specific cursor when a user has hovered over an element on the page. This is a nice way to inform the user of which type of action that may be performing if clicked. While buttons are used in the demo below, you can apply this swatch to anything you like. There are more cursors possible than that are shown below. You can also have fun with users and set cursor to none. HAHA

Display + Custom Visibility

The Display swatch allows you to customize the CSS display property of an element. In the demo below, Container stacks (which normally go full width) are set to be inline. The containers flow next to each other instead of breaking onto a new line.

The orange blocks in the demo below illustrate what will probably be the most used case for the Display swatch: custom visibility. You can easily hide any element and define a custom breakpoint as well. There are 3 orange blocks that can be hidden at different breakpoints by resizing your browser.

0 ⬅ Current Browser Size
Hide at 0-600px
Inline Block
Inline Block
Hide at 1003px+
Inline Block
Inline Block
Hide at 650-925px
Inline Block
Inline Block

Equalizer

The F6 column stacks allow you the ability to equalize the height across columns. While that is useful, there are more situations where you want to ensure parts of the page have equal heights. This is where the Equalizer swatch takes over. You can equalize anything that contains a particular class. As you can see below, the feature section inside each Card layout will have an equal height.

Lite

  • Feature A
  • Feature B
  • Feature C
  • Feature D

Best Value

  • Everything in Lite
  • Feature X
  • Feature Y
  • Feature Z
  • Bonus 1
  • Bonus 2
  • Bonus 3
  • Bonus 4
  • Bonus 5

Luxury

  • Everything in Best Value but with gold trim

Lite

  • Feature A
  • Feature B
  • Feature C
  • Feature D

Best Value

  • Everything in Lite
  • Feature X
  • Feature Y
  • Feature Z
  • Bonus 1
  • Bonus 2
  • Bonus 3
  • Bonus 4
  • Bonus 5

Luxury

  • Everything in Best Value but with gold trim

FA5 Styles

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

Gradients

Who doesn't love a nice gradient? There are multiple different gradient swatches that allow you to generate any type of gradient that you want. You can make linear, radial and conical gradients. You can have up to 6 colors inside each gradient. To take things to another level, you can even layer gradients on top of each other for some mind blowing effects.

Conical

Linear

Radial

Layered

Animate on Hover

SVG

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

spaceship
cryptography

Tables

The Tables swatch allows you to style your tables in all kinds fo ways. You have separate control over the table headers and table body. You can also target specific columns, rows or individual cells in order to apply different styles. This is a great way to highlight data within the table.

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1
Name Score 1 Score 2 Score 3 Score 4 Score 5 Score 6
Joe 10 5 1 20 7 15
Gary 5 1 20 7 15 17
Andrew 7 15 7 15 17 2
Bret 15 10 5 1 20 7
Josh 1 15 11 2 13 5

Toggler

The Toggler swatch will allow you to add custom interactions onto your site that you could never do before. Toggler allows you to toggle a class on or off of one element by hovering or clikcing on another element on the page. In the demo below, you can click of hover on the buttons in order to affect the style of the box on the right. Do not let the simplicity of this fool you. You can do some really spectacular things with the Toggler swatch.

Toggler Demo

Use the buttons to animate
this demo.

WeaversSpace Created with Sketch.

Toggler Scroll

Toggler scroll gives you the same power as the Toggler stack. However, you can easily add and remove classes when an element scrolls into view. You can even toggle a class on a fixed position element as a different element scrolls into view. This can be a very powerful tool.

As you scroll the page up and down watch as the elements below animate when they scroll into and out of the viewport.

Toggler Demo

Scroll this page to animate
this demo.

WeaversSpace Created with Sketch.

Toggler Demo

Scroll this page to animate
this demo.

WeaversSpace Created with Sketch.

Transform

The Transform swatch may be the most fun swatch in the pack (Toggler may have something to say about that). Transform allows you to move (shift in any direction), scale (zoom in/out), rotate and skew any element. You can do ust one of these or any combination. The real power if when you start applying these on hover or with Toggler. These allow you to do some really great animations. Check out some of the really interesting animations below that would not be possible without transforms.

Move

Scale

Rotate

Skew

Underscore

The Underscore swatch allows you to easily add lovely animated accents to your text content. This will primarily be used on links and menus. As you can see in the demos below, there are some really interesting hover effects possible.

Link Hover Demo

Writing in Markdown is the best way to add text to your web pages

  • Ordered and Unordered Lists.
  • Simple Links: Stacks can use Markdown Syntax too.
  • Simple formatting: Bold and Italic.
  • Code snippets: 10 PRINT "HELLO WORLD"

And Even More...

There are many more swatches that come in the swatch pack that are more utilities that can be used in conjunction with other swatches. Many of the below swatches were used in the demos above in order to achieve the additional features needed. You can read more about each of the swatches below.

Animate

The Animate swatch is very similar to the Animate stack. However, it allows you to create a single animation that can be assigned to multiple elements at the same time. There are also more granular controls over when that animations will start and end while scrolling the page. Check out the Animatiions demo for examples.

Background Props

The Background Props swatch allows you to customize just the background properties. While these options are available inside of the default Background swatch already, this swatch allows you to customize specific properties about a backtground without having redefine the entire background again. This is probably most useful for hover animations. This swatch was used in the gradient hover demo above.

Color Override

The Component Colors and Text Color swatches allow you to override all colors in a particular color set. But sometimes you only want to override a single color. The Color Override swatch allows you to do exactly that.

Custom Color

Custom Color stack allows you to define your own custom named colors that can be centrally referenced throughout most swataches that have color definitions. Make sure to watch the live stream for the Foundation v6.9 release for more details.

Pseudo Content

The Pseudo Content swatch allows you to inject content into :before and :after pseudo elements. For example, you could add a New label after all headers that contain a class new.

Perspective

The Perspective swatchs allows you to control the 3 Dimensional perspective on elements that may have been transformed.

Render Perf

The Render Perf swatch will improve page load performance. This uses content-visibility that enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content. Pretty neat.

Gutter

The Gutter swatch allows you to customize the Gutter and Padding settings inside of a column stack. The values set inside of the swatch will override the default settings that are defined inside of Site Styles.

Object Fit

The Object Fit swatch allows you to scale images and video as if they were backgrounds. This allows you to get SEO juice from your images since background images are not scraped by search engines.

Overflow

The Overflow swatch allows you to set the overflow property on any element. This means that you can show, hide or make content scroll that may be going outside the bounds of its parent element.

Pointer Events

The Pointer Events swatch allows you to control what can be clicked. This can be very useful for disableing clicks on certail elements. This can also save you in situations where links cannot be clicked because an invisible element is covering it. You can use the Pointer Events swatch to disable click events on the element that is overlaying the link. Then you will be albe to click on the link.

Transition Multi

The Transition Multi swatch is a more advanced version of the default Transition swatch. It allows you to define different transition timing and delays for multple different styles attributes. For example, you can animate the opacity of an element first, then after that is complete, you could apply different styles such as a transform to move or rotate the element.

Unset

The Unset swatch allows you to strip CSS styles that may have been applied to an element. This is useful when overriding styles with a swatch does not work. For example, if you wanted to remove a shadow from an element, you could use the Unset swatch to do this. This is a better solution than trying to override the shadow with one that simply cannot be seen.

Prefetch Links

Prefetch Links will improve the loading of linked to pages on your site. This swatch will look for any links that a visitor may click and cache the requests to those links in the background. When the visitor clicks on those links, the assets on the page will have already been cached. Therefore the page loads will happen much faster. This uses the Quicklink library developed by GoogleLabs.

z-index

The z-index swatch does exactly what you might think. It allows you to adjust the z-index of any element.

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...