Tipografía
El módulo Ignite UI for Angular Typography Sass le permite modificar la tipografía de todos los componentes de su aplicación, escala tipográfica específica o componentes específicos.
Descripción general
Una aplicación puede definir múltiples scales de tipografía que pueden compartir categorías de escala entre sí. Una scale category es un conjunto de type styles que contiene información sobre font-family, font-size, font-weight, line-height, letter-spacing y text-transform.
Ignite UI for Angular expone 4 escalas de tipos predeterminadas para cada uno de sus temas: $material-type-scale, $fluent-type-scale, $bootstrap-type-scale y $indigo-type-scale, que a su vez son utilizadas por la combinación typography para establecer los estilos de tipografía. Sin embargo, puede crear escalas de tipos adicionales.
En muchos casos, solo necesitará realizar ligeras modificaciones en la tipografía, por lo que se recomienda leer primero la sección Tipografía de la documentación de Variables CSS, si aún no lo ha hecho. Solo es necesario usar Sass para modificar la tipografía si desea realizar cambios más profundos relacionados con toda la escala tipográfica.
Usage
Important
De forma predeterminada, no aplicamos ningún estilo de tipografía. Para utilizar nuestra tipografía en su aplicación, debe configurar la clase CSS ig-typography en un elemento de nivel superior e incluir el mixin typography en su archivo.scss base.
Hemos seleccionado Titillium Web como fuente predeterminada en el tema Material de Ignite UI for Angular. Para usarlo tienes que alojarlo tú mismo o incluirlo desde Google Fonts:
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
Hay varios mixins y funciones que se utilizan para establecer y recuperar estilos de categoría hacia/desde una escala de tipos. Esos son:
type-style[función]: devuelve un conjunto de reglas de estilo que se utilizarán en una categoría de escala de tipo.type-scale[función] - Devuelve un conjunto de 13 categorías de estilo.type-scale-category[función] - Devuelve un mapa de reglas de estilo de una escala y categoría de tipos.type-style[mixin] - Agrega reglas de estilo a un selector de una escala y categoría de tipo específicas.type-style-vars[mixin]: agrega reglas de estilo a un selector de un estilo de letra específico.typography[mixin] - Define los estilos de tipografía de la aplicación global.
Echemos un vistazo más de cerca a lo que hace cada uno de los mixins y funciones antes mencionados.
The Type Style
La función type-style es una función similar a una interfaz que simplemente garantiza que ciertos argumentos se pasen como parte del estilo establecido para una categoría de escala. Digamos, por ejemplo, que queremos definir un nuevo conjunto de reglas de estilo para la categoría de escala h1. Para hacerlo, simplemente podríamos escribir:
$h1-style: type-style(
$font-size: 112px,
$font-weight: 600,
$line-height: 96px,
...
);
The Type Scale
La escala de tipos produce un mapa de 13 estilos tipográficos utilizados como categorías de escala. Para generar una nueva escala de tipo, haga lo siguiente:
$my-type-scale: type-scale(...);
Important
Debe proporcionar un estilo de letra para cada una de las 13 categorías de escala. Se puede generar un estilo utilizando la función type-style como se muestra arriba.
$my-type-scale: type-scale($h1: $h1-style, [$h2...$overline]);
Puede modificar una escala de tipos existente ampliándola. Para cambiar el estilo de tipo h1 de $material-type-scale puedes hacer:
$my-type-scale: extend(
$material-type-scale,
(
h1: type-style(...)
)
);
Agregar estilos de letra adicionales a una escala es igual de fácil:
$my-type-category: type-style(
$font-weight: 600,
$font-size: 42px,
$text-transform: uppercase,
...
);
$my-type-scale: extend(
$my-type-scale,
(
'my-category': $my-type-category
)
);
The Typography Mixin
El mixin de tipografía define los estilos de tipografía globales para una aplicación, incluido el estilo de los elementos nativos h1-h6 y p.
Actualmente acepta 2 argumentos:
$font-family: la familia de fuentes global que utilizará la aplicación.$type-scale: la escala de tipos predeterminada que utilizará la aplicación.
Para utilizar los estilos de tipografía, incluya la combinación typography en cualquier lugar después de la combinación core y antes de la combinación theme. Aprovechemos la escala de tipos $my-type-scale que definimos anteriormente y convirtámosla en la escala de tipos predeterminada.
@include typography(
$font-family: $material-typeface,
$type-scale: $my-type-scale,
);
Exponemos cuatro variables para el tipo de letra, similar a type-scale: $material-typeface, $fluent-typeface, $bootstrap-typeface y $indigo-typeface. Puede utilizar cualquiera de ellos en combinación con cualquier escala de tipos al incluir la combinación typography.
Custom Type Styles
El mixin type-style se puede utilizar para recuperar las reglas de estilo para una categoría de escala de una escala de tipo específica. Además, le permite agregar reglas de estilo adicionales.
.my-fancy-h1 {
@include type-style('h1') {
color: royalblue;
}
}
El código anterior producirá un selector de estilo de clase.my-fancy-h1, que contiene todas las reglas de estilo para la categoría de escala h1 de $my-type-scale con la adición de la propiedad color establecida en el color royalblue. Ahora, si configura la clase de cualquier elemento en.my-fancy-h1, se verá como cualquier otro elemento h1 pero también será de color royalblue.
Component Typography
La mayoría de los componentes de Ignite UI for Angular utilizan categorías de escala para diseñar el texto. Por ejemplo, el componente igx-card utiliza las siguientes categorías de escala:
h6: se utiliza para diseñar el título de la tarjeta.subtitle-2: se utiliza para diseñar subtítulos de tarjetas y títulos pequeños.body-2: se utiliza para diseñar el contenido del texto de la tarjeta.
Hay dos formas de cambiar los estilos de texto de una tarjeta. La primera es modificando las escalas h6, subtitle-2 y/o body-2 en la escala de tipo de material que pasamos al mixin de tipografía. Entonces, si quisiéramos hacer el título de una tarjeta más pequeño, todo lo que tenemos que hacer es cambiar el tamaño de fuente de la categoría de escala h6.
// Create a custom h6 scale category style
$my-h6: type-style($font-size: 12px);
// Create a custom type scale with the modified h6
$my-type-scale: extend($material-type-scale, (h6: $my-h6));
// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);
Warning
El código anterior modificará la categoría de escala h6 globalmente, lo que afectará la apariencia de todos los componentes que usan la escala h6. Esto se hace por coherencia para que todos los elementos h6 tengan el mismo aspecto en su aplicación. Entendemos que es posible que desees aplicar la modificación para h6 solo a componentes específicos, como el componente igx-card en nuestro caso. Es por eso que cada componente tiene su propia combinación de tipografía, que acepta una configuración de categorías.
// Create a custom h6 scale category style
$my-h6: type-style($font-size: 12px);
// You can specify which categories from the type sale the card uses
$card-categories: (
title: 'h6',
title-small: 'subtitle-2',
subtitle: 'subtitle-2',
content: 'body-2',
);
.my-cool-card {
// Overwrite the 'h6' type style for this scope
@include type-style-vars('h6', $my-h6);
// Pass the custom card catergories to the card typography mixin
@include card-typography($card-categories);
}
Ya no incluimos la combinación typography pasándole la escala $my-type-scale con nuestra modificación a la categoría h6. Ahora todo lo que hacemos es pasar el estilo h6 personalizado que creamos al mixin type-style-vars.
CSS Classes
Además de agregar estilos de texto para todos los componentes según las categorías de escala de tipos, también aplicamos estilos a los elementos h1-h6 y p predeterminados. Esto nos permite separar la semántica del estilo. Entonces, por ejemplo, aunque la etiqueta h1 tiene algún estilo predeterminado que proporcionamos cuando usamos typography, puedes modificarla para que parezca h3 dándole una clase de ig-typography__h3.
<h1 class="ig-typography__h3">Some text</h1>
Aquí hay una lista de todas las clases de CSS que proporcionamos de forma predeterminada:
ig-typography__h1ig-typography__h2ig-typography__h3ig-typography__h4ig-typography__h5ig-typography__h6ig-typography__subtitle-1ig-typography__subtitle-2ig-typography__body-1ig-typography__body-2ig-typography__buttonig-typography__captionig-typography__overline
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub