Image for post
Image for post

🚚 Lógica para el Router de una SPA

La lógica detrás de un enrutador contiene los siguientes pasos.

  1. Cargar la ruta. Identificar dónde nos encontramos en el sitio. Se realiza a través de una carga inicial de la ruta.


Tailwind CSS es un Framework de CSS que principalmente brinda clases útiles para nuestros desarrollos web. En simples palabras cuenta con un conjunto de clases que nosotros podemos aprovechar en nuestros desarrollos web.

Image for post
Image for post
  • La idea principal de Tailwind es permitirnos personalizar aún más nuestros sitios y que no se vean igual a otros sitios desarrollados con el framework.


Stylus es un pre-procesador de CSS que posee una sintaxis peculiar ya que trabaja sobre indentación para establecer la jerarquía de los selectores y se pueden omitir por completo las llaves {}, los dos puntos : y los punto y coma ;. La compilación a CSS se encargará de poner todos estos detalles en el archivo CSS final.

Image for post
Image for post
💡 Stylus esta construido sobre NodeJS.

Por lo que para compilar Stylus necesitamos tener instalado NodeJS o utilizar una UI como Prepos.

Instalación y Compilación

Instalación

Si ya tenemos instalado NodeJS el siguiente paso es instalar Stylus, recordar que necesitamos instalar el paquete de forma global por lo que debemos de realizar la instalación con permisos de administrador. …


Sí has leído bien, hoy vamos a hablar de Pug.

¿Aburrido de escribir tantas llaves en HTML? ¿Cansado de copiar y pegar secciones de código? ¿No es fácil revisar tu código porque tu mismo te pierdes?

Bueno Pug es una opción a desaparecer estos problemas, es un preprocesador de HTML como lo sería SASS para CSS, pero ahora es HTML el que tiene súper poderes 🦸🏻‍♀️.

Dejenme introducirles a Pug.

Pues bueno, Pug es un motor de plantillas enfocado en hacer más rápida la codificación de HTML. Es implementado con JavaScript para Node.js y navegadores. …


Grid CSS nace de la necesidad de colocar y distribuir los elementos a lo largo de una página, y recoge las ventajas de ese sistema, añadiendo numerosas mejoras y características que permiten crear rápidamente cuadrículas sencillas y potentes de forma prácticamente instantánea.

Conceptos Básicos

Para utilizar Grid CSS necesitamos tener en cuenta los siguientes conceptos ya que son la base de este sistema de grillas.

6.1: Elementos principales del Grid CSS.
6.1: Elementos principales del Grid CSS.
Elementos principales del Grid CSS.
  • Contenedor. El elemento padre contenedor que definirá la cuadrícula o rejilla.


Como ya vimos en el artículo anterior podemos hacer responsivo nuestro diseño con el Responsive Web Design ahora veamos un poco de Flexbox que nos permite maquetar de una forma más amigable nuestro sitio.

Empecemos, ¿Qué es Flexblox?

Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquinar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

Y bueno sí, pero ¿Qué podemos hacer con esto?
Pues básicamente…

  • Diseños flexibles con menos código.


Image for post
Image for post
Imagen 1. Visualización de diferentes pantallas y resoluciones.

En la actualidad es muy frecuente acceder a Internet con diferentes tipos de dispositivos, que tienen diferentes pantallas y resoluciones, que además tienen diferentes tamaños y formas por lo que las páginas web se consumen de formas diferentes.

Por lo tanto, cuando se diseña una web esta debe estar preparada para verse correctamente en diferentes resoluciones. A esto se le denomina Responsive Web Design a los diseños web que tienen la capacidad de adaptarse al tamaño y formato de la pantalla en la que se visualiza el contenido.

Conceptos Básicos

Uno de los principales conceptos a entender es la diferencia entre el diseño responsivo y el diseño adaptatitvo. Eso se puede ver en en la siguiente imagen, donde un diseño responsive responde en todo momento a las dimensiones del dispositivo, mientras que uno adaptive sí se adapta, pero no necesariamente responde en todo momento. …


CSS nos permite modificar el tipo de fuente que se va a visualizar en nuestras páginas web, se pueden utilizar fuentes propias del sistema (o sea instaladas en la computadora) o utilizar fuentes personalizadas. Principalmente hay dos tipos de fuentes que son serif (Times New Roman) y sans-serif (Arial), la diferencia entre ambas fuentes se puede observar en la imagen.

Imagen 1: Serif y Sans-serif
Imagen 1: Serif y Sans-serif
Imagen 1: Serif y Sans-serif

Como se observa en la imagen anterior las fuentes serif tienen patín y las sans-serif no, por lo que se pueden considerar fuentes más limpias. En las pantallas de ordenador, las fuentes sans-serif se consideran más fácil de leer. Adicional a estas dos fuentes tenemos la monoespaciado (Courier New) y la característica de esta fuente es que todos los caracteres de espacio fijo tienen el mismo ancho. Este tipo de fuentes es usual utilizarlas en consolas. …

About

Alejandra Camacho

Frontend Developer in Angular & Web Technologies. Topics of my interest: HTML, CSS [SASS], JavaScript, Angular, React, UX & UI.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store