Links
馃搹

Grid

La definici贸n de una rejilla o ret铆cula consistente es vital para garantizar una correcta visualizaci贸n de la informaci贸n en diferentes resoluciones y plataformas.
Plural DS utiliza una serie de tokens para definir y componer el grid en funci贸n de la resoluci贸n de pantalla. No tokenizamos los media-queries ya que estos no pueden ser consumidos como variables, pero s铆 que generamos variables aplicables en diferentes media-queries.

Media-queries

xs-max 40rem (640px)

Token
Valor (rem)
Valor (px)
--size-column-gap
1
16
--size-spacing-inset
1
16

sm-max 64rem (1024px)

Token
Valor (rem)
Valor (px)
--size-column-gap
1
16
--size-spacing-inset
1
16

md-max 90rem (1440px)

Token
Valor (rem)
Valor (px)
--size-column-gap
1
16
--size-spacing-inset
2
32

lg-max 120rem (1920px)

Token
Valor (rem)
Valor (px)
--size-column-gap
1
16
--size-spacing-inset
2
32