Application Shell

Modular Admin provides a skeleton for your application.

The application shell provides an opinionated layout that makes it easy to rapidly build an application with optional navigation elements and a content area. Here's an example of an application layout:

<ma-app>
  <ma-top-nav>…</ma-top-nav>
  <ma-side-nav>…</ma-side-nav>
  <ma-content>
    (Your content here.)
  </ma-content>
  <ma-footer>…</ma-footer>
</ma-app>

Your content goes inside the <ma-content> element. If you are using routing in your application, you can place a <router-outlet> inside the content area. The <ma-top-nav>, <ma-side-nav>, and <ma-footer> may be omitted if you don't want to use them.

For more information on navigation, see the corresponding components:

Grid

Responsive layout grid.

Flexbox makes it easy to have multiple containers that are evenly distributed across the screen, and containers are automatically set to the same height using pure CSS. You can use standard Bootstrap grid classes like col-lg-6 or use unnumbered classes like col-lg to create equal size columns.

<div class='row'>
  <div class='col-lg'>
    <ma-card>
      <h2>Grid</h2>
      …
    </ma-card>
  </div>
  <div class='col-lg'>
    <ma-card>
      <h2>Columns</h2>
      …
    </ma-card>
  </div>
</div>

Grid layout is convenient when you want rows of equal height content. For example, this page you're reading uses grid layout.

Columns

Responsive column layout.

Column layout automatically flows your content into multiple columns. Modular Admin includes some helper classes to make this layout easy to use.

<div class='columns-md-2'>
  <ma-card> … </ma-card>
  <ma-card> … </ma-card>
  <ma-card> … </ma-card>
  <ma-card> … </ma-card>
</div>

Columns are responsive. In the example above, the columns-md-2 class means that content will be displayed in 2 columns on screen sizes medium and up. Sizes sm, lg, and xl are also supported, as are three column layouts, e.g. columns-lg-3. For an example of column layout, look at the Buttons page, which has 2 columns of cards.