Asset loading

#Bundles

Full is Core plus every standard component; for smaller pages, load Core and only the components you use. Preflight, the icons and the extensions sit outside both: load them only on pages that need them.

The Full script starts itself once at DOM readiness, also when it loads later, and an extension script loaded after it starts its own elements; Core and component scripts never start themselves, so call PLF.init() after they load. You can choose Full or single files separately for CSS and JavaScript, such as Full CSS with Core and component scripts, but never load a file that a Full file already provides. CSS-only components have no script.

Preflight resets every element inside a root, so markup built with the utilities spaces as these docs show, also beside a site’s own CSS; load it before Core or Full.

The icon stylesheets give the icon classes their icons, drawn by the icon class in Core; load them after Core or Full, only on pages with icon classes.

#Formats

Each bundle comes in these formats. Normal and minified files are alternatives with the same declarations and behavior; a document loads one CSS mode, one runtime format and one version.

#CSS order

Stylesheets load in this layer order: tokens → foundation → utilities → components → extensions → consumer overrides.

#Core and components

Load Core first, then each component’s CSS and script, then call PLF.init():

With ESM, import the CSS yourself, as JavaScript imports never import CSS, and register the components with use() so that init() starts them:

#Extensions

Calendar, Date Picker, Date & Time Picker, Color Picker, DataTable, Chart and Sortable are not in Full or the ESM root. Load their files after the components they need: after the Full script they start themselves, and with Core, call PLF.init(); Extensions lists the files.

#Types

The package includes type declarations, which editors also use for autocomplete in JavaScript; they need moduleResolution set to bundler or nodenext. Each ESM import carries its types, such as ModalInstance and ModalEventDetail, and an event listener knows its detail, such as event.detail.reason on plf:modal:close.

With the Browser script, add the global PLF with this line at the top of a script file, or for every file by listing @pelatform/ui/browser in the types of jsconfig.json (tsconfig.json in TypeScript):

An extension is on PLF once its script loads, so its type is optional: PLF.DataTable?.getInstance(table).

#Package metadata

The runtime never loads these files.

#Compact control sizes

Controls share three minimum heights and grow with larger fonts or content; Default has no modifier and there is no --md class.

A component’s own height, radius or icon variable on a root or element takes precedence over the modifiers; --plf-control-font-size, --plf-control-font-weight and --plf-control-icon-size set the shared defaults (Tokens). Use Small for dense toolbars and forms and Default or Large for touch input. A native select can show the platform’s own corner radius, as in WebKit.

#Component assets

Load Core, then the files under Also load, then the component’s CSS and the scripts under JavaScript, which can belong to another component (Sheet’s behavior is components/modal.js). Each file has a minified .min version and Prefixed markup uses the .prefixed.css files; a component guide’s JavaScript section lists the files its examples use.