Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Sizing Classes in Foundation CSS.
In Foundation CSS, Prototyping Utilities Sizing is used to give width and height to an element.
Foundation CSS Prototyping Utilities sizing classes:
- width: This class is used to give width to an element relative to its parent element.
- max-width: This class is used to give maximum width to an element relative to its parent element.
- height: This class is used to give height to an element relative to its parent element.
- max-height: This class is used to give maximum height to an element relative to its parent element.
Syntax:
<div class="Utilities-sizing-class">
...
</div>Note: We can use number after the class to b specific about height and width.
Example 1: Below is the example that illustrates the use of Prototyping Utilities sizing using width classes.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Prototyping Utilities Sizing</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script crossorigin="anonymous"
src=
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Prototyping Utilities Sizing</h3>
<div class="callout">
<div class="width-25 callout">GfG-W-25</div>
<div class="width-50 callout">GfG-W-50</div>
<div class="width-75 callout">GfG-W-75</div>
<div class="width-100 callout">GfG-W-100</div>
<div class="max-width-100 callout">
GeeksforGeeks-max
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: Below is the example that illustrates the use of Prototyping Utilities sizing using height classes.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Prototyping Utilities Sizing</title>
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<link rel="stylesheet" href=
crossorigin="anonymous">
<script crossorigin="anonymous"
src=
</script>
</head>
<body style="margin-inline: 30rem;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Prototyping Utilities Sizing</h3>
<div class="callout">
<div class="height-25 callout">GfG-H-25</div>
<div class="height-50 callout">GfG-H-50</div>
<div class="height-75 callout">GfG-H-75</div>
<div class="height-100 callout">GfG-H-100</div>
<div class="max-height-100 callout">
GeeksforGeeks-max
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Sizing
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#sizing