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.

| Nombre | Playlist | Repositorio | |--|--|--| |Menú Responsive |||

👨🏻‍🏫 Eduardo Fierro Pro

¡Qué pasa cruck! Soy profesor de programación tanto en escuelas como en Bootcamps y en mis tiempos libres programo por Twitch y en Youtube.

📄 Licencia

MIT Public License v3.0 No puede usarse comercialmente