A Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos sobre la utilidad de creación de prototipos CSS de Font Styling Foundation. Realice prototipos de diseños y UI rápidamente con Prototyping Utilities de Foundation. Estas clases y combinaciones opcionales son excelentes para convertir rápidamente bocetos y maquetas en prototipos codificados. Esta utilidad ayuda a proporcionar algo de estilo al texto.
Foundation CSS Prototyping Utilities Clases de estilo de fuente:
- font-wide: para agrandar el texto
- font-normal: para mostrar el texto normalmente sin ningún estilo
- font-bold: para poner el texto en negrita
- font-italic: Para poner texto en cursiva
Ejemplo 1: En este ejemplo, aprenderemos sobre las clases font-bold y 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">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>
Producción:
Foundation CSS Prototyping Utilities Font Styling
Ejemplo 2: En este ejemplo, aprenderemos sobre font-italic y font-normal. Además, agrégales un poco de estilo.
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>
Producción:
Foundation CSS Prototyping Utilities Font Styling
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#font-styling
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA