Layout

Layout regions

There are four main regions. Page layout is controlled with a CSS grid. The components will automatically assign themselves to the correct region.

<!--
    Components automatically assign to grid areas
    Grid areas are not visible if empty
  -->
<!DOCTYPE html>
<html lang="en">
  <header>...</header>

  <!-- Hide content while site loads to prevent layout shifts -->
  <style>
    body:not(.mc-initiated) { visibility: hidden; }
  </style>

  <body>
    <mc-top-app-bar>...</mc-top-app-bar>
    <mc-navigation-drawer>...</mc-navigation-drawer>

    <mc-pane-container>
      <mc-pane>...</mc-pane>
    </mc-pane-container>

    <mc-navigation-bar>...</mc-navigation-bar>
  </body>
</html>



<!-- Custom grid area assignment -->
<!DOCTYPE html>
<html lang="en">
  <header>...</header>
  <body>
    <div style="grid-area: header;">...</div>
    <div style="grid-area: navigation;">...</div>
    <main>...</main>
    <div style="grid-area: footer;">...</div>
  </body>
</html>

Panes

Panes are used to group the UI

<!DOCTYPE html>
<html lang="en">
  <header>...</header>
  <body>
    <mc-top-app-bar>...</mc-top-app-bar>
    <mc-navigation-drawer>...</mc-navigation-drawer>

    <!--
      [scroll]
      makes the panes scroll individually. Otherwise they will scroll as one.

      [default-percent]
      Percentage width of pane 1

      [resize]
      Adds draggable bar between pane 1 and pane 2
    -->
    <mc-pane-container resize default-percent="75" scroll>
      <mc-pane>...</mc-pane>
      <!--
        You can have 2 panes

        Allow collaspable second pane
        <mc-pane collapsible>...</mc-pane>
      -->
    </mc-pane-container>

    <mc-navigation-bar>...</mc-navigation-bar>
  </body>
</html>



<!-- Fixed panes lock pane width based on content -->
<mc-pane-container>
  <mc-pane>...</mc-pane>
  <mc-pane fixed>...</mc-pane>
</mc-pane-container>


<!-- Resizable panes -->
<mc-pane-container resize>
  <mc-pane>...</mc-pane>
  <mc-pane>...</mc-pane>
</mc-pane-container>


<!-- Default percent based size -->
<mc-pane-container default-percent="75">
  <mc-pane>...</mc-pane> <!-- 75% -->
  <mc-pane>...</mc-pane> <!-- 25% -->
</mc-pane-container>


<!-- Remember resize state. Stored in local storage -->
<mc-pane-container resize remember>
  <mc-pane>...</mc-pane>
  <mc-pane>...</mc-pane>
</mc-pane-container>


<!--
  Make panes scroll in stead of document
  This means your document body will always be 100vh
  This also means top an bottom app bars will always show.
-->
<mc-pane-container scroll>
  <mc-pane>...</mc-pane>
</mc-pane-container>



<!-- Collapsable panes -->
<mc-pane-container resize>
  <mc-pane>...</mc-pane>
  <mc-pane collapsible>...</mc-pane>
  <!--
    You can mix collapsable and fixed
    <mc-pane fixed collapsible>...</mc-pane>
  -->
</mc-pane-container>



<!-- Remove padding -->
<mc-pane-container>
  <mc-pane no-padding>...</mc-pane>
</mc-pane-container>

// capture pane positions for storing
// Panes will store their sized in localstorage also
window.addEventListener('mcpaneresived', e => console.log(e.details));

Window sizes

Window size classes help create layouts that scale across devices of all shapes and sizes

Window size classes

Compact
Medium
Exapnded

<!-- Class names are added to the body for the current window size -->
<body class="window-compact"></body>
<body class="window-medium"></body>
<body class="window-exapnded"></body>

// Interact with mcDevice
import { mcDevice } from '@theWebformaula/materially/services';
// import { mcDevice } from '@theWebformaula/materially';

console.log(mcDevice.state); // current state

window.addEventListener('mcwindowstatechange', ({ detail }) => {
  console.log(detail.lastState);

  switch (detail.state) {
    case mcDevice.COMPACT;
    case mcDevice.MEDIUM;
    case mcDevice.EXPANDED;
  }
});