Core

Layout

The page skeleton: .ng-layout (flex root), .ng-content (central area) and .ng-container (inner wrapper). Header, footer and sidebar are dedicated components.

Every page is built from three nested pieces. .ng-layout is a full-height flex root; .ng-content is the central column that grows to fill it; .ng-container is the wrapper that holds your content with consistent side padding.

Page skeleton

The canonical nesting. Drop the grid, components and sections inside the container.

page.html

<div class="ng-layout">
    <main class="ng-content">
        <div class="ng-container container-center container-fix-1280">
            <!-- your page content -->
        </div>
    </main>
</div>

Container widths

Cap the content width with container-fix-<key> and center it with container-center. Both are needed: ng-container alone is full-width and left-aligned.

container-fix-400

container-fix-576

layout.html

<div class="ng-container container-center container-fix-400 mb-32">
    <div class="nxi-grid-cell">container-fix-400</div>
</div>
<div class="ng-container container-center container-fix-576">
    <div class="nxi-grid-cell">container-fix-576</div>
</div>

Available widths

container-fix-400 container-fix-576 container-fix-768 container-fix-992 container-fix-1280 container-fix-1400

Sidebar layouts

Because .ng-layout is a flex row, a Sidebar sits next to .ng-content automatically. Add ng-sidebar-right on the layout to flip it to the other edge.

sidebar.html

<div class="ng-layout">
    <aside class="ng-sidebar"> … </aside>
    <main class="ng-content"> … </main>
</div>

Reference

ng-layout ng-sidebar-right ng-content ng-container container-center container-fix-{400…1400}