Foundation Utilities

Live Preview: Margin and Padding

Foundation Code:

<!-- Padding -->
<div class="padding-1">Small padding</div>
<div class="padding-2">Medium padding</div>
<div class="padding-3">Large padding</div>

<!-- Margin -->
<div class="margin-1">Small margin</div>
<div class="margin-2">Medium margin</div>
<div class="margin-3">Large margin</div>

<!-- Directional spacing -->
<div class="margin-top-1">Top margin</div>
<div class="padding-left-2">Left padding</div>

Live Preview: Responsive Visibility

Foundation Code:

<!-- Show for screen sizes -->
<div class="show-for-small-only">Visible only on small screens</div>
<div class="show-for-medium">Visible on medium and up</div>
<div class="show-for-large">Visible on large and up</div>

<!-- Hide for screen sizes -->
<div class="hide-for-small-only">Hidden on small screens</div>
<div class="hide-for-medium">Hidden on medium and up</div>

<!-- Orientation -->
<div class="show-for-landscape">Visible in landscape</div>
<div class="show-for-portrait">Visible in portrait</div>

<!-- Screen reader only -->
<div class="show-for-sr">Screen reader only</div>

Live Preview: Text Alignment & Styles

Left aligned text

Center aligned text

Right aligned text

LOWERCASE TEXT

uppercase text

capitalized text

Bold text

Italic text

Foundation Code:

<!-- Text alignment -->
<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>

<!-- Text transformation -->
<p class="text-lowercase">LOWERCASE TEXT</p>
<p class="text-uppercase">uppercase text</p>
<p class="text-capitalize">capitalized text</p>

<!-- Text styles -->
<p class="lead">Leading paragraph</p>
<p class="subheader">Subheader text</p>

<!-- Responsive text alignment -->
<p class="medium-text-center">Center on medium+</p>
<p class="small-only-text-left">Left only on small</p>

Live Preview: Text and Background Colors

Foundation Code:

<!-- Text colors -->
<p class="primary">Primary text</p>
<p class="secondary">Secondary text</p>
<p class="success">Success text</p>
<p class="warning">Warning text</p>
<p class="alert">Alert text</p>

<!-- Background colors -->
<span class="primary badge">Primary</span>
<span class="secondary badge">Secondary</span>
<span class="success badge">Success</span>
<span class="warning badge">Warning</span>
<span class="alert badge">Alert</span>

<!-- Light/Dark backgrounds -->
<div class="callout primary">Primary callout</div>
<div class="callout success">Success callout</div>

Live Preview: Positioning

Foundation Code:

<!-- Positioning -->
<div class="position-relative" style="height: 100px;">
  <div class="position-absolute top left">Top Left</div>
  <div class="position-absolute top right">Top Right</div>
</div>

<!-- Fixed positioning -->
<div class="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>

<!-- Floats -->
<div class="float-left">Left float</div>
<div class="float-right">Right float</div>
<div class="clearfix"></div>

Live Preview: Flexbox Layout

Foundation Code:

<!-- Flex container -->
<div class="flex-container">
  <div class="flex-child">Flex item 1</div>
  <div class="flex-child">Flex item 2</div>
</div>

<!-- Flex alignment -->
<div class="flex-container align-justify">
  <div>Justified</div>
  <div>Justified</div>
</div>

<div class="flex-container align-middle">
  <div>Vertically centered</div>
</div>

<!-- Flex direction -->
<div class="flex-container flex-dir-column">
  <div>Column direction</div>
</div>