Imprint

Nameplate and navigation for the Begin ecosystem.

Usage

Install via the GitHub repo, preferably with a version tag:

npm i git@github.com:beginner-corp/imprint.git#v<N.N.N>

Reexport the element(s) from within your Enhance app:

// app/elements/begin-masthead.mjs
import { Masthead } from '@begin/imprint'
export default Masthead

Available imports

Masthead

All of the following need to be exposed as elements when using the Masthead:

export name	element name
Masthead	begin-masthead
BeginLogo	masthead-begin-logo
DeployButton	masthead-deploy-button
ProductLink	masthead-product-link
SectionDropdown	masthead-section-dropdown
SectionLink	masthead-section-link
Slice	masthead-slice
Symbols	masthead-symbols

Footer

All of the following need to be exposed as elements when using the Footer:

export name	element name
BeginFooter	begin-footer
BeginLogo	masthead-begin-logo
MadeWith	footer-made-with

Custom properties

The Masthead and Footer styling can be customized via the use of custom properties. Each comes with a default value baked in.

Masthead

Custom property	Application
--accent	Links and other colour accents
--inline-padding	Inline padding on masthead contents
--muted	Nav section headings
--max-inline-size	Maximum width of the masthead contents

The Masthead also exposes several custom properties that can be used for layouts in your app:

• --global-bar-height: The height of the global bar
• --product-bar-height: The product bar height
• --masthead-max-height: The height of the global bar + product bar

Footer

Custom property	Application
--accent	Link colour, and basis for horizontal rule
--color	Text colour
--background-color	Background colour
--inline-padding	Inline padding on footer contents
--max-inline-size	Maximum width of the footer contents

Attributes

Masthead

• breakpoint: Minimum width (ideally in ems) at which to switch from single column to multicolumn layout
• product: Optional; name of the product the site is for
• active: Optional; name of the global section that should show as active (usually 'products')

Footer

• breakpoint: Minimum width (ideally in ems) at which to switch from single column to multicolumn layout