Components, layout

Every story of every component under `mantra_starter/components/layout`: the page itself, the banner and the footer it is built from, and the column-with-a-sidebar the content region is laid out in. These are the components that render a whole page, so the preview ends up with two of every landmark -- a banner inside the banner, a main inside the main. That is the preview and not the theme. The sidebar component is shown inside a container query context of its own, because its two-column rule is a container query and a container query only ever matches an ancestor. Each block is a `*.story.yml` committed beside its component, and nothing is saved.

Content w/ sidebar

Main column with a sidebar beside it. `meta` is the sidebar itself and `footer` sits under it; both fall below the content once there is no room for a second column.

mantra_starter:content_w_sidebar

Default

Content, a sidebar and the block under the sidebar. The two-column rule is a `@container mantra-layout-sidebar` query, and a container query only ever matches an ancestor -- never the element itself -- so the story declares the container on a wrapper of its own. Without that wrapper the component is correct and stays in one column forever, which looks like the query is broken. The theme does the same thing for the library overview page in `libraries/modules/ui_patterns_library.css`.

What the layout does

The content column takes whatever the sidebar leaves. Both tracks are sized from leftover space rather than from the container width, so neither can push the other out of the grid.Below the breakpoint the sidebar and its footer fall under the content, in that order.

On this page

< data-component-id="mantra_starter:list_items" class="list_items">
  • What the layout does
  • Where the tracks come from
  • What happens below the breakpoint

    • Related

    The sidebar footer is placed in the second row of the second column, under the sidebar itself.

    Page

    mantra_starter:page

    With both sidebars

    The same page with a hero above the content and an aside on either side of it. The two asides are siblings of the content column rather than of each other, so this is the story to check that the content keeps its measure once both are in place, and that all three stack in a sensible order once there is no room for three columns.

    Built for the long way round

    Frames, wheels and the parts that hold them together, chosen for roads that run out. See the bikes Klein Attitude, 1995

    Bikes

    The content region, between the two asides.

    Default

    A whole page: the banner, the content column with everything the template prints above and below the content region, and the footer. Rendered inside the library page, so the document ends up with two of every landmark -- that is the preview, not the theme.

    Kona xBike

    Page footer

    mantra_starter:page_footer

    Default

    The contentinfo landmark, with both of the regions it prints. The whole element is dropped when neither region has anything in it, so an empty footer leaves no border behind.

    Page header

    mantra_starter:page_header

    Default

    The banner: the header region, then the navbar with the branding on one side and the responsive menu on the other. The header is rendered inside the library page, so the document ends up with two banner landmarks -- that is the preview, not the theme.