Overview

The Site Styles stack is the one stack that will manage off of the styles for your site and how to behave globally. This is where you control:

  • Site Background Settings
  • Site Width (The default width your content will display in)
  • Site Colors (Buttons, alerts, etc)
  • Default Text Colors (Headers, Paragraphs, etc)
  • Default Text Sizing (Headers, Paragraphs, etc; and their behavior in Small, Medium and Large devices)
  • List Styles (Bullets, Numbered lists and Indents)
  • Default Radius for Site Elements. (Example: buttons with rounded corners)

Moreover, Site Styles is infiintely extensible with Swatches. Swatches allow you to define individual styles that can be leveraged across any other stack on your site. This include styles for fonts, backgrounds, height, paddings & margins, overlays, shadows and much more. It's also where you load Features like Font Awesome, Utility Classes and other cool stuff.

Swatches

Swatches are the source of much of the new power that Foundation 6 brings. Swatches bring an entirely new workflow that will both save you time and make your websites faster. The basic premise behind a swatch is that you can create and manage your style in one central location. This allows you to apply the same styles to multiple stacks at once. This means that when you need to update your styles in the future, you can do it in just one place, saving you time and headache.

There are over 30 swatches included out of the box. In addition, there a bunch of 3rd party stacks that ship with swatches just for Foundation 6 as well. Here is a list of style swatches that ship with Foundation 6.

  • Background
  • Border
  • Font Color
  • Font Styles
  • Font Loader
  • Font Awesome 4 + 5 Pro
  • Height
  • Margin
  • Opacity
  • Padding
  • Background Overlay
  • Padding
  • Position
  • Rounding
  • Shadow
  • Width
  • Transition
  • Custom CSS
  • Compnent Colors
  • Text Colors
  • Menu Styles
  • Top Bar Styles

Font Awesome 5 Pro

You get a full Font Awesome 5 Pro license for every website that you build with Foundation 6. This include almost 8000 SVG icons that you can use throughout your site. This alone would cost you $99/yr if purchase directly from them.

Google + Web Fonts

You can load from over 1000 fonts on Google Fonts. You can also load any web font that you have purchased or downlaodoed off the web.

Site Preloader

When loading resources such as fonts, videos or large images, user can see a "flash of unstyled content" (commonly referred to as FLOUC) on your webpage. Foundation 6 ships with a perloader that can be added to your page so that usrs see a "loading" message along with a nice animated SVG. This can give your site that last professional touch that you need.

Below is a small sample of preloaders that can be used to fill the browser whiel the webpage assets are loading in the background.

Utility Classes

Site Styles supports hundreds of utility classes that you can easily add to any stacks element in order to apply premade styles without having to use a swatch. Overtime, you will come to use utility classes to quickly prototype layouts faster than ever before. Below is just a small sample of what is available.

Typescale
h1
h2
h3
h4
h5
h6
Adjust font-size by overriding an element’s default size. This can be useful to size a p or h1 through h6 using Foundation's existing header sizes.
Lead Paragraph
lead
A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.
Statistics
stat
You might need to display some important numbers real big. Just add this class to any element to amp up the font size.
Shadow
shadow
Add a basic shadow to anything with this class.
Un-bulleted List
no-bullet
In Foundation, the ul is a bulleted list and ol is a numbered list by default, but you can add this class to remove the bullets and numbers respectively.
Text Truncate
text-truncate
The .text-truncate class will truncate your text and display an elipsis. This class works for a single line of text.
Text Wrap
text-nowrap
text-wrap
If you would like to prevent the text wrapping into the next line you can utilize .text-nowrap. Please note that the text will continue to be in same line unless the br tag is used. To force text to wrap to the next line, you can use .text-wrap.
Content Alignment Classes
text-left center/right/justify
medium-text-left center/right/justify
large-text-left center/right/justify
You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element. Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, .medium-text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.
Visibility Classes
hide
visible
invisible
show-for-print
hide-for-print
show-for-dark-mode
hide-for-dark-mode
show-for-sr screen readers
show-for-portrait portrait/landscape
hide-for-portrait portrait/landscape
show-for-small small/medium/large
hide-for-small small/medium/large
show-for-small-only small/medium
hide-for-small-only small/medium
Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.
Float Classes
float-left
float-right
float-center
clearfix
You can change the float behavior of an element by adding the .float-left or .float-right classes to an element. To clear floats, add the class .clearfix to the parent element.
Okay, it's not really a float, but you can add the .float-center class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width.
Animate on Scroll
animate-on-scroll
When you add this class to a stack, it can trigger swatch transitions when scrolled into view. Create a base style swatch. Then create a second swatch for the style that will be applied after the stack has scrolled into view. In this swatch, you will want to set the Pseudo State to be Animated. You will also want to add a Transition swatch in order to control the timing of the style animation.
Unordered List Styling
list-disc
list-circle
list-square
list-decimal
In Foundation, the ul is a bulleted list, but you can add these classes to customize the type of bullets used.
Ordered List Styling
list-lower-alpha
list-lower-latin
list-lower-roman
list-upper-alpha
list-upper-latin
list-upper-roman
In Foundation, the ol is a numbered list, but you can add these classes to customize the type of index unit used.
Component Styling
radius
rounded
shadow
bordered
These classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.
Font Styling
font-normal
font-bold
font-italic
font-wide
You can use font styling to style your text. You can change the font styling by adding font-normal, font-bold, font-italic to an element. You can also wider the text of an element with font-wide.
Text Transformation
text-uppercase
text-lowercase
text-capitalize
Text transformation lets you control the capitalization of text. You can change the text transformation by adding .text-uppercase, text-lowercase, text-capitalize to an element.
Text Decoration
text-underline
text-overline
text-line-through
Text Decoration can be used to underline, overline, or line-through a text. You can change the text decoration by adding .text-underline, .text-overline, or .text-line-through to an element.
Border Box
border-box
Border box lets you only add the content, padding and border, but not the margin within the width and height CSS properties.
Border none
border-none
Border none lets you quickly resets border to none for any element.
Display Classes
display-inline
display-inline-block
display-block
display-table
display-table-cell
Display classes allow you to change the display property of any element.
Positioning
position-relative
position-absolute
position-fixed
position-fixed-top
position-fixed-bottom
position-static
Positioning classes help you change an element's position value. By default, an element's postion value is static.
Overflow
overflow-visible
overflow-hidden
overflow-scroll
overflow-x-visible hidden/scroll
overflow-y-visible hidden/scroll
These overflow classes helps you to clip content, render scrollbars or simply just display the content when it overflows its block level container.
Margin Helpers
Available Margin Sizes
auto, 0, 1, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256
m:{size} Margin All Sides
mt:{size} Margin Top
mb:{size} Margin Bottom
ml:{size} Margin Left
mr:{size} Margin Right
mx:{size} Margin Horizontal
my:{size} Margin Vertical
-{m|mt|mb|ml|mr|mx|my}:{size} Negative Margins
md:{m|mt|mb|ml|mr|mx|my}:{size} Medium Breakpoint
lg:{m|mt|mb|ml|mr|mx|my}:{size} Large Breakpoint
We have a large number of classes to allow you to easily add margins to your designs. There is a simple format to remember these classes: {breakpoint}:{margin}:{size}.
The breakpoint is optional. When excluded, the margin will apply to all sizes. You can supply a medium (md) and large (lg) options.
The margin is required. The available options are: Margin (m), Margin Top (mt), Margin Bottom (mb), Margin Left (ml), Margin Right (mr), Margin Horizontal/L&R (mx), Margin Vertical/T&B (my). When you prepend this with a dash (-), you can make the margin become a negative margin.
The size attribute can be any of the above values. If you are curious as to how these numbers actually affect the margins. For ease of use, all of the sizes are defined in pixels. However, on the published site, all values are set in REM. This is done in order to make your site sizing scale properly on mobile devices.
Padding Helpers
Available Padding Sizes
0, 1, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256
p:{size} Padding All Sides
pt:{size} Padding Top
pb:{size} Padding Bottom
pl:{size} Padding Left
pr:{size} Padding Right
px:{size} Padding Horizontal
py:{size} Padding Vertical
md:{p|pt|pb|pl|pr|px|py}:{size} Medium Breakpoint
lg:{p|pt|pb|pl|pr|px|py}:{size} Large Breakpoint
We have a large number of classes to allow you to easily add padding to your designs. There is a simple format to remember these classes: {breakpoint}:{padding}:{size}.
The breakpoint is optional. When excluded, the margin will apply to all sizes. You can supply a medium (md) and large (lg) options.
The padding is required. The available options are: Padding (p), Padding Top (pt), Padding Bottom (pb), Padding Left (pl), Padding Right (pr), Padding Horizontal/L&R (px), Padding Vertical/T&B (py).
The size attribute can be any of the above values. If you are curious as to how these numbers actually affect the padding. For ease of use, all of the sizes are defined in pixels. However, on the published site, all values are set in REM. This is done in order to make your site sizing scale properly on mobile devices.
Width Helpers
Available Width Sizes
auto, full, screen, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64
1/2
1/3, 2/3
1/4, 2/4, 3/4
1/5, 2/5, 3/5, 4/5
1/6, 2/6, 3/6, 4/6, 5/6
1/10, 2/10, 3/10, 4/10 ... 9/10
1/12, 2/12, 3/12, 4/12 ... 11/12
w:{size} Width
md:w:{size} Medium Breakpoint
lg:w:{size} Large Breakpoint
We have a large number of classes to allow you to easily define widths to your designs. There is a simple format to remember these classes: {breakpoint}:w:{size}.
The breakpoint is optional. When excluded, the width will apply to all sizes. You can supply a medium (md) and large (lg) options.
The size attribute can be any of the above values. As explained in margins and padding, each size is the scale is defined in pixels. But the published site will have REM.
Some sizes are defined as fractions. These will allow you to do percentage layouts easily. A size of 1/2 will be 50% and a size of 6/10 is 60%.
Height Helpers
Available Height Sizes
auto, full, screen, 0, 1, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256
10vh, 20vh, 30vh, 40vh, 50vh, 60vh, 70vh, 80vh, 90vh, 100vh
25vh, 50vh, 75vh
33vh, 66vh
h:{size} Height
md:h:{size} Medium Breakpoint
lg:h:{size} Large Breakpoint
We have a large number of classes to allow you to easily define heights to your designs. There is a simple format to remember these classes: {breakpoint}:h:{size}.
The breakpoint is optional. When excluded, the height will apply to all sizes. You can supply a medium (md) and large (lg) options.
The size attribute can be any of the above values. As explained in margins and padding, each size is the scale is defined in pixels. But the published site will have REM.
Z-Index Helpers
Available Z-Index Sizes
-1, 0, 1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 99, 999, 9999
-z:1 -1 z-index
z:{size} z-index
zmax maximum z-index
The size attribute can be any of the above values. So z:10 will result in a z-index of 10.
Background Color Helpers
Available Colors
white, black, light-gray, medium-gray, dark-gray
primary, secondary, success, warning, alert
bg:{color}
The color values are the corresponding colors that you define inside Site Styles. The Component Colors swatch will affect these color values as well.
Text Color Helpers
Available Colors
white, black, light-gray, medium-gray, dark-gray
primary, secondary, success, warning, alert
header, subheader, small, text, link
color:{color}
The color values are the corresponding colors that you define inside Site Styles. The Text Colors and Component Colors swatch will affect these color values as well.

Video Tutorials

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

Loading...