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 >
< 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 >
< 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