# data[].attributes.body
Hoy en día se le denomina Responsive Web Design (o RWD) 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, respecto a los diseños tradicionales en los que las páginas web estaban diseñadas sólo para un tamaño o formato específico, y no tenían esa capacidad de adaptación.

Existe un concepto denominado media queries, mediante el cuál podemos hacer excepciones para que unos determinados estilos de diseño sólo se apliquen si se cumplen una serie de condiciones, generalmente relacionadas con el dispositivo mediante el cuál se está viendo la página.

La regla @media

Las reglas media queries (también denominadas MQ a veces) son un tipo de reglas de CSS que permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.

La sintaxis de la regla @media es la siguiente:

@media (<condición>):
Si se cumple la condición, se aplican los estilos de su interior.
@media not (<condición>):
Si no se cumple la condición, se aplican los estilos de su interior.

Básicamente, se trata de establecer una condición que se aplicará a la página actual, y en el caso de cumplirse, se aplicarán los estilos indicados en su interior. De no cumplirse, no se aplicarán.

Tipos de medios:

En algunas ocasiones, queremos indicar que las reglas @media sólo se pongan en funcionamiento en determinados tipos de dispositivos. Son los llamados tipos de medios. Existen los siguientes:

Tipo de medio
all | Todos los dispositivos o medios. El que se utiliza por defecto.
screen | Monitores o pantallas de ordenador. Es el más común.
print | Documentos de medios impresos o pantallas de previsualización de impresión.
speech | Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).

Condiciones de Media Queries

En los ejemplos anteriores hemos indicado *condiciones* en el interior de los paréntesis, pero no hemos visto como definir ninguna. Vamos a echar un vistazo a que tipo de características podemos definir en las condiciones de los media queries.

Podemos utilizar las siguientes:

width |  | Si el dispositivo tiene el tamaño de ancho exactamente.
min-width |  | Si el dispositivo tiene un tamaño de ancho mayor al indicado.
max-width |  | Si el dispositivo tiene un tamaño de ancho menor al indicado.
height |  | Si el dispositivo tiene el tamaño de alto exactamente.
min-height |  | Si el dispositivo tiene un tamaño de alto mayor al indicado.
max-height |  | Si el dispositivo tiene un tamaño de alto menor al indicado.
aspect-ratio | aspect-ratio | Si el dispositivo encaja con la proporción de aspecto indicada.
orientation | landscape | portrait | Si el dispositivo está en colocado en modo vertical o apaisado.

Existen otras características que en algunos casos pueden ser interesantes, como por ejemplo scan, update, resolution, monochrome, grid, color-index, color, color-gamut, dynamic-range, etc...

Fuente: https://lenguajecss.com/css/responsive-web-design/media-queries/#qu%C3%A9-son-las-media-queries

# data[].attributes.attachment_link.readable_text
Una vez nos adentramos en el mundo del Responsive Design, nos damos cuenta en que hay situaciones en las que determinados aspectos o componentes visuales deben aparecer con ciertas diferencias dependiendo del dispositivo donde se están visualizando, ya que no todos los dispositivos tienen los mismos tamaños o características.

Por ejemplo, una zona donde se encuentra el buscador de la página puede estar colocada en un sitio concreto en la versión de escritorio, pero en móvil quizás nos interese que ocupe otra zona ( o que tenga otro tamaño o forma) para aprovechar mejor el espacio de la versión del dispositivo móvil.

Existe un concepto denominado media queries, mediante el cuál podemos hacer excepciones para que unos determinados estilos de diseño sólo se apliquen si se cumplen una serie de condiciones, generalmente relacionadas con el dispositivo mediante el cuál se está viendo la página.

Las reglas media queries ( también denominadas MQ a veces) son un tipo de reglas de CSS que permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición.

La sintaxis de la regla @media es la siguiente:

Básicamente, se trata de establecer una condición que se aplicará a la página actual, y en el caso de cumplirse, se aplicarán los estilos indicados en su interior. De no cumplirse, no se aplicarán. Si utilizamos la keyword not antes de la condición, se invierte la condición:

En el ejemplo anterior, si se cumple la condición establecida, se aplicará un color verde. Sin embargo, si no se cumple, se aplicará un color rojo. Observa que es similar al funcionamiento de un if / else en programación.

No olvides que si tenemos estilos de .container fuera de las reglas @media podrían sobreeescribir los estilos dependiendo de si están antes o después de las reglas y de la especificidad de sus selectores.

Si lo deseas, es posible establecer múltiples condiciones en las reglas @media. De esta forma, se pueden conseguir situaciones mucho más específicas y flexibles. Ten mucho cuidado si aplicas el not en las condiciones, no sea que niegues de forma incorrecta los casos deseados:

Al igual que not, también existe una palabra clave only que, suele usarse a modo de hack. El comportamiento por defecto ya incluye los dispositivos que encajan con la condición, pero con la palabra clave only conseguimos que navegadores antiguos que no la entienden, no procesen la información, dejándola sólo para navegadores modernos.

En algunas ocasiones, queremos indicar que las reglas @media sólo se pongan en funcionamiento en determinados tipos de dispositivos. Son los llamados tipos de medios. Existen los siguientes:

all
Todos los dispositivos o medios. El que se utiliza por defecto.

Monitores o pantallas de ordenador. Es el más común.

Documentos de medios impresos o pantallas de previsualización de impresión.

Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).

Estos tipos de medios se pueden indicar como una condición más, de modo que podría quedar de la siguiente forma:

Quizás encuentres referencias a tipos de medios como braille, embossed, handheld, projection, tty o tv. Aunque aún sirven, están marcados como obsoletos a favor de usar los de la lista anterior.

En los ejemplos anteriores hemos indicado *condiciones* en el interior de los paréntesis, pero no hemos visto como definir ninguna. Vamos a echar un vistazo a que tipo de características podemos definir en las condiciones de los media queries.

Podemos utilizar las siguientes:

Existen otras características que en algunos casos pueden ser interesantes, como por ejemplo scan, update, resolution, monochrome, grid, color-index, color, color-gamut, dynamic-range, etc...

El ejemplo anterior, establecerá el elemento .container con fondo rojo cuando se cumpla la condición de que la página esté siendo visualizada desde un dispositivo con una pantalla de 800px de ancho como máximo y tenga un sensor que indique está en modo apaisado.

Veamos un ejemplo clásico de media queries en el que definimos diferentes estilos dependiendo del dispositivo que estamos utilizando. Observese que en el código existen 3 bloques @media donde se definen estilos CSS para cada uno de esos tipos de dispositivos.

El código sería el siguiente:

El ejemplo anterior muestra un elemento ( con clase menu) con un color de fondo concreto, dependiendo del tipo de medio con el que se visualice la página. Los resultados podrían ser los siguientes ( los valores son sólo ejemplos, habría que adaptarlos al caso deseado):

Azul para resoluciones menores a 400 píxeles de ancho (móviles).

Rojo para resoluciones entre 400 píxeles y 800 píxeles de ancho (tablets).

Verde para resoluciones mayores a 800 píxeles (desktop).

El número de bloques de reglas @media a utilizar depende del desarrollador web, ya que no hay una obligación o norma de utilizar un número concreto. Se pueden utilizar desde un sólo media query, hasta múltiples de ellos a lo largo de todo el documento CSS.

Aunque la forma de definir condiciones anterior es útil, a menudo resulta confusa y difícil de escribir. Es posible utilizar una modalidad denominada rangos de condiciones, que son algo más versátiles que las anteriores y mucho menos tediosas.

La diferencia radica en que se puede utilizar operadores matemáticos que harán que las condiciones sean mucho más legibles y fáciles de interpretar. Veamos el mismo ejemplo anterior con sintaxis de rangos:

Como puedes ver, al poder utilizar los operadores >, >=, <, <= en las condiciones, se hace mucho más intuitivo el determinar las condiciones de los media queries. Sin embargo, ten en cuenta que si necesitas compatibilidad con navegadores muy antiguos, podrían no tener soporte.

Cuando hablamos de Responsive Design muchas veces haremos referencia al viewport ( región visible del navegador). Recordemos que con el siguiente fragmento de código HTML estamos indicando que hay que preparar el navegador para el Responsive y que el nuevo ancho de la pantalla será el ancho del dispositivo, por lo que el aspecto del viewport se va a adaptar consecuentemente:

Con esto conseguiremos preparar nuestra web para dispositivos móviles y prepararnos para la introducción de reglas media query en el documento CSS. Es importante no olvidar este paso.

Por último, hay que tener en cuenta que los media queries también es posible indicarlos desde HTML, utilizando la etiqueta <link> y el atributo media para establecer la condición:

Observa, sin embargo, que en este caso, el código CSS de las diferentes condiciones queda en un archivo .css diferente, sin embargo, el navegador al cargar la página los descargará todos y los aplicará cuando sea necesario, al igual que lo hace en los ficheros .css.

# data[].attributes.attachment_link.description
CSS dispone de un sistema de media queries para aplicar estilos dependiendo de si estamos en móvil, tablet o en un dispositivo de escritorio. Aprende como funciona.

# data[].attributes.body
Antes de empezar a escribir código CSS, debemos conocer la anatomía de una declaración de estilos.

Qué es una declaración de CSS

Una declaración de CSS es un bloque que especifica el conjunto de estilos que se añadirán a un elemento HTML. Su estructura contiene lo siguiente:

Selector: define el elemento o conjunto de elementos a los cuales se añadirán los estilos.

Propiedad: es el nombre del estilo de CSS.

Valor: es el valor que tomará la propiedad.

Comentarios de CSS

Los comentarios de CSS consisten en señalar algo que se ignorará. Para establecer un comentario CSS se lo envuelve entre /* y */, independiente de la cantidad de líneas.

Propiedades iniciales de CSS

Antes de empezar con CSS utilizaremos algunas propiedades de CSS.

color: establece el color del texto de un elemento.

background-color: establece un color de fondo al elemento.

font-size: establece el tamaño de la fuente.

width: establece la anchura de un elemento.

height: establece la altura de un elemento.

Medidas iniciales

Estas son las medidas iniciales que debes conocer para establecer tamaños de elementos o de tipografía:

px: establece una longitud de píxeles.

%: establece un porcentaje con respecto a una medida base.

Propiedades más usadas

Las propiedades CSS más usadas son las siguientes, separadas en secciones comunes, algunas ya las conocemos:

Display

Margin

Padding

Border

Width

Height

Color

Background

También, si deseas conocer todas las etiquetas existentes, puedes revisar el sitio web CSS Reference.

Propiedades de textos

Las propiedades para manipular los textos y tipografía son los siguientes:

font-size: establece un tamaño de fuente.

font-weight: establece el resaltado del texto, con valores de 100 a 900 en intervalos de 100; donde 100 es delgada y 900 es negrita.

font-family: establece el tipo de fuente.

text-align: establece la posición del texto: right, left, center y justify.

color: establece el color del texto.

Bordes redondeados

La propiedad que establece bordes redondeados es: border-radius.

Fuente: https://coda.io/@maria-perez/css

# data[].attributes.body
Pseudoclases en CSS:

Las pseudoclases CSS son palabras clave que podemos añadir a los selectores para identificar un estado en nuestros elementos HTML. Esto quiere decir que los podemos insertar cuando queremos estilizar un elemento que se encuentre en un estado específico. Lo que nos permiten las pseudoclases CSS es identificar elementos no solo de acuerdo al árbol del código, cómo lo hacen los selectores básicos y selectores múltiples de CSS, pero también de acuerdo a factores como el historial de navegador y el movimiento del ratón.

A continuación, te presentamos algunas de las pseudoclases CSS y los estados que seleccionan al insertarse en un selector.

:link: esta pseudoclase selecciona un enlace.

:visited: selecciona un enlace que se ha visitado.

:active: selecciona un enlace que está activo.

:focus: selecciona un enlace que tiene el foco.

:checked: esta pseudoclase de clases en CSS puede ser útil en formularios, pues nos permite dar un estilo diferente cuando un elemento está seleccionado en la lista.

:hover: selecciona un elemento que tiene el ratón encima.

:target: esta pseudoclase selecciona un elemento en función del hashtag que está en la URL.

:lang (): esta pseudoclase selecciona en función de un idioma.

:nth-child (n): selecciona un número concreto de un hijo. Por ejemplo, podemos seleccionar un elemento que es el décimo hijo de su elemento padre.

:first-child: selecciona al primer hijo de un elemento padre.

:last-child: selecciona al último hijo de un elemento padre.

:only-child: selecciona al único hijo de un elemento padre.

:nth-of-type (n): selecciona un número concreto entre los elementos de un mismo tipo.

:first-of-type: selecciona al primer elemento de un tipo.

:last-of-type: selecciona al último elemento de un tipo de las clases en CSS.

:only-of-type: selecciona al único elemento de un tipo.

:not(): esta pseudoclase nos permite aplicar estilos justo cuando es lo contrario. Por ejemplo, lo podríamos usar cuando queremos aplicar un estilo a un enlace cuando no está activo.

Hay muchas más pseudoclases en CSS. Si quieres conocer cada una de ellas a profundidad, te recomendamos visitar el post sobre pseudoclases en la página oficial de la Mozilla Developer Network.

Pseudoelementos en CSS:

Al igual que las pseudoclases en CSS, los pseudoelementos en CSS nos permiten ser más específicos a la hora de seleccionar a qué le vamos a aplicar un estilo. A diferencia de las pseudoclases, los pseudoelementos en CSS no identifican un estado, sino que identifican puntos o lugares concretos dentro de un elemento HTML. A continuación, te presentamos los pseudoelementos en CSS más importantes:

::first-letter: este pseudoelemento nos permite acceder a la primera línea de un elemento HTML. Por ejemplo, la primera línea de un párrafo.

::first-line: este pseudoelemento nos permite acceder a la primera letra de un elemento HTML.

::before {content=»»}: este pseudoelemento permite acceder al espacio justo antes de la apertura de un elemento HTML. En el caso de un párrafo, nos permitirá acceder al espacio justo antes de la etiqueta <p>.

::after {content=»»}: este pseudoelemento nos permite acceder al espacio justo después del cierre del elemento HTML

Fuente: https://keepcoding.io/blog/pseudo-clases-pseudo-elementos-en-css/

# data[].attributes.body
¿Qué es la Cascada CSS?

Cuando hablamos de la Cascada CSS nos referimos al algoritmo (conjunto de reglas y normas) que tiene el navegador para aplicar estilos CSS a un elemento HTML. No es tan sencillo como la mayoría cree, ya que hay múltiples casos donde pueden existir ambigüedades, y el navegador debe resolverlas para saber que estilo debe aplicar primero y cuál después.

Imagina que tenemos enlazados dos archivos .css mediante <link> y en cada uno tenemos un mismo selector .text aplicando colores diferentes. ¿Cuál de los dos se aplicará finalmente? Quizás pienses que el último que haya sido definido. A veces, esto es cierto, pero muchas otras veces no.

La cascada comprende varios temas importantes a la hora de resolver dichos conflictos:

Importancia: Los estilos pueden tener mayor o menor importancia, lo que puede darles prioridad.

Origen: Dependiendo del origen del CSS, tendrá mayor o menor prioridad.

Especificidad: Cuanto más específicos sean los selectores CSS, mayor prioridad.

Orden de aparición: El orden en el que aparece o se procesa el CSS influye.

El navegador tiene un sistema llamado Especificidad CSS, donde en situaciones de conflicto como esta, calculará que selector es más específico, siguiendo unas ciertas normas. Esto se suele representar con 3 cifras, separadas por comas: A,B,C.

Componente A | Número de veces que aparece un #id en el selector.
Componente B | Número de veces que aparece una .clase, [atributo] o :pseudoclase en el selector.
Componente C | Número de veces que aparece un elemento o un ::pseudoelemento en el selector.

Fuente:https://lenguajecss.com/css/cascada-css/que-es-cascada/#especificidad-css

# data[].attributes.body
Elementos en línea

Para explicarlo de manera sencilla, y simplificando, ciertas etiquetas HTML no afectan en absoluto al flujo de los demás elementos, limitándose a marcar ciertos fragmentos con una determinada semántica y dejando que el texto y otros elementos contiguos sigan fluyendo en la misma línea, colocándose a ambos lados de dicho elemento.

Ejemplos de estas etiquetas son: <a>, <em>,<del>... y quizá la más útil de todas: la etiqueta <span>, que se usa para envolver elementos en-línea para darles estilo sin cambiar su comportamiento. A estos elementos HTML se les llama elementos de línea o, incluso más a menudo, por su denominación en inglés: elementos "inline".

Elementos de bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto.  Ejemplos de estas etiquetas son los encabezados (<h1> hasta <h6>), las citas en bloque (<blockquote>), por supuesto los párrafos (<p>), y quizá la más conocida de todas que es la etiqueta <div> usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

Es decir, ahora los elementos no fluyen como si fueran texto, sino que por defecto se renderizan en líneas independientes. Además, los elementos de bloque respetan los anchos y altos y los márgenes verticales.

Así por ejemplo, aunque tengamos una etiqueta span que se renderiza en línea por defecto, si le aplicamos la propiedad display:block; se renderizará como un bloque, es decir, sería exactamente igual que si hubiésemos puesto un <div>.

El tercer valor de la lista anterior es muy interesante ya que permite obtener un comportamiento intermedio entre los otros dos. Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

# data[].attributes.body
Grid y flexbox

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

Diseños de Una dimensión vs. dos dimensiones

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

También he configurado la propiedad wrapflex-wrap , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

Fuente: https://developer.mozilla.org/es/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods

# data[].attributes.body
Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Una vez que se hayan definido todos los “átomos” a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un “átomo” de label, un “átomo” de input, un “átomo” de button, un “átomo” de un color específico y un “átomo” de font, pueden unirse para crear una “molécula” de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

La teoría que sigue el Atomic Design es que, al empezar desde el elemento más pequeño, podemos ir construyendo de forma sistemática componentes más grandes y complejos sin recurrir a la necesidad de repetir código y, por ende, tener una hoja de presentación más fácil de manejar y mantener. También es interesante mencionar que el Atomic Design tiene una excelente sinergia con Sass y Scss, aprovechando sus poderosas funcionalidades de extensión y herencia para construir moléculas y componentes más grandes de forma fácil y rápida. De hecho, ya existen frameworks basados en Atomic Design, como Pattern Lab.

Definitivamente, la metodología de Atomic Design puede parecer desalentadora y, para algunos, difícil de implementar en su estructura de diseño; sin embargo, mantiene una premisa muy funcional y fácil de entender. En mi siguiente blog, veremos cómo implementar Pattern Lab en nuestro proyecto para adoptar el Atomic Design y primeras impresiones sobre el framework.

Fuente: https://rootstack.com/es/blog/una-forma-diferente-de-estructurar-tu-css-atomic-design

# data[].attributes.attachment_link.readable_text
Las normas sobre theming y web layout han evolucionado rápidamente en la última década, tratando de mantener el paso con el desarrollo al cual se ha visto sujeto CSS y HTML desde sus raíces como lenguajes concebidos para contenido puramente estático, para adaptarse a páginas dinámicas y responsivas.

Aunque se ha dado un crecimiento notable de múltiples herramientas en los últimos años, con el objetivo de agilizar el desarrollo web en los equipos de trabajo (y vale la pena mencionar aquí frameworks como Sass, Susy y Compass, los cuales usamos actualmente en Rootstack), también es cierto que CSS suele prestarse a enormes páginas de presentación compartidas entre todo el equipo de trabajo y, debido a una falta de estructuración y organización adecuada, se termina con líneas y líneas de código repetidas con tal de evitar la modificación de clases y selectores crípticos ya hechos para no "dañar la página", sin ser capaces de reciclar diseño existente sin tener que modificar código previamente escrito e igual de críptico.

Es por eso que, al trabajar en un proyecto, es importante definir normas claras e intuitivas sobre cómo estructurar el código CSS. Hay varias metodologías que han surgido, como OOCSS o SMACSS. Sin embargo, hace un año surgió una interesante propuesta que no solo plantea un diseño intuitivo y fácil de leer, sino que además es fácil de explicar y entender: Atomic Web Design.

¿En qué consiste el Atomic Web Design?

Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Una vez que se hayan definido todos los "átomos" a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un "átomo" de label, un "átomo" de input, un "átomo" de button, un "átomo" de un color específico y un "átomo" de font, pueden unirse para crear una "molécula" de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

La teoría que sigue el Atomic Design es que, al empezar desde el elemento más pequeño, podemos ir construyendo de forma sistemática componentes más grandes y complejos sin recurrir a la necesidad de repetir código y, por ende, tener una hoja de presentación más fácil de manejar y mantener. También es interesante mencionar que el Atomic Design tiene una excelente sinergia con Sass y Scss, aprovechando sus poderosas funcionalidades de extensión y herencia para construir moléculas y componentes más grandes de forma fácil y rápida. De hecho, ya existen frameworks basados en Atomic Design, como Pattern Lab.

Definitivamente, la metodología de Atomic Design puede parecer desalentadora y, para algunos, difícil de implementar en su estructura de diseño; sin embargo, mantiene una premisa muy funcional y fácil de entender. En mi siguiente blog, veremos cómo implementar Pattern Lab en nuestro proyecto para adoptar el Atomic Design y primeras impresiones sobre el framework.

Te recomendamos en video

# data[].attributes.attachment_link.title
Una forma diferente de estructurar tu CSS: Atomic Design

# data[].attributes.attachment_link.description
Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química.