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