Foundation CSS Prototyping Utilities Font Styling
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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin = "anonymous" /> < script crossorigin = "anonymous" src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" ></ script > </ head > < body style = "margin-inline: 30rem" > < center > < h1 style = "color: green" >w3wiki</ 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:
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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin = "anonymous" /> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin = "anonymous" /> < script crossorigin = "anonymous" src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" ></ script > </ 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:
Reference: https://get.foundation/sites/docs/prototyping-utilities.html#font-styling
Contact Us