Foundation CSS Responsive Embed Sass Reference
Last Updated :
25 Oct, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...