Custom Builds

View Source

WARNING: When using manual builds of Kahi UI, you'll need to rebuild the distributables every time you upgrade Kahi UI.

If you're building a Web Application that's particularly sensitive to latency, page sizes, etc. It's recommended to create custom builds of the Framework's CSS distributables.

Downloading

First, you'll need to head over to Releases, download the source code .zip / .tar.gz archive that matches the version of Kahi UI you're developing against, and decompress the archive onto your filesystem.

Installation

Once you've got everything downloaded and decompressed, open a terminal in the source code directory and install Kahi UI's dependencies.

npm ci

Building

Now you can start building the CSS distributables via a NPM script.

npm run build:framework

Which should output in the package/ directory like so.

package/
│
└───kahi-ui.framework.css           // Main CSS rules and stylings
└───kahi-ui.framework.css.map       // Source map for the above file
└───kahi-ui.theme.default.css       // Themeing variables that define the look and feel
└───kahi-ui.theme.default.css.map   // Source map for the above file

Then just copy the files you require into your Web Application's codebase and import them.

Minifying

You can also build the minified versions of the CSS distributables with another NPM script.

npm run build:minify

Which would output to package/ without source maps like so.

package/
│
└───kahi-ui.framework.min.css       // Main CSS rules and stylings
└───kahi-ui.theme.default.min.css   // Themeing variables that define the look and feel

Filters

Each individual feature of Kahi UI that requires CSS can turned off, removing it from builds. And it's as simple as adding command line parameters. Just run either of the NPM scripts with filter parameters following this format: --disable-{SCOPE}-{FEATURE}.

For instance, if wanting to disable Grid and the responsitivity of Spacings (e.g. margin={["mobile:medium"]}), try the following.

USAGE: The double dashes (--) after build:framework / build:minify is required so NPM passes our command line parameters to the script.

npm run build:framework -- --disable-globals-intrinsics-responsitivity --disable-components-grid

Components

  • Disclosure

    • --disable-components-disclosure-accordion — Accordion
    • --disable-components-disclosure-carousel — Carousel
    • --disable-components-disclosure-tab — Tab

  • Display

    • --disable-components-display-badge — Badge
    • --disable-components-display-kbd — Kbd
    • --disable-components-display-list — List
    • --disable-components-display-table — Table

  • Embedded

    • --disable-components-embedded-figure — Figure

  • Feedback

    • --disable-components-feedback-dot — Dot
    • --disable-components-feedback-ellipsis — Ellipsis
    • --disable-components-feedback-progress — Progress

  • Interactables

    • --disable-components-interactables-button — Button
    • --disable-components-interactables-check — Check
    • --disable-components-interactables-file-drop-input — FileDropInput
    • --disable-components-interactables-form — Form
    • --disable-components-interactables-number-input — NumberInput
    • --disable-components-interactables-radio — Radio
    • --disable-components-interactables-switch — Switch
    • --disable-components-interactables-text-input — TextInput

  • Layouts

    • --disable-components-layouts-center — Center
    • --disable-components-layouts-container — Container
    • --disable-components-layouts-divider — Divider
    • --disable-components-layouts-grid — Grid
    • --disable-components-layouts-group — Group
    • --disable-components-layouts-mosaic — Mosaic
    • --disable-components-layouts-position — Position
    • --disable-components-layouts-scrollable — Scrollable
    • --disable-components-layouts-spacer — Spacer
    • --disable-components-layouts-stack — Stack

  • Navigation

    • --disable-components-navigation-anchor — Anchor
    • --disable-components-navigation-aside — Aside
    • --disable-components-navigation-breadcrumb — Breadcrumb
    • --disable-components-navigation-menu — Menu
    • --disable-components-navigation-omni — Omni

  • Overlays

    • --disable-components-overlays-backdrop — Backdrop
    • --disable-components-overlays-clickable — Clickable
    • --disable-components-overlays-overlay — Overlay
    • --disable-components-overlays-popover — Popover

  • Surfaces

    • --disable-components-surfaces-box — Box
    • --disable-components-surfaces-card — Card
    • --disable-components-surfaces-hero — Hero
    • --disable-components-surfaces-tile — Tile

  • Typography

    • --disable-components-typography-blockquote — Blockquote
    • --disable-components-typography-code — Code
    • --disable-components-typography-heading — Heading
    • --disable-components-typography-text — Text

  • Utilities

    • --disable-components-utilities-animation — Animation
    • --disable-components-utilities-portal — Portal
    • --disable-components-utilities-transition — Transition

  • Widgets

    • --disable-components-widgets-dataselect — DataSelect

Globals

WARNING: Most non-Component specific properties are implemented as global CSS attributes to reduce redundancy. If you turn off the feature, it turns off for ALL Components.

  • --disable-globals-alignments — <* alignment="{ALIGNMENT}" alignment_x="{ALIGNMENT}" alignment_y="{ALIGNMENT}">
  • --disable-globals-alignments-responsitivity — <* alignment={["{VIEWPORT}:{ALIGNMENT}]} alignment_x={["{VIEWPORT}:{ALIGNMENT}]} alignment_y={["{VIEWPORT}:{ALIGNMENT}]}>
  • --disable-globals-elevations — <* elevation="{ELEVATION}">
  • --disable-globals-elevations-responsitivity — <* elevation={["{VIEWPORT}:{ELEVATION}"]}>
  • --disable-globals-fit — <* fit="{FIT}">
  • --disable-globals-fit-responsitivity — <* fit={["{VIEWPORT}:{FIT}"]}>
  • --disable-globals-grid — <* points="{POINTS}" span="{SPAN}" span_x="{SPAN}" span_y="{SPAN}">
  • --disable-globals-grid-responsitivity — <* points={["{VIEWPORT}:{POINTS}"]} span={["{VIEWPORT}:{SPAN}"]} span_x={["{VIEWPORT}:{SPAN}"]} span_y={["{VIEWPORT}:{SPAN}"]}>
  • --disable-globals-intrinsics — <* height max_height min_height margin padding size max_size min_size width max_width min_width>
  • --disable-globals-intrinsics-responsitivity — <* height max_height min_height margin padding size max_size min_size width max_width min_width>
  • --disable-globals-orientations — <* orientation="{ORIENTATION}">
  • --disable-globals-orientations-responsitivity — <* orientation={["{VIEWPORT}:{ORIENTATION}"]}>
  • --disable-globals-palettes — <* palette="{PALETTE}">
  • --disable-globals-radius — <* radius="{RADIUS}">
  • --disable-globals-radius-responsitivity — <* radius={["{VIEWPORT}:{RADIUS}"]}>
  • --disable-globals-sizings — <* sizing="{SIZING}">
  • --disable-globals-sizings-responsitivity — <* sizing={["{VIEWPORT}:{SIZING}"]}>
  • --disable-globals-spacings — <* spacing="{SPACING}" spacing_x="{SPACING}" spacing_y="{SPACING}">
  • --disable-globals-spacings-responsitivity— <* spacing={["{VIEWPORT}:{SPACING}"]} spacing_x={["{VIEWPORT}:{SPACING}"]} spacing_y={["{VIEWPORT}:{SPACING}"]}>