WordPress Inclusivo 16: Ampliando la base CSS

Además de los elementos básicos globales ya agregados, especificaremos una serie de configuraciones de algunos elementos básicos pero que no siempre suelen configurarse apropiadamente.

Enlaces

Existe una manía generalizada entre cierto grupo de diseñadores que se empeñan en diseñar para arios de metro ochenta: el de eliminar el underline de los enlaces.

Este subrayado está ahí por algo, y no, no es adecuado hacer el enlace “invisible”. Para blindar esto agregamos el siguiente segmento de código al final de los estilos de nuestro theme:

(...)
a {
  text-decoration: underline!important; 
}
(...)

Listas

Por defecto, podemos evitar que las listas generen extraños desvíos en nuestro diseño, eliminando margen y padding (o estableciendo uno general para la web que le aporte consistencia):

(...)
ul,li {
  margin:0;
  padding:0;
}
(...)

Imagenes

Los navegadores suelen tener la mala costumbre de no definir las imágenes de un modo mínimamente responsive, reparemos esto con el siguiente código, que obligará a ocupar el 100% del ancho disponible respecto a su contenedor.

(...)
img {
	max-width:100%;
	width:100%;
	height:auto;
}
(...)

Contenedor

Es práctica habitual definir un máximo ancho de la web para la que todos los recursos están adaptados por defecto, y en la cual la legibilidad no se vea comprometida, en mi caso actualmente trabajo con un máximo de 2048 pixels.

Para lograr esto, simplemente debemos hacer que dentro del <body> exista directamente un <div class=”contenedor”> dentro del cual se sitúe el 100% del contenido de la web, e incorporar el siguiente css.

(...)
.contenedor {	
  max-width: 2048px;
  width: 95%;
  margin: 0 auto;
}
(...)

Con el código anterior establecemos el máximo, un margen del 5% respecto a los bordes, lo que redundará en legibilidad en móviles sobre todo y estética en todos los dispositivos, y por último el centrado horizontal de la web en caso de que el navegador tenga una pantalla mayo de 2048 píxeles de resolución.

Con todo esto tendremos una base razonable sobre la que empezar a trabajar más a fondo a web.

Si te planteas donar en estos tiempos, usa ese dinero para ayudar a tu alrededor.

No voy a negar que este proyecto en realidad me cuesta dinero, y dada mi capacidad adquisitiva, el porcentaje no es pequeño.

PERO, en esta crisis te pido que si piensas en donarme algo, lo evalúes y uses el dinero para ayudar a alguien de tu entorno inmediato.

Seguro que hay alguien que necesita algunos alimentos, científicos que neceistan fondos para investigar el COVID-19

En estos tiempos te pido que les des prioridad.

Si aún así tu posición te permite hacer ambas cosas, te agradezco de antemano tu aportación. ¡Ánimo que de esta salimos juntos!

Representacion en 8x8 Pixels del concepto "Coronavirus" usando una corona amarilla y un 19 rojo debajo

¿Te gusta lo que hago?

En ese caso, puedes ayudarme con los costes de servidor, de dominios, y apoyame para que pueda seguir trabajando en esta dirección.

Recuerda ¡esta donación es completamente voluntaria!

Puedes donar la cantidad que quieras a través de mi página en Paypal.me, si te resulta más cómodo.

Ayudame a entender mejor qué creaciones pueden ser de mayor valor para vosotros, indicandolo en el comentario de paypal.

Gracias de todo corazón.

¿Quieres saber cual es mi plan con los miles de millones de los pozos de petroleo?

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>