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.
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
Protect
The Protect swatch allows you to stop visitors from easily copying or stealing your data. You can protect not just individual images or bits of text, but entire layouts. Or even you entire webpage if you need that. You will be able to disable the following actions:
- All Click Events (including links and buttons)
- Right click/Contextual menu
- Text and Image Selection
- Dragging to Your Device
- Force Touch
While this swatch can help you protect your content via the most common ways the average user can obtain them, it does not guarantee that your content cannot be obtained. If your content is visible online, it is possible to obtain.
Protected Demo
You will not be able to select this text. You will also not be able to right click anywhere within this 2 column layout. You will not be able to select the image in this demo or drag or force touch it on mobile in order to save it to your device.
Scrollbar Styles
Sometimes tiny details such as styling scrollbars on your site will help make your site stand out. Not many people know how to accomplish this but with the Scrollbar swatch, it's a piece of cake. You will notice that on this page the main scrollbar has been customized. You can also customize the scrollbars of containers like the demo below. As you can see, we have full control over the scrollbar colors, sizing and shape.
Scrollbar Demo
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.
Tables
The Tables swatch allows you to style your tables in all kinds of 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.
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.
Toggler Demo
Scroll this page to animate
this demo.
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 just 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.