@miraidesigns/page NPM

Page

A set of classes to help with standardizing page layouts. Used internally.

Sass

// Include default styles without configuration
@forward '@miraidesigns/page/styles';

// Configure appearance
@use '@miraidesigns/page' with (
    $variable: value
);

@include page.styles();

Standard Layout

The standard layout contains a separated, active sidebar and the main page component.\ A header at the top of the page holds the branding/logo type and the sidebar anchor element.\ The main area stretches out and fills the space between header and footer and holds our content.\ Our footer will generally hold a copyright notice and secondary navigation links and is stuck to the bottom of the page.

<body class="mdf-preload no-js">
    <div id="sidebar"></div>

    <div id="page" class="mdf-page">
        <header class="mdf-page__header">
            <div id="logo"></div>

            <button id="sidebar-anchor"></button>
        </header>

        <main class="mdf-page__main">
            <div class="mdf-container"></div>
        </main>

        <footer class="mdf-page__footer"></footer>
    </div>
</body>

mirai designs framework page

@miraidesigns/base @miraidesigns/fx @miraidesigns/theme @miraidesigns/utils

@infinitebrahmanuniverse/nolb-_mir @everything-registry/sub-chunk-607 @zalastax/nolb-_mir

1.0.1

4 years ago

1.0.0

4 years ago