Open In App

Foundation CSS Orbit Sass Reference

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on Bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Orbit is used to create the slider that swipes the elements using the orbit class. We can put any type of content inside the slides. 

Variable Used:

Variable-Name Description Type      Default-Value
$orbit-bullet-background  This variable is used to define the default color for Orbit’s bullets.  Color $medium-gray 
 
$orbit-bullet-background-active  This variable is used to define the default active color for Orbit’s bullets. Color  $dark-gray 
 
$orbit-bullet-diameter  This variable is used to define the default diameter for Orbit’s bullets. Number 1.2rem 
 
$orbit-bullet-margin  This variable is used to define the default margin between Orbit’s bullets. Number  0.1rem 
 
$orbit-bullet-margin-top  This variable is used to define the default distance from the slide region for Orbit’s bullets. Number  0.8rem 
 
$orbit-bullet-margin-bottom  This variable is used to define the default bottom margin from Orbit’s bullets to whatever content may lurk below it. Number  0.8rem 
 
$orbit-caption-background  This variable is used to define the default background color for Orbit’s caption. Color  rgba($black, 0.5) 
 
$orbit-caption-padding  This variable is used to define the default padding for Orbit’s caption. Number 1rem 
 
$orbit-control-background-hover  This variable is used to define the default background color for Orbit’s controls when hovered. Color rgba($black, 0.5) 
 
$orbit-control-padding  This variable is used to define the default padding for Orbit’s controls. Number 1rem
$orbit-control-zindex  This variable is used to define the default z-index for Orbit’s controls. Number          10

Example 1: In the below code, we will make use of the above variable to demonstrate the use of orbit.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Foundation CSS Orbit </title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
  
</head>
  
<body>
    <center>
        <h2 style="color:green;"> GeeksforGeeks </h2>
        <strong> Foundation CSS Orbit </strong>
    </center>
  
    <div class="orbit" role="region" 
        data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
            <button class="orbit-previous" aria-label="previous">
                <span class="show-for-sr"> Previous </span>            
            </button>
            <button class="orbit-next" aria-label="next">
                <span class="show-for-sr"> Next </span>            
            </button>
  
            <li class="is-active orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 1 </h3>
                    <p class="text-center">
                        A Computer Science portal for geeks.
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles
                    </p>
  
                </div>
            </li>
  
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 2 </h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions.
                    </p>
  
                </div>
            </li>
  
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 3 </h3>
                    <p class="text-center">
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles. A Computer Science
                        portal for geeks.
                    </p>
  
                </div>
            </li>
        </ul>
  
        <nav class="orbit-bullets">
            <button class="is-active" data-slide="0">
                <span class="show-for-sr">slide 1 </span>
                <span class="show-for-sr"> Current Slide </span>
            </button>
  
            <button data-slide="1">
                <span class="show-for-sr">slide 2 </span>
            </button>
  
            <button data-slide="2">
                <span class="show-for-sr">slide 3 </span>
            </button>
        </nav>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
</html>


SASS Code:

$orbit-caption-background: green;
.is-active {
  background-color:$orbit-caption-background;
}

Compiled CSS Code:

.is-active {
  background-color: green; 
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of orbit.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Foundation CSS Orbit </title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
  
</head>
  
<body>
    <center>
        <h2 style="color:green;"> GeeksforGeeks </h2>
        <strong> Foundation CSS Orbit </strong>
    </center>
  
    <div class="orbit" role="region" data-orbit data-use-m-u-i="false">
        <ul class="orbit-container">
            <button class="orbit-previous" aria-label="previous">
                <span class="show-for-sr"> Previous </span>            
            </button>
            <button class="orbit-next" aria-label="next">
                <span class="show-for-sr"> Next </span>            
            </button>
  
            <li class="is-active orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 1 </h3>
                    <p class="text-center">
                        A Computer Science portal for geeks.
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles
                    </p>
  
                </div>
            </li>
  
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 2 </h3>
                    <p class="text-center">
                        GeeksforGeeks.org was created with
                        a goal in mind to provide well written,
                        well thought and well explained solutions
                        for selected questions.
                    </p>
  
                </div>
            </li>
  
            <li class="orbit-slide">
                <div>
                    <h3 class="text-center"> GFG slide 3 </h3>
                    <p class="text-center">
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles. A Computer Science
                        portal for geeks.
                    </p>
  
                </div>
            </li>
        </ul>
  
        <nav class="orbit-bullets">
            <button class="is-active" data-slide="0">
                <span class="show-for-sr">slide 1 </span>
                <span class="show-for-sr"> Current Slide </span>
            </button>
  
            <button data-slide="1">
                <span class="show-for-sr">slide 2 </span>
            </button>
  
            <button data-slide="2">
                <span class="show-for-sr">slide 3 </span>
            </button>
        </nav>
    </div>
  
    <script>
        $(document).foundation();
    </script>
</body>
</html>


SASS Code:

$orbit-bullet-margin: 0.1rem;
.orbit-bullets{
  margin:$orbit-bullet-margin;
}

Compiled CSS Code:

.orbit-bullets {
  margin: 0.1rem; 
 }

Output:

 

Reference: https://get.foundation/sites/docs/orbit.html



Last Updated : 31 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads