Foundation CSS Prototyping Utilities Sass Reference

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Prototyping Utilities Separator helps to create the line gap ie., the tiny separator below the heading of an element, and is generally used inside the head section.

Variable Used:

Variable-Name	Description	Type	Default-Value
$prototype-arrow-directions	This variable is used to define the map containing all the arrow directions.	Map	down up right left
$prototype-arrow-size	This variable is used to define the width of the Arrow, 0.4375rem by default.	Number	0.4375rem
$prototype-arrow-color	This variable is used to define the color of the Arrow, $black by default.	Color	$black
$prototype-border-box-breakpoints	This variable is used to define the responsive breakpoints for the border box.	Boolean	$global-prototype-breakpoints
$prototype-border-none-breakpoints	This variable is used to define the responsive breakpoints for border none.	Boolean	$global-prototype-breakpoints
$prototype-bordered-breakpoints	This variable is used to define the responsive breakpoints for bordered utility.	Boolean	$global-prototype-breakpoints
$prototype-border-width	This variable is used to define the default value for prototype-border-width	Number	rem-calc(1)
$prototype-border-type	This variable is used to define the default value for prototype-border-type	String	solid
$prototype-border-color	This variable is used to define the default value for prototype-border-color defaulted to medium-gray	Color	$medium-gray
$prototype-display-breakpoints	This variable is used to define the responsive breakpoints for display classes.	Boolean	$global-prototype-breakpoints
$prototype-display	This variable is used to define the map containing all the display classes	Map	inline inline-block block table table-cell
$prototype-font-breakpoints	This variable is used to define the responsive breakpoints for font styling types.	Boolean	$global-prototype-breakpoints
$prototype-wide-letter-spacing	This variable is used to define the letter spacing for .font-wide	Number	rem-calc(4)
$prototype-font-normal	This variable is used to define the default weight for .font-normal, defaulted to global-weight-normal.	Number	$global-weight-normal
$prototype-font-bold	This variable is used to define the default weight for .font-bold, defaulted to global-weight-bold.	Number	$global-weight-bold
$prototype-list-breakpoints	This variable is used to define the responsive breakpoints for list styling types	Boolean	$global-prototype-breakpoints
$prototype-style-type-unordered	This variable is used to define the map containing all the style-type-unordered classes.	Map	disc circle square
$prototype-style-type-ordered	This variable is used to define the map containing all the style-type-ordered classes	Map	decimal lower-alpha lower-latin lower-roman upper-alpha upper-latin upper-roman
$prototype-overflow-breakpoints	This variable is used to define the responsive breakpoints for overflow helper classes	Boolean	$global-prototype-breakpoints
$prototype-overflow	This variable is used to define the map containing all the overflow classes	Map	visible hidden scroll
$prototype-position-breakpoints	This variable is used to define the responsive breakpoints for position helpers	Boolean	$global-prototype-breakpoints
$prototype-position	This variable is used to define the responsive breakpoints for position helpers	Map	static relative absolute fixed
$prototype-position-z-index	This variable is used to define the z-index for fixed positioning	Number	975
$prototype-rounded-breakpoints	This variable is used to define the responsive breakpoints for rounded utility.	Boolean	$global-prototype-breakpoints
$prototype-border-radius	This variable is used to define the default value for prototype-border-radius	Number	rem-calc(3)
$prototype-separator-breakpoints	This variable is used to define the responsive breakpoints for separators.	Boolean	$global-prototype-breakpoints
$prototype-separator-align	This variable is used to define the default alignment of a separator.	String	center
$prototype-separator-height	This variable is used to define the height of a separator.	Number	rem-calc(2)
$prototype-separator-width	This variable is used to define the width of a separator.	Number	3rem
$prototype-separator-background	This variable is used to define the default color of a separator.	Color	$primary-color
$prototype-separator-margin-top	This variable is used to define the top Margin of a separator.	Number	$global-margin
$prototype-shadow-breakpoints	This variable is used to define the responsive breakpoints for shadow utility.	Boolean	$global-prototype-breakpoints
$prototype-box-shadow	This variable is used to define the default value for prototype-box-shadow	Number	0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
$prototype-sizing-breakpoints	This variable is used to define the responsive breakpoints for spacing classes (margin and padding)	Boolean	$global-prototype-breakpoints
$prototype-sizing	This variable is used to define the map containing all the sizing classes	Map	width height
$prototype-sizes	This variable is used to define the map containing all the sizes.	Map	25: 25% 50: 50% 75: 75% 100: 100%
$prototype-spacing-breakpoints	This variable is used to define the responsive breakpoints for spacing classes (margin and padding)	Boolean	$global-prototype-breakpoints
$prototype-spacers-count	This variable is used to define the default number of spacers count (margin and padding)	Number	3
$prototype-decoration-breakpoints	This variable is used to define the responsive breakpoints for text decoration classes	Boolean	$global-prototype-breakpoints
$prototype-text-decoration	This variable is used to define the map containing all the text-decoration classes	Map	overline underline line-through
$prototype-transformation-breakpoints	This variable is used to define the responsive breakpoints for text transformation classes	Boolean	$global-prototype-breakpoints
$prototype-text-transformation	This variable is used to define the map containing all the text-transformation classes	Map	lowercase uppercase capitalize
$prototype-utilities-breakpoints	This variable is used to define the responsive breakpoints for text utilities	Boolean	$global-prototype-breakpoints
$prototype-text-overflow	This variable is used to define the default value for text-overflow variable	String	ellipsis

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the prototyping utilities.

HTML

<html>

<head>
    <link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
    <link rel="stylesheet" href="style.css">
</head>

<body style="margin:5px;">
      <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3>
      </center>
    <br>
    <h3 class="separator-center">GfG</h3>
</body>
</html>

SASS Code:

$prototype-separator-align:center;
.separator-center {
  text-align: $prototype-separator-align;
}

Compiled CSS Code:

.separator-center {
  text-align:center; 
}

Output:

Example 2:  In the below code, we will make use of the above variable to demonstrate the use of the prototyping utilities.

HTML

<html>

<head>
    <link crossorigin="anonymous" rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"https://get.foundation/sites/docs/assets/css/docs.css">
    <link rel="stylesheet" href="style.css">
</head>

<body style="margin:5px;">
     <center>
          <h1 style="color:green">GeeksforGeeks</h1>
          <h3>A computer science portal for geeks</h3>
          <br>
          <h3 class="separator-center">GfG</h3>
     </center>
</body>
</html>

SASS Code:

$prototype-separator-width:3rem;
.separator-center {
  width: $prototype-separator-width;
}

Compiled CSS Code:

.separator-center {
   width: 3rem;
}

Output:

Reference: https://get.foundation/sites/docs/prototyping-utilities.html