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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
    <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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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

Foundation CSS Flexbox Utilities Sass Reference

pokhrajverma6266

Improve

Article Tags :

Foundation CSS Flexbox Utilities Sass Reference

Similar Reads

Thank You!

What kind of Experience do you want to share?