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.


<!doctypehtml>
<html lang=en>
  <header>...</header>

  
  <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>




<!doctypehtml>

  <header>...</header>
  
    <div style="grid-area: header;">...</div>
    <div style="grid-area: navigation;">...</div>
    <main>...</main>
    <div style="grid-area: footer;">...</div>

Panes

Panes are used to group the UI

<!doctypehtml>

  <header>...</header>
  
    <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>
  





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



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



<mc-pane-container default-percent=75>
  <mc-pane>...</mc-pane> 
  <mc-pane>...</mc-pane> 
</mc-pane-container>



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



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




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




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

Window sizes

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

Window size classes

Compact
Medium
Exapnded

// 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;
  }
});