87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Reset CSS PRO
4 |
5 | Reset CSS Pro es un reset CSS optimizado que elimina las diferencias entre navegadores, estandarizando estilos y evitando inconsistencias en márgenes, tipografías y elementos HTML configurable que te permite:
6 |
7 | * Unificar el uso de Custom Properties
8 | * Problemas de box-model más generales
9 | * Problemas con imagenes, vídeos e iconos svg
10 | * Problemas con tipografías y etiquetas input en formularios
11 | * Unificar la tipografía de todas las etiquetas de una web
12 | * Añade la nu
13 |
14 | [](https://resetcss.pro/)
15 | [](https://youtu.be/bXqPNoYFK8w)
16 | [](https://youtu.be/Foieq2jTajE)
17 |
18 | ## Instalación en NPM
19 |
20 | Primero debes de instalarlo en tu proyecto con:
21 |
22 | ```bash
23 | npm i reset-css-pro
24 | ```
25 |
26 | 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:
27 |
28 | ```js
29 | import 'reset-css-pro'
30 | ```
31 |
32 | Y otra opción desde el archivo `index.css` puedes añadir:
33 | ```css
34 | @import 'reset-css-pro';
35 | ```
36 |
37 | ## Instalación en proyecto sencillo de HTML y CSS
38 | Puedes ir a la web [resetcss.pro](https://resetcss.pro) y copiarlo directamente desde el configurador para probarlo.
39 |
40 | [](https://resetcss.pro/)
41 |
42 | ## Configuración del reset para NPM
43 | 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í.
44 |
45 |
46 | ### Tanto en CSS...
47 | ```css
48 | @import 'reset-css-pro'; /* Incluye todo el reset */
49 | @import 'reset-css-pro/anchor'; /* Incluye sólo para los enlaces */
50 | @import 'reset-css-pro/body'; /* Incluye sólo el body */
51 | @import 'reset-css-pro/box-model'; /* Incluye sólo el clásico *{margin:0} */
52 | @import 'reset-css-pro/forms'; /* Incluye sólo reset de formularios */
53 | @import 'reset-css-pro/list'; /* Incluye sólo los puntos de la lista */
54 | @import 'reset-css-pro/media'; /* Incluye sólo imágenes, video e iframes*/
55 | @import 'reset-css-pro/motion'; /* Incluye sólo eliminar animaciones en reduced-motion */
56 | @import 'reset-css-pro/smooth-anchor'; /* Incluye sólo anclas suaves */
57 | @import 'reset-css-pro/svg'; /* Incluye sólo etiquetas svg */
58 | @import 'reset-css-pro/table'; /* Incluye sólo reset para tablas */
59 | @import 'reset-css-pro/typography';/* Incluye sólo el reset de tipografías */
60 | ```
61 |
62 | ### ... como en Javascript
63 | ```js
64 | import 'reset-css-pro'; // Incluye todo el reset
65 | import 'reset-css-pro/anchor'; // Incluye sólo para los enlaces
66 | import 'reset-css-pro/body'; // Incluye sólo el body
67 | import 'reset-css-pro/box-model'; // Incluye sólo el clásico *{margin:0}
68 | import 'reset-css-pro/forms'; // Incluye sólo reset de formularios
69 | import 'reset-css-pro/list'; // Incluye sólo los puntos de la lista
70 | import 'reset-css-pro/media'; // Incluye sólo imágenes, video e iframes
71 | import 'reset-css-pro/motion'; // Incluye sólo eliminar animaciones en reduced-motion
72 | import 'reset-css-pro/smooth-anchor'; // Incluye sólo anclas suaves
73 | import 'reset-css-pro/svg'; // Incluye sólo etiquetas svg
74 | import 'reset-css-pro/table'; // Incluye sólo reset para tablas
75 | import 'reset-css-pro/typography'; // Incluye sólo el reset de tipografías
76 | ```
77 |
78 | ## ¿Qué problemas resuelve?
79 |
80 | * Definición básica de Custom properties con tipografías y colores
81 | * *Opcional* Custom Properties en modo oscuro
82 | * *Opcional* Configuramos si un usuario ha activado el modo alto contraste *(WD)*
83 | * Reset de margin, paddings y border de todas las etiquetas
84 | * Evitamos problemas con las imagenes con recomendaciones de Microsoft
85 | * *Opcional* object-fit: cover;
86 | * *Opcional* object-position: center center;
87 | * Reset para las anclas que funcionen como cajas excepto los que se encuentran en párrafos
88 | * *Opcional* Configuramos anclas suaves
89 | * Quitamos los puntos de los `
`
90 | * Desactivamos estilos por defecto de las principales etiquetas de texto
91 | * Evitamos problemas con los pseudoelementos de *quotes*
92 | * Configuramos el selection de una web en base al color principal
93 | * Reset de los problemas tipográficos y la colocación de elementos de formularios
94 | * *Opcional* appearance: none;
95 | * Reseteamos las tablas
96 | * Evitamos problemas con los SVG
97 | * Configuramos la tipografía para toda la web
98 | * *Opcional* Configuración de interlineado
99 | * *Opcional* Problemas con palabras largas gracias a hyphens
100 | * *Opcional* Tipografía más suave en macOS gracias a font-smooth
101 |
102 |
103 | ## 📥 Descarga el PDF con todos los módulos
104 | Aquí te dejo [un enlace de descarga hacia un PDF](https://eduardofierro.pro/descargas/modulos-de-una-web.pdf?utm_source=modulos-web&utm_medium=github&utm_campaign=descarga-pdf) con el resto de módulos, resumen y teoría.
105 |
106 |
107 | ## 🔴 Vídeos relacionados con el reset
108 |
109 | | Nombre | Youtube |
110 | |--|--|
111 | |Reset CSS: Teoría|[](https://youtu.be/bXqPNoYFK8w)|
112 | |Reset PRO: Código|[](https://youtu.be/Foieq2jTajE)|
113 | |Nomenclaturas CSS|[](https://youtu.be/lhEJkeCJ3As)|
114 | |Metodologías CSS|[](https://youtu.be/f0LpZoyY1gE)|
115 | |Arquitecturas CSS|[](https://youtu.be/tUldrlfIGb4)|
116 |
117 |
118 | ## 💻 Repositorios y vídeos relacionados
119 |
120 | 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...
121 | Para que puedas practicar con un código básico.
122 |
123 | | Nombre | Playlist | Repositorio |
124 | |--|--|--|
125 | |Menú Responsive |[](https://www.youtube.com/playlist?list=PLJpymL0goBgFA5iTweWRejUhBP9TSSNnw)|[](https://github.com/eduardofierropro/eduardofierropro-Como-crear-un-menu-hamburguesa-horizontal)|
126 |
129 |
130 | ## 👨🏻🏫 Eduardo Fierro Pro
131 |
132 | ¡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.
133 |
134 | [](https://youtube.com/EduardoFierroPro?sub_confirmation=1)
135 | [](https://twitch.tv/eduardofierropro)
136 | [](https://www.tiktok.com/@eduardofierro.pro?)
137 | [](https://instagram.com/eduardofierro.pro)
138 | [](https://www.linkedin.com/in/eduardofierropro)
139 | [](https://discord.gg/t4Txush)
140 | [](https://twitter.com/edfierropro)
141 | [](https://github.com/eduardofierropro)
142 | [](http://colaboracion.eduardofierro.pro)
143 |
144 |
145 | ## 📄 Licencia
146 |
147 | MIT Public License v3.0
148 | No puede usarse comercialmente
149 |
--------------------------------------------------------------------------------
/scss/_reset.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | :root {
4 | font-size : 100% ;
5 | font-family: system-ui, sans-serif;
6 | scroll-behavior : smooth ;
7 |
8 | /* (Opcional) Aquí definimos las custom properties */
9 |
10 | }
11 | @media (prefers-reduced-motion: reduce) {
12 | * {
13 | -webkit-animation: none !important;
14 | animation: none !important;
15 | -webkit-transition: none !important;
16 | transition: none !important;
17 | }
18 | }
19 | * , *::before , *::after{
20 | margin: 0;
21 | padding: 0;
22 | border: 0;
23 | box-sizing: border-box;
24 | vertical-align: baseline;
25 | }
26 | *::before , *::after{
27 | display: block;
28 | }
29 | img, picture, video, iframe, figure , canvas{
30 | max-width: 100%;
31 | width: 100%;
32 | display: block;
33 | height: initial;
34 | }
35 | a {
36 | display: block;
37 | text-decoration: none;
38 | color: inherit;
39 | font-size: inherit;
40 | }
41 | p a {
42 | display: inline;
43 | }
44 | li , menu, summary {
45 | list-style: none;
46 | }
47 | ol{
48 | counter-reset: revert;
49 | }
50 | html {
51 | scroll-behavior: smooth;
52 | }
53 | h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em, mark, del, pre, code {
54 | font:inherit;
55 | color: inherit;
56 | text-decoration: none;
57 | text-wrap: pretty;
58 | }
59 | mark{
60 | background-color: transparent;
61 | }
62 | blockquote:before, blockquote:after, q:before, q:after {
63 | content: "";
64 | content: none;
65 | }
66 | form, input, textarea, select, button, label {
67 | font:inherit;
68 | hyphens: auto;
69 | background-color: transparent;
70 | color: inherit;
71 | display: block;
72 | }
73 | textarea {
74 | white-space: pre-wrap;
75 | }
76 | ::placeholder {
77 | color: unset;
78 | }
79 | button , label{
80 | cursor: pointer;
81 | }
82 | table, tr, td , th, thead, tbody, tfoot{
83 | border-collapse: collapse;
84 | border-spacing: 0;
85 | font:inherit;
86 | }
87 | svg {
88 | width: 100%;
89 | display: block;
90 | fill: currentColor;
91 | }
92 | p svg{
93 | display: inline;
94 | width: initial;
95 | }
96 | :where([contenteditable]:not([contenteditable="false"])) {
97 | -moz-user-modify: read-write;
98 | -webkit-user-modify: read-write;
99 | overflow-wrap: break-word;
100 | -webkit-line-break: after-white-space;
101 | -webkit-user-select: auto;
102 | }
103 | :where([draggable="true"]) {
104 | -webkit-user-drag: element;
105 | }
106 | body {
107 | min-height: 100vh;
108 | color:inherit;
109 | line-height: 1.5em;
110 | hyphens: auto;
111 | font-smooth: always;
112 | -webkit-font-smoothing: antialiased;
113 | -moz-osx-font-smoothing: grayscale;
114 | }
--------------------------------------------------------------------------------
/scss/app.scss:
--------------------------------------------------------------------------------
1 | @use '_reset';
--------------------------------------------------------------------------------
89 | 
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Reset CSS PRO
4 |
5 | Reset CSS Pro es un reset CSS optimizado que elimina las diferencias entre navegadores, estandarizando estilos y evitando inconsistencias en márgenes, tipografías y elementos HTML configurable que te permite:
6 |
7 | * Unificar el uso de Custom Properties
8 | * Problemas de box-model más generales
9 | * Problemas con imagenes, vídeos e iconos svg
10 | * Problemas con tipografías y etiquetas input en formularios
11 | * Unificar la tipografía de todas las etiquetas de una web
12 | * Añade la nu
13 |
14 | [](https://resetcss.pro/)
15 | [](https://youtu.be/bXqPNoYFK8w)
16 | [](https://youtu.be/Foieq2jTajE)
17 |
18 | ## Instalación en NPM
19 |
20 | Primero debes de instalarlo en tu proyecto con:
21 |
22 | ```bash
23 | npm i reset-css-pro
24 | ```
25 |
26 | 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:
27 |
28 | ```js
29 | import 'reset-css-pro'
30 | ```
31 |
32 | Y otra opción desde el archivo `index.css` puedes añadir:
33 | ```css
34 | @import 'reset-css-pro';
35 | ```
36 |
37 | ## Instalación en proyecto sencillo de HTML y CSS
38 | Puedes ir a la web [resetcss.pro](https://resetcss.pro) y copiarlo directamente desde el configurador para probarlo.
39 |
40 | [](https://resetcss.pro/)
41 |
42 | ## Configuración del reset para NPM
43 | 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í.
44 |
45 |
46 | ### Tanto en CSS...
47 | ```css
48 | @import 'reset-css-pro'; /* Incluye todo el reset */
49 | @import 'reset-css-pro/anchor'; /* Incluye sólo para los enlaces */
50 | @import 'reset-css-pro/body'; /* Incluye sólo el body */
51 | @import 'reset-css-pro/box-model'; /* Incluye sólo el clásico *{margin:0} */
52 | @import 'reset-css-pro/forms'; /* Incluye sólo reset de formularios */
53 | @import 'reset-css-pro/list'; /* Incluye sólo los puntos de la lista */
54 | @import 'reset-css-pro/media'; /* Incluye sólo imágenes, video e iframes*/
55 | @import 'reset-css-pro/motion'; /* Incluye sólo eliminar animaciones en reduced-motion */
56 | @import 'reset-css-pro/smooth-anchor'; /* Incluye sólo anclas suaves */
57 | @import 'reset-css-pro/svg'; /* Incluye sólo etiquetas svg */
58 | @import 'reset-css-pro/table'; /* Incluye sólo reset para tablas */
59 | @import 'reset-css-pro/typography';/* Incluye sólo el reset de tipografías */
60 | ```
61 |
62 | ### ... como en Javascript
63 | ```js
64 | import 'reset-css-pro'; // Incluye todo el reset
65 | import 'reset-css-pro/anchor'; // Incluye sólo para los enlaces
66 | import 'reset-css-pro/body'; // Incluye sólo el body
67 | import 'reset-css-pro/box-model'; // Incluye sólo el clásico *{margin:0}
68 | import 'reset-css-pro/forms'; // Incluye sólo reset de formularios
69 | import 'reset-css-pro/list'; // Incluye sólo los puntos de la lista
70 | import 'reset-css-pro/media'; // Incluye sólo imágenes, video e iframes
71 | import 'reset-css-pro/motion'; // Incluye sólo eliminar animaciones en reduced-motion
72 | import 'reset-css-pro/smooth-anchor'; // Incluye sólo anclas suaves
73 | import 'reset-css-pro/svg'; // Incluye sólo etiquetas svg
74 | import 'reset-css-pro/table'; // Incluye sólo reset para tablas
75 | import 'reset-css-pro/typography'; // Incluye sólo el reset de tipografías
76 | ```
77 |
78 | ## ¿Qué problemas resuelve?
79 |
80 | * Definición básica de Custom properties con tipografías y colores
81 | * *Opcional* Custom Properties en modo oscuro
82 | * *Opcional* Configuramos si un usuario ha activado el modo alto contraste *(WD)*
83 | * Reset de margin, paddings y border de todas las etiquetas
84 | * Evitamos problemas con las imagenes con recomendaciones de Microsoft
85 | * *Opcional* object-fit: cover;
86 | * *Opcional* object-position: center center;
87 | * Reset para las anclas que funcionen como cajas excepto los que se encuentran en párrafos
88 | * *Opcional* Configuramos anclas suaves
89 | * Quitamos los puntos de los `