Foundation CSS Prototyping Utilities Font Styling
Last Updated :
24 Mar, 2022
A Foundation 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.
In this article, we will learn about Font Styling Foundation CSS Prototyping Utility. Quickly prototype layouts and UI with Foundation’s Prototyping Utilities. These optional classes and mixins are great for quickly turning sketches and mockups into coded prototypes. This utility helps to provide some styling to the text
Foundation CSS Prototyping Utilities Font Styling Classes:
- font-wide: To make text larger
- font-normal: To display text normally without any styling
- font-bold: To make text bold
- font-italic: To make text in italic
Example 1: In this example, we will learn about classes font-bold and font-wide
HTML
<!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=
</head>
<body style="margin-inline: 30rem">
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<p class="font-wide">
Foundation CSS is the frontend framework
of CSS that is used to build responsive
websites, apps.
</p>
<h1 style="color: green">Font-Bold</h1>
<p class="font-bold">
It is written using HTML, CSS, and
Javascript and is used by many famous
companies like Amazon, Facebook,
eBay, etc. It uses packages like Grunt
and Libsass for fast coding and
controlling and Saas compiler to make
development faster.
</p>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Font Styling
Example 2: In this example, we will learn about font-italic and font-normal. Also, add some styling to them
HTML
<!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=
</head>
<body>
<h1 style="color:green">Font-Italic</h1>
<p class="font-italic" style="color:red">
Foundation CSS is the frontend
framework of CSS that is used to
build responsive websites, apps.
</p>
<h1 style="color:green">Font-Normal</h1>
<p class="font-normal" style="color:red">
It is written using HTML, CSS, and Javascript
and is used by many famous companies like Amazon,
Facebook, eBay, etc. It uses packages like Grunt
and Libsass for fast coding and controlling
and Saas compiler to make development faster.
</p>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
|
Output:
Foundation CSS Prototyping Utilities Font Styling
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#font-styling
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...