You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Con el objetivo de divider la composición de layout en 3 capas definidas en función de su relevancia y jerarquía en la página.
Estas tres capas organizan el contenido desde la capa mas externa (<body>) hasta el detalle mas interno del contenido y son:
UI Layout
Main templates
Layout components
UI Layout
El UI layout es el envoltorio de la aplicación y puede contener los siguientes elementos:
Header
Footer
Side panel (El side panel puede colocarse a la izquierda o a la derecha)
Breadcrumbs
Navigation tabs
Su comportamiento responsive ya viene implícito
Header
Footer
Side panels
Fixed o floating panels
Los paneles pueden colocarse fijos, reduciendo el tamaño del main content o colocase superponiendo el contenido.
Main templates
Son construcciones predefinidas para organizar contenido en el main basadas en una subdivisión de 12 columnas con un gutter predefinido. Actualmente las existentes son:
6+6
8+4
4+6
5+4
3+9
Gutter sizes
Las templates tienen un gutter predefinido para desktop de 24px.
Los componentes grid, stack e inline pueden utilizarse tanto para la construcción interna de componentes como para la agrupación y organización de contenido en el main de la aplicación o en el área de una template. Éstos componentes permiten construir subdivisiones del plano bidimensional para agrupar elementos:
Grid e inline subdividen el eje X de dos maneras muy diferentes:
Grid: crea subdivisiones del mismo tamaño sobre el espacio disponible
Inline: crea subdivisiones con el tamaño que tenga el contenido presente en esa subdivisión
Ejemplo:
Mientras que usando un grid cada uno de los botones se coloca al inicio de cada columna y la agrupación de columnas se adapta al ancho total del contenedor, en el inline cada subdivisión ocupa el ancho del botón.
Stack: subdivide el eje Y de la misma manera que lo hace el inline en el X
Se propone un componente grid con libertad para organizar el contenido en una subdivisión de 12 columnas.
Cómo convive el componente grid con el GridLayout?
Uso
Grid en main
El componente grid puede utilizarse en el main container para crear subdivisiones de contenido fuera de las contempladas en los main templates (Ejemplo: 2 + 10)
Grid dentro de un template area
EL grid subdivide un template area, por tanto para una template 6+6, cada una de las areas
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Con el objetivo de divider la composición de layout en 3 capas definidas en función de su relevancia y jerarquía en la página.
Estas tres capas organizan el contenido desde la capa mas externa (
<body>) hasta el detalle mas interno del contenido y son:UI Layout
El UI layout es el envoltorio de la aplicación y puede contener los siguientes elementos:
Su comportamiento responsive ya viene implícito
Header
Footer
Side panels
Fixed o floating panels
Los paneles pueden colocarse fijos, reduciendo el tamaño del main content o colocase superponiendo el contenido.
Main templates
Son construcciones predefinidas para organizar contenido en el main basadas en una subdivisión de 12 columnas con un gutter predefinido. Actualmente las existentes son:
Gutter sizes
Las templates tienen un gutter predefinido para desktop de
24px.Layout components
Los componentes de layout son:
Los componentes grid, stack e inline pueden utilizarse tanto para la construcción interna de componentes como para la agrupación y organización de contenido en el main de la aplicación o en el área de una template. Éstos componentes permiten construir subdivisiones del plano bidimensional para agrupar elementos:
Grid e inline subdividen el eje X de dos maneras muy diferentes:
Ejemplo:
Mientras que usando un grid cada uno de los botones se coloca al inicio de cada columna y la agrupación de columnas se adapta al ancho total del contenedor, en el inline cada subdivisión ocupa el ancho del botón.
Grid
Issue para el componente grid -> #644
Se propone un componente grid con libertad para organizar el contenido en una subdivisión de 12 columnas.
Cómo convive el componente grid con el GridLayout?
Uso
Grid en main
El componente grid puede utilizarse en el
maincontainer para crear subdivisiones de contenido fuera de las contempladas en los main templates (Ejemplo: 2 + 10)Grid dentro de un template area
EL grid subdivide un template area, por tanto para una template 6+6, cada una de las areas
Beta Was this translation helpful? Give feedback.
All reactions