Foundation CSS Off-canvas Sass Reference

Last Updated : 09 Sep, 2022

Foundation CSS is an open-source and 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 and 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 Off-canvas panels are located outside of the viewport and slide in when activated. There are various positions to open the Off-canvas menus ie., it can open from left, right, top or bottom, overlap our content, push our content, and can work with sticky elements. These are responsive mobile patterns, mainly used for mobile screens. This can also be used as a sidebar on medium and desktop screens.

Variable Used:

Variable-Name	Description	Type	Default-Value
$offcanvas-sizes	This variable is used to define the width map of a left/right off-canvas panel.	Map	small: 250px
$offcanvas-vertical-sizes	This variable is used to define the height map of a top/bottom off-canvas panel.	Map	small: 250px
$offcanvas-background	This variable is used to define the background color of an off-canvas panel.	Color	$light-gray
$offcanvas-shadow	This variable is used to define the box shadow for the off-canvas overlap panel.	Shadow	0 0 10px rgba($black, 0.7)
$offcanvas-inner-shadow-size	This variable is used to define the inner box shadow size for the off-canvas push panel.	Number	20px
$offcanvas-inner-shadow-color	This variable is used to define the inner box shadow color for the off-canvas push panel.	Color	rgba($black, 0.25)
$offcanvas-overlay-zindex	This variable is used to define the z-index of an off-canvas content overlay.	Number	11
$offcanvas-push-zindex	This variable is used to define the z-index of an off-canvas panel with the push transition.	Number	12
$offcanvas-overlap-zindex	This variable is used to define the z-index of an off-canvas panel with the overlap transition.	Number	13
$offcanvas-reveal-zindex	This variable is used to define the z-index of an off-canvas panel using the reveal-for-* classes or mixin.	Number	12
$offcanvas-transition-length	This variable is used to define the length of the animation on an off-canvas panel.	Number	0.5s
$offcanvas-transition-timing	This variable is used to define the timing function of the animation on an off-canvas panel.	Keyword	ease
$offcanvas-fixed-reveal	If this variable is true, then it will reveal that off-canvas will be fixed-position and scroll with the screen.	Bool	true
$offcanvas-exit-background	This variable is used to define the background color for the overlay that appears when an off-canvas panel is open.	Color	rgba($white, 0.25)
$maincontent-class	This variable is used to define the CSS class used for the main content area.		‘off-canvas-content’
$titlebar-background	This variable is used to define the background color of a title bar.	Color	$black
$titlebar-color	This variable is used to define the color of text inside a title bar.	Color	$white
$titlebar-padding	This variable is used to define the padding inside a title bar.	Length	0.5rem
$titlebar-text-font-weight	This variable is used to define the font weight of text inside a title bar.	Weight	bold
$titlebar-icon-color	This variable is used to define the color of menu icons inside a title bar.	Color	$white
$titlebar-icon-color-hover	This variable is used to define the color of menu icons inside a title bar on hover.	Color	$medium-gray
$titlebar-icon-spacing	This variable is used to define the spacing between the menu icon and text inside a title bar.	Length	0.25rem

Example 1: In the below code, we will use the above variable to demonstrate the use of the Off-canvas.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>    Foundation CSS Off-canvas Combining with Title Bar    </title> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
      
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
   <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3> A computer science portal for geeks</h3> 
    </center> 
    <div class="title-bar"> 
        <div class="title-bar-left"> 
            <button class="menu-icon" type="button"
                data-open="offCanvasLeftSplit1"    data-close> 
            </button> 
            <span class="title-bar-title"> 
                Foundation 
            </span> 
        </div> 
        <div class="title-bar-right"> 
            <button class="menu-icon"
                    type="button"
                    data-open="offCanvasRightSplit2"> 
            </button> 
        </div> 
    </div> 
    <div class="grid-x grid-margin-x"
         style="list-style-type:none;"> 
        <div class="cell small-6"> 
            <div class="off-canvas-wrapper"> 
                <div class="off-canvas-absolute position-left"
                    id="offCanvasLeftSplit1" data-off-canvas> 
                    <button class="close-button" 
                            aria-label="Close menu"
                            type="button" data-close> 
                        <span aria-hidden="true"> 
                            × 
                        </span> 
                    </button> 
                    <ul class="menu vertical"> 
                        <li> 
                            <a href="#">One</a> 
                        </li> 
                        <li> 
                            <a href="#">Two</a> 
                        </li> 
                        <li> 
                            <a href="#">Three</a> 
                        </li> 
                    </ul> 
                </div> 
                <div class="off-canvas-content"
                    style="min-height:300px;" 
                    data-off-canvas-content> 
                </div> 
            </div> 
        </div> 
        <div class="cell small-6"> 
            <div class="off-canvas-wrapper"> 
                <div class="off-canvas-absolute position-right"
                    id="offCanvasRightSplit2" data-off-canvas> 
                    <button class="close-button" 
                            aria-label="Close menu"
                            type="button" data-close> 
                        <span aria-hidden="true"> 
                            × 
                        </span> 
                    </button> 
                    <ul class="menu vertical"> 
                        <li> 
                            <a href="#">Four</a> 
                        </li> 
                        <li> 
                            <a href="#">Five</a> 
                        </li> 
                        <li> 
                            <a href="#">Six</a> 
                        </li> 
                    </ul> 
                </div> 
                <div class="off-canvas-content"
                     style="min-height:300px;" 
                     data-off-canvas-content> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html>

SASS Code:

$offcanvas-background: lightgrey;
.title-bar {
   background-color:$offcanvas-background;
}

Compiled CSS Code:

.title-bar {
   background-color: lightgrey;
}

Output:

Example 2: In the below code, we will use the above variable to demonstrate the use of the off-canvas class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>    Foundation CSS Off-canvas Combining with Title Bar    </title> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
      
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
   <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3> A computer science portal for geeks</h3> 
    </center> 
    <div class="title-bar"> 
        <div class="title-bar-left"> 
            <button class="menu-icon" type="button"
                data-open="offCanvasLeftSplit1"    data-close> 
            </button> 
            <span class="title-bar-title"> 
                Foundation 
            </span> 
        </div> 
        <div class="title-bar-right"> 
            <button class="menu-icon"
                    type="button"
                    data-open="offCanvasRightSplit2"> 
            </button> 
        </div> 
    </div> 
    <div class="grid-x grid-margin-x"
         style="list-style-type:none;"> 
        <div class="cell small-6"> 
            <div class="off-canvas-wrapper"> 
                <div class="off-canvas-absolute position-left"
                    id="offCanvasLeftSplit1" data-off-canvas> 
                    <button class="close-button" 
                            aria-label="Close menu"
                            type="button" data-close> 
                        <span aria-hidden="true"> 
                            × 
                        </span> 
                    </button> 
                    <ul class="menu vertical"> 
                        <li> 
                            <a href="#">One</a> 
                        </li> 
                        <li> 
                            <a href="#">Two</a> 
                        </li> 
                        <li> 
                            <a href="#">Three</a> 
                        </li> 
                    </ul> 
                </div> 
                <div class="off-canvas-content"
                    style="min-height:300px;" 
                    data-off-canvas-content> 
                </div> 
            </div> 
        </div> 
        <div class="cell small-6"> 
            <div class="off-canvas-wrapper"> 
                <div class="off-canvas-absolute position-right"
                    id="offCanvasRightSplit2" data-off-canvas> 
                    <button class="close-button" 
                            aria-label="Close menu"
                            type="button" data-close> 
                        <span aria-hidden="true"> 
                            × 
                        </span> 
                    </button> 
                    <ul class="menu vertical"> 
                        <li> 
                            <a href="#">Four</a> 
                        </li> 
                        <li> 
                            <a href="#">Five</a> 
                        </li> 
                        <li> 
                            <a href="#">Six</a> 
                        </li> 
                    </ul> 
                </div> 
                <div class="off-canvas-content"
                     style="min-height:300px;" 
                     data-off-canvas-content> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html>

SASS Code:

$titlebar-background: green;
.title-bar {
   background-color:$titlebar-background;
}

Compiled CSS Code:

.title-bar {
   background-color: green; 
}

Output:

Reference: https://get.foundation/sites/docs/off-canvas.html

Suggest improvement

Foundation CSS Card Sass Reference

Share your thoughts in the comments

Foundation CSS Off-canvas Sass Reference

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?