Foundation CSS Flexbox Utilities Sass Reference
Last Updated :
03 Nov, 2022
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.
Flexbox Utilities: In Foundation CSS, Flexbox classes are used to make horizontal and vertical alignments super easy.
Sass Reference:
Variables
| Name |
Type |
Default value |
Description |
| $flex-source-ordering-count |
Number |
6 |
This variable is used to set the source order. |
| $flexbox-responsive-breakpoints |
Boolean |
True |
This variable is used for quickly disabling/enabling Responsive breakpoints for Vanilla Flex Helpers. |
| $xy-grid |
Boolean |
True |
This variable is used to enable the XY grid. |
| $grid-container |
Number |
$global-width |
This variable is used for the maximum width of a grid container. |
| $grid-columns |
Number |
12 |
This variable is used for setting the number of columns. |
| $grid-margin-gutters |
Map or Length |
“small”: 20px
“medium”: 30px |
This variable is used for The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map. |
| $grid-padding-gutters |
Map or Length |
$grid-margin-gutters |
This variable is used for the amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map. |
| $grid-container-padding |
Map or Length |
$grid-padding-gutters |
This variable is used for padding the grid container. |
| $grid-container-max |
Number |
$global-width |
This variable is used to apply to the maximum width of the grid container. |
Example 1: The following example demonstrates the flexbox utility of Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS XY Grid Gutters</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
</head>
<body style="margin-inline:10rem;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Foundation CSS XY Grid Gutters</h3>
<div class="callout success">
<div class="grid-x grid-margin-x">
<div class="item1">
GFG
</div>
<div class="item2">
GFG
</div>
</div>
</div>
</center>
</body>
</html>
|
SASS code:
$grid-margin-gutters:100px;
.item1{
margin:$grid-margin-gutters;
background-color: aqua;
}
.item2{
margin:$grid-margin-gutters;
background-color: burlywood;
}
CSS code:
.item1 {
margin:100px;
background-color:aqua;
}
.item2 {
margin:100px;
background-color:burlywood;
}
Output:
Example 2: The following also demonstrates another example of flexbox utilities.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<br/>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<div class="ui top attached button">
Component before grid
</div>
<div class="ui grid">
<div class="sixteen wide column yellow"></div>
<div class="four wide column grey"></div>
<div class="four wide column red"></div>
<div class="four wide column blue"></div>
</div>
<div class="ui grid">
<div class="sixteen wide column green"></div>
</div>
<div class="ui bottom attached button">
Component after grid
</div>
</body>
</html>
|
SCSS code:
$grid-padding-gutters:50px;
.item1{
padding:$grid-padding-gutters;
}
.item2{
padding:$grid-padding-gutters;
}
Compiled CSS code:
.item1 {
padding:50px;
}
.item2 {
padding:50px;
}
Output:
Reference link: https://get.foundation/sites/docs/flexbox-utilities.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...