Foundation CSS Responsive Embed Sass Reference
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device.
Responsive Embed: In the modern days, we access websites from various devices of different screen sizes. So it is essential that the website looks perfect in different screen sizes. The responsive embed component helps with that. This component helps to embed components like video, calendar, and many others inside a responsive container so that it maintains the proper size ( or aspect ratio) irrespective of the screen size.
Variable Used:
| Variable Name | Description | Type | Default-Value |
|---|---|---|---|
| $responsive-embed-margin-bottom | This variable is used for a given margin from the bottom to a responsive embed container. | Number | rem-calc(16) |
| $responsive-embed-ratios | This variable is used for given padding from the bottom to a responsive embed container. | Map | default: 4 by 3 widescreen: 16 by 9 |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of Responsive Embed.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= crossorigin="anonymous"> <script src= crossorigin="anonymous"> </script> <link rel="stylesheet" href="style.css"></head> <body style="margin:10px;"> <h2 style="color:green;">GeeksforGeeks</h2> <strong>Foundation CSS Responsive Embed</strong> <br/> <div class="container" style= "border:2px solid red;"> GFG </div> <p> A Computer Science portal for geeks.Gain and share your knowledge & skills with a variety of learning platforms offered by GeeksforGeeks. Billions ofUsers, Millions of Articles Published,Thousands Got Hired by Top Companiesand the numbers are still growing. </p> <script> $(document).foundation(); </script></body></html> |
SASS code:
$responsive-embed-margin-bottom: 50px;
.container
{
margin-bottom: $responsive-embed-margin-bottom;
}Compiled CSS Code:
.container
{
margin-bottom: 50px;
}Output:
Example 2: In this example, we illustrate the margin-bottom property using the Foundation CSS responsive SASS reference.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width,initial-scale=1.0"> <link rel="stylesheet" href= crossorigin="anonymous"> <script src= crossorigin="anonymous"> </script> <link rel="stylesheet" href="style.css"> </head> <body style="margin:10px;"> <h2 style="color:green;">GeeksforGeeks</h2> <strong>Foundation CSS Responsive Embed</strong> <br/> <div class="container-embed"> <img src= > </div> <div style="background-color:rgb(184, 210, 17); "> A Computer Science portal for geeks.Gain and share your knowledge & skills with a variety of learning platforms offered by GeeksforGeeks. Billions ofUsers, Millions of Articles Published,Thousands Got Hired by Top Companiesand the numbers are still growing. We provide a variety of services foryou to learn, thrive and also have fun! </div> <script> $(document).foundation(); </script></body></html> |
SASS code:
CSS
$responsive-embed-margin-bottom: 40px; .container-embed{ margin-bottom: $responsive-embed-margin-bottom;} |
Compiled CSS code:
CSS
.container-embed { margin-bottom: 40px;} |
Output:
Reference: https://get.foundation/sites/docs/responsive-embed.html#sass-reference
Please Login to comment...