Gráficos en CSS: cómo crear un organigrama horizontal

() translation by (you can also view the original English article)

En un tutorial anterior, aprendimos cómo crear un organigrama vertical usando solamente CSS. Hoy, a petición de algunos, analizaremos el proceso de construcción de su versión horizontal correspondiente.

CSS

Gráficos en CSS: cómo crear un organigrama

George Martsoukos

Y ahora viene lo bueno: vamos a crear este nuevo gráfico sin cambiar una sola línea del marcado del original; solo vamos a modificar los estilos.

Ten en cuenta que, ya que el concepto sigue siendo el mismo, vamos a tomar algunas partes del otro tutorial. ¿Estás listo para poner a prueba tus habilidades de CSS nuevamente?

El organigrama que vamos a crear

Este es el gráfico en CSS que vamos a crear:

En pantallas de hasta 1300px de ancho, el gráfico se mostrará mediante el uso de un diseño vertical. En pantallas más grandes, sus datos se mostrarán horizontalmente. Asegúrate de verificar este comportamiento abriendo la demostración en una pantalla grande y cambiando el tamaño de la ventana de tu navegador.

1. Especifica el contenedor

Nuestro gráfico residirá en el interior de un contenedor:

1	<div class="container">
2	<!-- Chart goes here -->
3	</div>

2. Define algunos estilos básicos

Antes de examinar sus niveles, vamos a crear algunas reglas de restablecimiento y algunas clases auxiliares:

:root {
  --level-1: #8dccad;
  --level-2: #f5cc7f;
  --level-3: #7b9fe0;
  --level-4: #f27c8d;
  --black: black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ol {
  list-style: none;
}

body {
  margin: 50px 0 100px;
  text-align: center;
  font: 20px/1.5 "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
}

.container {
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.rectangle {
  position: relative;
  padding: 20px;
  width: 200px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

Observa la clase rectangle. Vamos a agregar esta clase a cada nodo o elemento de nuestro gráfico.

Además, presta atención a los estilos del contenedor. Gracias a CSS Grid, podemos dividir el gráfico en dos partes. La primera parte incluirá al primer nivel, mientras que la segunda incluirá a todos los demás. Además, asignaremos al contenedor un ancho máximo que surtirá efecto solamente en pantallas más pequeñas.

Nota: en aras de la simplicidad, no he optimizado el CSS. Esto te ayudará a comprender mejor los estilos de cada nivel.

3. Especifica los niveles

En este punto veremos más de cerca los niveles del gráfico. Como recordarás del tutorial anterior, tendremos cuatro niveles:

Nivel #1

El primer nivel solamente incluirá un único nodo:

HTML

Para describirlo usaremos una etiqueta h1, ya que es la parte más importante de nuestro gráfico:

1	<h1 class="level-1 rectangle">...</h1>

CSS

Usaremos su pseudoelemento ::before para crear una relación entre el primer y el segundo nivel:

/*CUSTOM VARIABLES HERE*/

.level-1 {
  background: var(--level-1);
}

.level-1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Nivel #2

El segundo nivel estará compuesto por dos nodos:

HTML

Para describirlo, usaremos una lista ordenada con dos elementos de lista. Cada elemento de lista contendrá un elemento h2:

1	<ol class="level-2-wrapper">
2	<li>
3	<h2 class="level-2 rectangle">...</h2>
4	</li>
5	<li>
6	<h2 class="level-2 rectangle">...</h2>
7	</li>
8	</ol>

CSS

Cada elemento de lista actuará como un contenedor de cuadrículas con dos columnas. Colocaremos el contenido de la primera en el borde superior del eje de la columna, mientras que el contenido de la última se encontrará en el borde inferior del eje de la columna.

También definiremos los pseudoelementos ::before y ::after de los elementos h2. Su trabajo será crear las relaciones entre los niveles adyacentes:

/*CUSTOM VARIABLES HERE*/

.level-2-wrapper {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid var(--black);
}

.level-2-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: -20px;
  left: 10px;
  width: 2px;
  height: calc(100% + 40px);
  background: var(--black);
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: -20px;
  width: calc(100% - 10px);
  height: 2px;
  background: var(--black);
}

.level-2-wrapper > li {
  position: relative;
  display: grid;
  align-items: flex-start;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-2-wrapper > li:last-child {
  margin-top: 100px;
  align-items: flex-end;
}

.level-2 {
  background: var(--level-2);
}

.level-2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

.level-2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Nivel #3

El tercer nivel incluirá cuatro nodos.

Asociaremos los dos primeros nodos con el primer nodo del segundo nivel, mientras que los dos últimos estarán asociados con su segundo nodo:

HTML

Todavía en el interior de la lista inicial, en donde reside el segundo nivel, definiremos dos listas nuevas. Cada una de ellas contendrá dos elementos de lista. Para cada elemento especificaremos un elemento h3:

1	<ol class="level-2-wrapper">
2	<li>
3	...
4	<ol class="level-3-wrapper">
5	<li>
6	<h3 class="level-3 rectangle">...</h3>
7	</li>
8	<li>
9	<h3 class="level-3 rectangle">...</h3>
10	</li>
11	</ol>
12	</li>
13	<li>
14	...
15	<ol class="level-3-wrapper">
16	<li>
17	<h3 class="level-3 rectangle">...</h3>
18	</li>
19	<li>
20	<h3 class="level-3 rectangle">...</h3>
21	</li>
22	</ol>
23	</li>
24	</ol>

CSS

De manera similar al nivel anterior, vamos a considerar cada elemento de lista como un contenedor de cuadrículas y lo dividiremos en dos columnas.

De la misma forma, vamos a definir los pseudoelementos ::before y ::after de los elementos h2 para crear las conexiones necesarias:

/*CUSTOM VARIABLES HERE*/

.level-3-wrapper {
  position: relative;
  top: 34px;
  padding-left: 20px;
  border-left: 2px solid var(--black);
}

.level-3-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 2px;
  height: 100%;
  background: var(--black);
}

.level-3-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: calc(100% - 10px);
  height: 2px;
  background: var(--black);
}

.level-3-wrapper > li {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-3-wrapper > li:last-child {
  margin-top: 80px;
}

.level-2-wrapper > li:last-child .level-3-wrapper {
  top: -34px;
}

.level-3 {
  background: var(--level-3);
}

.level-3::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

.level-3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Nota: si tus nodos de texto se extienden a una línea separada, debes cambiar los siguientes valores codificados de forma fija: top: 34px y top: -34px.

Nivel #4

Para el cuarto nivel necesitaremos dieciséis nodos. Estos se distribuirán equitativamente en cuatro listas.

Cada nodo del tercer nivel incluirá una lista:

HTML

Todavía en el interior de la lista inicial, en donde reside el segundo nivel, vamos a definir cuatro listas nuevas. Cada una de ellas contendrá cuatro elementos de lista. Para cada elemento de lista especificaremos un elemento h4:

1	<ol class="level-2-wrapper">
2	<li>
3	...
4	<ol class="level-3-wrapper">
5	<li>
6	...
7	<ol class="level-4-wrapper">
8	<li>
9	<h4 class="level-4 rectangle">...</h4>
10	</li>
11	...
12	</ol>
13	</li>
14	<li>
15	...
16	<ol class="level-4-wrapper">
17	<li>
18	<h4 class="level-4 rectangle">...</h4>
19	</li>
20	...
21	</ol>
22	</li>
23	</ol>
24	</li>
25	<li>
26	...
27	<ol class="level-3-wrapper">
28	<li>
29	...
30	<ol class="level-4-wrapper">
31	<li>
32	<h4 class="level-4 rectangle">...</h4>
33	</li>
34	...
35	</ol>
36	</li>
37	<li>
38	...
39	<ol class="level-4-wrapper">
40	<li>
41	<h4 class="level-4 rectangle">...</h4>
42	</li>
43	...
44	</ol>
45	</li>
46	</ol>
47	</li>
48	</ol>

CSS

Una vez más llevaremos a cabo las mismas acciones. En primer lugar, usaremos CSS Grid para crear el diseño de los nodos del cuarto nivel. Luego especificaremos los pseudoelementos necesarios de los elementos destino para establecer las conexiones:

/*CUSTOM VARIABLES HERE*/

.level-4-wrapper {
  position: relative;
  top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  padding-left: 20px;
}

.level-4-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 50%;
  background: var(--black);
}

.level-3-wrapper > li:last-child .level-4-wrapper {
  top: -34px;
}

.level-3-wrapper > li:last-child .level-4-wrapper::before {
  top: auto;
  bottom: 0;
}

.level-4 {
  background: var(--level-4);
}

.level-4::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Nota: si tus nodos de texto se extienden a una línea separada, debes cambiar los valores top: 34px y top: -34px, que están codificados de forma fija.

4. Agrega responsividad

Como ya has adivinado, para nuestros estilos hemos seguido un enfoque de escritorio. En términos generales, yo prefiero construir teniendo en cuenta las pantallas grandes en primer lugar, y luego paso a las pantallas más pequeñas y menos complicadas.

En las pantallas de entre 1301px y 1650px, el gráfico seguirá mostrándose en modo horizontal, pero sus nodos tendrán un ancho menor (200px en lugar de 150px).

En pantallas de hasta 1300px de ancho, todos los nodos del gráfico se mostrarán de manera vertical, de esta forma:

Responsive Layout of Horizontal Organization Chart

A diferencia del diseño horizontal, aquí el ancho y la tipografía de los nodos de texto difieren dependiendo de sus niveles. Mientras más alto sea el nivel, más anchos serán los nodos y más grande será la tipografía.

Por supuesto, no dudes en cambiar estos puntos de interrupción dependiendo de tu contenido.

Vale la pena señalar que este diseño es ligeramente diferente en comparación con el diseño responsivo del gráfico vertical:

En caso de que te lo preguntes, no hay un propósito específico detrás de esta nueva implementación. Solamente quería mostrarte dos diseños responsivos diferentes. No dudes en utilizar cualquiera de estos en tus páginas.

Estos son los estilos responsivos:

@media screen and (max-width: 1650px) {
  .rectangle {
    width: 150px;
  }
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 16px;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-size: revert;
  }

  .rectangle {
    padding: 20px 10px;
    width: auto;
  }

  .container {
    display: block;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2::after,
  .level-3::after {
    display: none;
  }

  .level-2-wrapper::before,
  .level-2-wrapper::after,
  .level-3-wrapper::before,
  .level-3-wrapper::after,
  .level-2-wrapper > li,
  .level-3-wrapper > li {
    display: block;
  }

  .level-2-wrapper {
    padding-left: 30px;
    border-left: none;
  }

  .level-2-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-2-wrapper > li:last-child .level-3-wrapper,
  .level-3-wrapper > li:last-child .level-4-wrapper,
  .level-3-wrapper,
  .level-4-wrapper {
    top: 0;
  }

  .level-3-wrapper {
    padding: 20px 0 20px 30px;
    border-left: none;
  }

  .level-3-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-4-wrapper {
    padding: 20px 0 0 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .level-4-wrapper > li:first-child {
    margin-bottom: 20px;
  }

  .level-4-wrapper::before {
    left: 10px;
    height: 100%;
  }
}

La palabra clave revert

De los estilos anteriores, presta especial atención a la nueva palabra clave revert de CSS que aplicamos a los encabezados. Eso nos ayudará a restaurar sus estilos de navegador predeterminados. Afortunadamente, su compatibilidad con los navegadores crece día a día.

Conclusión

¡Eso es todo por hoy, amigos! En este punto, ya cuentas con todo lo que necesitas para crear tus propios organigramas usando solamente CSS.

Por supuesto, en un escenario real quizá prefieras usar una potente biblioteca de JavaScript, como Highcharts.js, para crear un gráfico de este tipo. Sin embargo, extender los límites de CSS sin ignorar sus limitaciones siempre es una excelente manera de aprender y expandir tus conocimientos. Además, con la combinación de herramientas y funciones como CSS Grid y pseudoelementos, puedes lograr cosas verdaderamente interesantes.

Recordemos lo que hemos creado:

Sigue adelante, bifurca la demostración y ponte manos a la obra. No tengas miedo de destruirla y experimentar con ella. Puedes lograr diferentes variaciones sin poner demasiado esfuerzo. Por ejemplo, esta es otra alternativa rápida para las pantallas de escritorio:

Another implementation for the horizontal organizational chart

Por último, pero no por eso menos importante, aquí en Tuts+ existen muchos tutoriales detallados que muestran cómo implementar diferentes tipos de gráficos en CSS (en algunas ocasiones con JavaScript). Asegúrate de echarles un vistazo y, como siempre, ¡muchas gracias por leer!