Dar estilo a componentes
13 pasos en 5 series de CSS.
Dar estilo a las cosas que se resisten a llevarlo. Controles de formulario, superficies como tarjetas y diálogos, truncado de texto y contenedores de scroll, y otros medios.
Trece pasos. Los controles nativos se han vuelto mucho más estilizables de lo que su reputación sugiere, y recurrir a un select personalizado hoy suele ser la decisión equivocada.
Controles
- Todos los estados de un botónHover es el fácil. Los otros cinco son lo que lo hace sentirse terminado.
- Estilizar los controles que dibuja el navegadorAlgunas partes de un control de formulario son tuyas y otras pertenecen al navegador.
Superficies
- Una tarjetaUna tarjeta es una caja con sombra hasta que decides cómo se comporta cuando es alta.
- Insignias y píldoras de estadoEtiquetas pequeñas que deben seguir legibles en todo tamaño y en ambos temas.
- Estilizar un dialog y su backdropEl backdrop es un pseudoelemento, y el dialog vive en la capa superior, encima de todo.
- Un tooltip desde un atributoLa etiqueta vive en el markup y el pseudoelemento la renderiza.
Texto y scroll
- Cortar el textoUna línea es una técnica distinta de tres líneas, y ambas necesitan un ancho contra el cual trabajar.
- Barras de scrollYa hay una manera estándar, y los viejos pseudoelementos de cada navegador aún hacen más.
- Un placeholder de cargaUn bloque gris que brilla, del tamaño de la cosa que todavía no llega.
Otros medios
- Estilos para papelUna hoja de impresión es sobre todo borrar, más las URL que un enlace pierde en papel.
- Modo oscuroRespetar el tema del sistema del lector, con un ajuste manual encima.
- Claro y oscuro sin duplicarDeclara los esquemas que soportas y deja que un solo juego de variables cambie.
Bis
- app_shell.cssEl marco completo: encabezado sticky, una barra lateral que se pliega y una columna que se porta bien.