Foundation CSS Off-canvas Sizes

Last Updated : 19 Sep, 2023

Foundation CSS Off-canvas Sizes facilitate the modification of the type of variables for off-canvas size from number to map, which defines the breakpoint for the specific sizes, rather than providing a single value for all the variables. Every key that is defined in the $breakpoint-classes, may contained by the map. In simple words, it offers a configurable grid system that enables developers to specify Off-canvas menu sizes. When the Off-canvas menu is visible, its size determines how much of the screen it takes up. Small, medium, large, and xlarge are the four preset sizes that are accessible in Foundation CSS. Depending on the needs of the design, each size class has a certain width that can be employed.

Foundation CSS Off-canvas Sizes

Small: The “small” Off-canvas size is intended to fit tiny gadgets like mobile phones and little tablets. It takes up the whole width of the screen.
Medium: Larger tablets and smaller desktop devices may both use the “medium” Off-canvas size. It takes up 80% of the screen’s width.
Large: The “large” Off-canvas size offers a broader Off-canvas menu than the other sizes and is designed for desktop displays. Given that it takes over 70% of the screen’s width.
X-large: The largest preset size offered by Foundation CSS is “xlarge” Off-canvas. It is appropriate for bigger desktop screens or when a more expansive Off-canvas menu is needed because it takes up 60% of the screen width.

Syntax:

<div class="off-canvas Classes">
     <!-- Off-canvas content goes here -->
</div>

Example: This example illustrates the Foundation CSS Off-Canvas Sizes by specifying a small size font-size.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/foundation/6.6.3/foundation.min.css" /> 
    <script src= 
"https://cdn.jsdelivr.net/foundation/6.6.3/foundation.min.js"> 
    </script> 
    <style> 
        .off-canvas.position-left { 
            width: 100%; 
            background-color: #4a86e8; 
            padding: 20px; 
            color: #333333; 
            font-family: Arial, sans-serif; 
            font-size: 14px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="off-canvas position-left"> 
        <h2>Small Off-canvas Menu</h2> 
        <ul> 
            <li>Home</li> 
            <li>About</li> 
            <li>Services</li> 
            <li>Contact</li> 
        </ul> 
    </div> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Example: This is another example that illustrates the Foundation CSS Off-Canvas Sizes by implementing the Sass code. Here, we have used a large font-size.

Sass code

CSS

$color_1: #ffffff; 
$font-family_1: Arial, sans-serif; 
$background-color_1: #e74c3c; 
  
.off-canvas.position-left-large { 
    width: 70%; 
    background-color: $background-color_1; 
    padding: 40px; 
    color: $color_1; 
    font-family: $font-family_1; 
    font-size: 18px; 
}

The compiled CSS code for the above SASS code is given below:

CSS Code:

CSS

.off-canvas.position-left-large { 
    width: 70%; 
    background-color: #e74c3c; 
    padding: 40px; 
    color: #ffffff; 
    font-family: Arial, sans-serif; 
    font-size: 18px; 
}

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
          href="styles.css"> 
</head> 
  
<body> 
    <div class="off-canvas position-left-large"> 
        <h2>Large Off-canvas Menu</h2> 
        <ul> 
            <li>Home</li> 
            <li>About</li> 
            <li>Services</li> 
            <li>Contact</li> 
        </ul> 
    </div> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>