Adliance.AspNetCore.Buddy.GuiKit.Madx 10.2.0.14

Adliance.AspNetCore.Buddy.GuiKit.Madx

This is a branded version of Adliance.AspNetCore.Buddy.GuiKit for MADX. It bundles the MADX theme, logo, and layout on top of the base GuiKit package, so applications built for MADX get consistent branding without having to assemble the assets themselves.

Setup

Reference the package and add the tag helpers to your _ViewImports.cshtml:

@addTagHelper *, Adliance.AspNetCore.Buddy.GuiKit

Use _MadxCommonLayout.cshtml as the layout for your views:

@{
    Layout = "_MadxCommonLayout";
}

The layout references the bundled MADX CSS/JS (min.css/min.js, which already contain GuiKit's) and renders the MADX logo, so no further setup is required to get the MADX look and feel.

Login pages

Use _MadxLoginLayout.cshtml for the login page. The page's body is the login form, in the right half; the optional Brand section (eg. the app's logo and a short text) goes into the left half. Both halves' content meets in the middle of the page, and on small screens they are stacked (MADx logo, brand, form). Without Brand, the form is centered on its own.

@{
    Layout = "_MadxLoginLayout";
}

@section Header
{
    <title>My App</title>
}

@section Brand
{
    <img src="~/images/logo.png" alt="My App"/>
    <p>Curious what My App can do for you? <a href="https://example.com">Learn More &rarr;</a></p>
}

<agk-link asp-action="LoginWithMicrosoft" icon="fa-building" text="Login with Microsoft"/>
<form method="post">
    <agk-input asp-for="Username" label="Username" autocomplete="username"/>
    <agk-password asp-for="Password" label="Password" autocomplete="current-password"/>
    <agk-button type="submit" text="Login with username" color="Secondary"/>
</form>

Buttons and links that are direct children of the body or of its form span the form's whole width. The optional Background section covers the form's half behind the form (eg. <img src="~/images/login.png" alt=""/>, which is scaled to cover it) - without it, the MADx "X" is shown there. Both halves are --madx-login-width (20rem) wide, and the form's half has the background --madx-login-background (the MADx night color), which can be overridden in the agk.theme layer like any other variable.

What's included

• MADX color theme and CSS overrides on top of the base GuiKit styles (in css/madx.css, which overrides GuiKit's --agk-* variables in the agk.theme cascade layer - see the GuiKit README for theming)
• MADX logo and brand assets
• Shared Razor layouts (_MadxCommonLayout, and _MadxLoginLayout for login pages) pre-wired with the MADX branding, both based on GuiKit's _AgkLayout