Reset-css-pro NPM

Imagen del proyecto

Reset CSS PRO

Reset CSS Pro un reset personalizable que combina las líneas de los reset más usados y añade algunos extras para que maquetar en tu proyecto sea sencillo. Es el que uso a nivel personal y solventa problemas como:

Unificar el uso de Custom Properties
Problemas de box-model más generales
Problemas con imagenes, vídeos e iconos svg
Problemas con tipografías y etiquetas input en formularios
Unificar la tipografía de todas las etiquetas de una web

Instalación en NPM

Primero debes de instalarlo en tu proyecto con:

npm i reset-css-pro

Después dentro del proyecto puedes importarlo desde Javascript o desde CSS, por ejemplo si estás usando Vite en el archivo App.jsx puedes añadir:

import 'reset-css-pro'

Y otra opción desde el archivo index.css puedes añadir:

@import 'reset-css-pro';

Instalación en proyecto sencillo de HTML y CSS

Puedes ir a la web resetcss.pro y copiarlo directamente desde el configurador para probarlo.

Configuración del reset para NPM

La idea de un reset es que se adapte a tu forma de maquetar, y puedes configurarlo para sólo usar ciertas partes del reset que mejor se adapten a tí.

Tanto en CSS...

@import 'reset-css-pro';           /* Incluye todo el reset                 */
@import 'reset-css-pro/anchor';    /* Incluye sólo para los enlaces         */
@import 'reset-css-pro/body';      /* Incluye sólo el body                  */
@import 'reset-css-pro/box-model'; /* Incluye sólo el clásico *{margin:0}   */
@import 'reset-css-pro/forms';     /* Incluye sólo reset de formularios     */
@import 'reset-css-pro/list';      /* Incluye sólo los puntos de la lista   */
@import 'reset-css-pro/media';     /* Incluye sólo imágenes, video e iframes*/
@import 'reset-css-pro/motion';    /* Incluye sólo eliminar animaciones en reduced-motion */
@import 'reset-css-pro/smooth-anchor';    /* Incluye  sólo anclas suaves    */
@import 'reset-css-pro/svg';       /* Incluye sólo etiquetas svg            */
@import 'reset-css-pro/table';     /* Incluye sólo reset para tablas        */
@import 'reset-css-pro/typography';/* Incluye sólo el reset de tipografías  */
@import 'reset-css-pro/isolation'; /* (Frameworks) Genera contexto de aislamiento */

... como en Javascript

import 'reset-css-pro';                 // Incluye todo el reset                 
import 'reset-css-pro/anchor';          // Incluye sólo para los enlaces         
import 'reset-css-pro/body';            // Incluye sólo el body                  
import 'reset-css-pro/box-model';       // Incluye sólo el clásico *{margin:0}   
import 'reset-css-pro/forms';           // Incluye sólo reset de formularios     
import 'reset-css-pro/list';            // Incluye sólo los puntos de la lista   
import 'reset-css-pro/media';           // Incluye sólo imágenes, video e iframes
import 'reset-css-pro/motion';          // Incluye sólo eliminar animaciones en reduced-motion 
import 'reset-css-pro/smooth-anchor';   // Incluye  sólo anclas suaves    
import 'reset-css-pro/svg';             // Incluye sólo etiquetas svg            
import 'reset-css-pro/table';           // Incluye sólo reset para tablas        
import 'reset-css-pro/typography';      // Incluye sólo el reset de tipografías  
import 'reset-css-pro/isolation';       // (Frameworks) Genera contexto de aislamiento

¿Qué problemas resuelve?

Definición básica de Custom properties con tipografías y colores
- Opcional Custom Properties en modo oscuro
- Opcional Configuramos si un usuario ha activado el modo alto contraste (WD)
Reset de margin, paddings y border de todas las etiquetas
Evitamos problemas con las imagenes con recomendaciones de Microsoft
- Opcional object-fit: cover;
- Opcional object-position: center center;
Reset para las anclas que funcionen como cajas excepto los que se encuentran en párrafos
- Opcional Configuramos anclas suaves
Quitamos los puntos de los <li>
Desactivamos estilos por defecto de las principales etiquetas de texto
Evitamos problemas con los pseudoelementos de quotes
Configuramos el selection de una web en base al color principal
Reset de los problemas tipográficos y la colocación de elementos de formularios
- Opcional appearance: none;
Reseteamos las tablas
Evitamos problemas con los SVG
Configuramos la tipografía para toda la web
- Opcional Configuración de interlineado
- Opcional Problemas con palabras largas gracias a hyphens
- Opcional Tipografía más suave en macOS gracias a font-smooth

📥 Descarga el PDF con todos los módulos

Aquí te dejo un enlace de descarga hacia un PDF con el resto de módulos, resumen y teoría.

🔴 Vídeos relacionados con el reset

Nombre	Youtube
Reset CSS: Teoría
Reset PRO: Código
Nomenclaturas CSS
Metodologías CSS
Arquitecturas CSS

💻 Repositorios y vídeos relacionados

En estos repositorios tendrás acceso a todas las versiones de cada módulo creadas con diferentes tecnologías como HTML, SCSS, TS, Angular, ReactJS... Para que puedas practicar con un código básico.