Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos para que se vean increíbles y puedan ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las clases auxiliares de Foundation CSS nos permiten crear andamios en ciertos estilos tipográficos más rápido. Foundation CSS tiene varios ayudantes de tipografía, como alineación de texto, subtítulo, párrafo principal, lista sin viñetas, estadísticas y escala de tipos. En este artículo, aprenderemos sobre el asistente tipográfico de estadísticas.
El asistente tipográfico de estadísticas de CSS de Foundation se utiliza para mostrar algunos números importantes en una fuente muy grande. Para usar el ayudante tipográfico de estadísticas en Foundation CSS, usamos la clase «stat» . La clase stat aumenta el tamaño de fuente del elemento al que se aplica y se puede usar con elementos <p>, <div> y <span>.
Clase auxiliar tipográfica de estadísticas de CSS de Foundation:
- stat: la clase stat aumenta el tamaño de fuente del elemento al que se aplica.
Sintaxis:
<div class="stat">Content</div>
Ejemplo 1: El siguiente ejemplo demuestra la clase auxiliar tipográfica Estadísticas en el elemento <div>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Statistics Typographic Helper </strong> <br/><br/> <p>No. of students taking Geeksforgeeks Courses</p> <div class="stat">9999999</div> </body> </html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo demuestra la clase auxiliar tipográfica Estadísticas en el elemento <span> como un div en línea.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <strong> Foundation CSS Statistics Typographic Helper </strong> <br/><br/> <p><span class="stat">Y</span>our Technical Interview Round Depends On Data Structures And Algorithms.<br/> <span class="stat">E</span>nroll today. <span class="stat">D</span>ata Structures And Algorithms Is The Key To Selection In Product Based Companies. <br/> <span class="stat">G</span>et Certified. <span class="stat">I</span>internship Opportunities. Content Lifetime Validity. 1:1 Doubt Assistance. </p> </body> </html>
Producción:
Producción
Referencia: https://get.foundation/sites/docs/typography-helpers.html#statistics
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA