Skip to content
Related Articles

Related Articles

Foundation CSS Prototyping Utilities Sass Reference

Improve Article
Save Article
  • Last Updated : 27 Sep, 2022
Improve Article
Save Article

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=
    <link rel="stylesheet" href=
    <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=
    <link rel="stylesheet" href=
    <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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!