Foundation CSS Prototyping Utilities Sizing

Foundation CSS is one of the most popular front-end frameworks for web developers. It provides a wide range of utilities to help developers create responsive, mobile-first websites quickly and easily.

One of these utilities is sizing, which allows developers to set the height and width of HTML elements. In this article, we will take a closer look at how to use the sizing utilities in Foundation CSS for prototyping.

The Sizing Classes

Foundation CSS provides a range of sizing classes that developers can use to set the height and width of HTML elements. These classes are:

• .small-#: sets the width of an element to a small size, where # is a number between 1 and 12 (e.g. .small-6 sets the width to 50%)
• .medium-#: sets the width of an element to a medium size, where # is a number between 1 and 12
• .large-#: sets the width of an element to a large size, where # is a number between 1 and 12
• .expanded: sets the width of an element to 100%
• .full: sets the width and height of an element to 100%

Example Usage

Let's take a look at some examples of how to use these sizing classes for prototyping.

<!-- Small sized element -->
<div class="small-6">
  This element will take up 50% of the available width.
</div>

<!-- Medium sized element -->
<div class="medium-4">
  This element will take up around 33.33% of the available width.
</div>

<!-- Large sized element -->
<div class="large-2">
  This element will take up around 16.67% of the available width.
</div>

<!-- Expanded element -->
<div class="expanded">
  This element will take up 100% of the available width.
</div>

<!-- Full sized element -->
<div class="full">
  This element will take up 100% of the available width and height.
</div>

Conclusion

Using the sizing utilities in Foundation CSS, developers can quickly and easily set the height and width of HTML elements for prototyping. By using these classes, developers can create responsive, mobile-first websites that look great on any device.