Foundation CSS Orbit Sass Reference
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
Please Login to comment...