(pagetop): Añade Margin y Padding nativos

- Nuevo módulo `html::spacing` con `Margin`/`Padding`: igual que
  `FlexItem`, se resuelven generando clases CSS dinámicamente y se
  aplican con `PropsOp::margin()`/`PropsOp::padding()` sobre cualquier
  componente.
- Elimina `Margin`/`Padding` de `pagetop-bootsier`.
- Añade el ejemplo `intro-spacing` con los patrones de uso típicos.
This commit is contained in:
Manuel Cillero 2026-09-13 00:48:11 +02:00
parent 64113aff09
commit 50e4b42fe4
17 changed files with 881 additions and 322 deletions

View file

@ -0,0 +1,19 @@
spacing_slogan = Native margin and padding with Margin and Padding
spacing_note = Margin and Padding have nothing to do with Flexbox: they apply to any component, whether its container uses Flexbox or not. They are combined with Flex here only to lay out the sample boxes in a row.
spacing_block_title_padding = Padding
spacing_block_title_layout = Layout
spacing_block_title_responsive = Padding at a breakpoint
spacing_block_title_combined = Margin and padding combined
spacing_title_uniform_small = Small padding on all four sides
spacing_title_uniform_medium = Medium padding on all four sides
spacing_title_uniform_large = Large padding on all four sides
spacing_title_sides = A different value per side, including the logical start/end sides
spacing_title_margin_gap = The middle box's margin pushes its neighbours away, without using Gap
spacing_title_margin_center = An automatic margin on both sides centers the box in the free space
spacing_title_responsive = Padding grows from md onwards, and again from lg
spacing_title_combined = Outer margin above/below and inner padding on all four sides, on a component with real content
spacing_box_sample = Content
spacing_box_card_button = Accept