Containers

Layouts

Containers

Usamos cuatro tamaños de layouts separados por el ancho máximo que logran en viewports que sobrepasan ese valor. También estos layout tienen asociados paddings globales que se adaptan según el breakpoint.

Containers

(Variables) Pincali Design System

Layout	max-width	border-box ¹	rails
@layout-sm	780px	732px	<%= render layout: '/layouts/layout_sm' do %>
@layout-md	980px	916px	<%= render layout: '/layouts/layout_md' do %>
@layout-lg	1240px	1144px	<%= render layout: '/layouts/layout_lg' do %>
@layout-full	100%		<%= render layout: '/layouts/layout_full' do %>

¹ Corresponde al ancho máximo del contenido descontando el padding inline.

Padding-inline	Mobile	Tablet	Desktop
--layout-page-inline	20px	24px ¹	32px

¹ Solo aplica el Marketplace.

Aplicación

El eb-layout cambia su ancho según se asigne el layout modificador small, medium, large o full. El padding es variable según el breakpoint.

Mobile Tablet Desktop

        
          <%= render layout: '/layouts/layout_sm' do %> ... <% end %>
          <%= render layout: '/layouts/layout_md' do %> ... <% end %>
          <%= render layout: '/layouts/layout_lg' do %> ... <% end %>
          <%= render layout: '/layouts/layout_full' do %> ... <% end %>