Songhay.Modules.Bolero 6.1.2

Songhay.Modules.Bolero

shared functions and types for Bolero, supporting CSS 💄, specifically Bulma CSS 🍱🖼

NuGet package 📦: Songhay.Modules.Bolero

These are the main concerns of this work:

• Utility, mostly sharing functions for Remoting and IJSRuntime
• Visuals, a deliberately incomplete coverage of HTML, CSS and Bulma by Jeremy Thomas
• Models (Primitives), F♯ primitive obsession, supporting the Visuals

Utility

There are four utilities:

1. a utility for Bolero [src]
2. a utility for JSON documents [src]
3. a utility for IJSRuntime [src]
4. a utility for IRemoteService [src]

Visuals and Models

Here is my first attempt at building a <acronym title="Domain-Specific Language">DSL</acronym> for HTML, CSS and Bulma CSS on top of Bolero. For example, here is an expression for building a Bulma footer:

let footerNode =
    let cssClassesParentLevel = CssClasses [ levelContainer; isMobileModifier ]
    let cssClassesSvgVersionNodes = [ bulmaTextGreyLightTone ] |> cssClassesParentLevel.AppendList
    let versionsNode =
        div {
            cssClassesSvgVersionNodes.ToHtmlClassAttribute
            forEach App.appVersions <| svgVersionNode
        }
    let socialNode =
        bulmaLevel
            (HasClasses (CssClasses [ isMobileModifier ]))
            (forEach App.appSocialLinks <| studioAnchor)
    let signatureNode =
        paragraphElement
            NoCssClasses
            NoAttr
            (span {
                "copyright" |> CssClasses.toHtmlClass
                rawHtml $"© Bryan D. Wilhite {DateTime.Now.Year}"
            })
    bulmaContainer
        ContainerWidthFluid
        NoCssClasses
        (concat {
            bulmaColumnsContainer
                NoCssClasses
                (concat {
                    bulmaColumn
                        (HasClasses (CssClasses [ HSize4.CssClass; elementTextAlign AlignCentered ]))
                        studioLogo
                    bulmaColumn
                        (HasClasses (CssClasses [ HSize4.CssClass ]))
                        socialNode
                    bulmaColumn
                        (HasClasses (CssClasses [ HSize4.CssClass; elementTextAlign AlignCentered ]))
                        signatureNode
                })
            bulmaColumnsContainer
                (HasClasses (CssClasses [ AlignCentered.CssClass ]))
                (concat {
                    bulmaColumn
                        (HasClasses (CssClasses [ HSize4.CssClass ]))
                        versionsNode
                })
        })

The preference here (at the moment) is to have more types than functions for the DSL. These types are grouped into four models of primitives:

1. Bulma Primitives [src]
2. CSS Primitives [src]
3. HTML Primitives [src]
4. SVG Primitives [src]

These models support the functions of the Visuals:

1. HTML Body Visuals [src]
2. CSS Declarations [src]
3. HTML Head Elements [src]
4. Bulma Component Visuals [src]
5. Bulma CSS Class names [src]
6. Bulma Element Visuals [src]
7. Bulma Layout Visuals [src]

The coverage of HTML is quite limited because Bulma itself has its own, excellent HTML DSL on which this work depends heavily. The generic CSS coverage is starting off with typography. The Bulma-specific coverage is the most extensive but lacking in the following areas:

• the Bulma form
• Bulma pagination

I look forward to working a bit more on this Bulma coverage, likely starting with Bulma pagination.

custom JavaScript is needed for the Bulma Navbar

In order to toggle the Bulma Navbar burger and its dropdown menu, the following JavaScript is needed:

(() => {

    window.addEventListener('DOMContentLoaded', () => {
        const burger = document.querySelector('.navbar-burger');
        const nav = document.querySelector(`#${burger.dataset.target}`);
        const isActiveCssClass = 'is-active';

        burger.addEventListener('click', () => {
            burger.classList.toggle(isActiveCssClass);
            nav.classList.toggle(isActiveCssClass);
        });
    });

})();

This JavaScript is similar to the code provided in the Bulma documentation.

@BryanWilhite