Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Layout

Layout is the visual arrangement of elements on the screens
Material Design Guidelines: 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;
  }
});
            
menu home apps Get started