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 y Escala tipográfica. En este artículo, aprenderemos sobre el asistente tipográfico de párrafo principal .
El ayudante tipográfico Foundation CSS Lead Paragraph crea un bloque de texto un poco más grande que es útil para anuncios publicitarios y otro texto descriptivo. Para convertir un bloque de texto en Párrafo principal en Foundation CSS, usamos la clase principal. Esta clase se puede aplicar a cualquier etiqueta con un contenido de bloque de texto, es decir , etiquetas <div> , <span> o <h1> .
Clase auxiliar tipográfica de párrafo principal de CSS básico:
- lead: esta clase aumenta ligeramente el tamaño de la fuente para crear un bloque de texto más grande y más audaz.
Sintaxis:
<div class="lead">Content</div>
Ejemplo 1: El siguiente ejemplo demuestra la clase auxiliar tipográfica Párrafo principal comparándola con un bloque de texto normal.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Typography Helpers Lead Paragraph</title> <!-- 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 style="padding: 30px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Lead Paragraph Typographic Helper </strong> <br/><br/> <div>This is a normal block of text.</div> <div class="lead"> This is a block of text with Lead Paragraph helper class.</div> </body> </html>
Producción:
Foundation CSS Typography Helpers Párrafo principal
Ejemplo 2: El siguiente ejemplo demuestra la clase auxiliar tipográfica Párrafo principal en una tarjeta con diferentes colores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Typography Helpers Lead Paragraph</title> <!-- 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 style="padding: 30px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Foundation CSS Lead Paragraph Typographic Helper </strong> <br/><br/> <div class="card" style="width: 300px;"> <div class="card-divider"> This is a normal block. </div> <div class="card-divider"> <div class="lead">This is a lead block.</div> </div> <div class="card-section" style="color: green;"> This is a normal description card.<br/> <div class="lead"> This is a lead description card. </div> </div> </div> </body> </html>
Producción:
Foundation CSS Typography Helpers Párrafo principal
Referencia: https://get.foundation/sites/docs/typography-helpers.html#lead-paragraph
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA