@al/ui-css-kit

This CSS only library manages global styles, component styles, and low-level utility classes.

Usage no npm install needed!

<script type="module">
  import alUiCssKit from 'https://cdn.skypack.dev/@al/ui-css-kit';
</script>

README

UI CSS KIT

This CSS only library manages global styles, component styles, and low-level utility classes.

Structure

1. Configuration

Global variables (--ald-g-*).

  • color (--ald-g-color-*)
  • space (--ald-g-space-*)
  • font
    • family (--ald-g-font-stack)
    • size (--ald-g-text-*)
    • line height (--ald-g-leading-*)
  • radius (--ald-g-radius-*)
  • breakpoints (--ald-g-breakpoint-*)
  • shadows (--ald-g-shadow-*)

2. Abstract

  • Normalize - makes browsers render all elements more consistently and in line with modern standards.

  • Mixins to generate font sizes and responsive breakpoints.

    • Media query @mixin mediaquery()
    • Font size @mixin font-size()

3. Utility

A collection of classes that are generic enough to be widely used.

  • layout
    • container .u-container-*
    • display .u-hidden .u-block
    • overflow .u-overflow-*
    • position .u-relative .u-absolute .u-sticky
    • top, right, bottom, left locations .u-*-0
    • z-index .u-z-*
  • flexbox
    • gap .u-gap-*
    • flexbox .u-flex-* .u-justify-* .u-items-*
  • spacing
    • padding .u-p-* .u-px-* .u-py-* .u-pt-* .u-pr-* .u-pb-* .u-pl-*
    • margin .u-m-* .u-mx-* .u-my-* .u-mt-* .u-mr-* .u-mb-* .u-ml-*
  • sizing
    • width .u-w-*
    • height .u-h-*
  • typography
    • font size .u-text-*
    • font stack .u-font-system
    • font weight .u-font-*
    • text color .u-text-*
    • text overflow .u-truncate .u-overflow-ellipsis
    • text transform .u-uppercase .u-lowercase .u-capitalize u-normal-case
    • whitespace .u-whitespace-*
    • word break .u-break-*
  • ground
    • background and foreground .u-background .u-foreground
    • background color .u-bg-*
  • border
    • color .u-border-*
    • radius .u-rounded-*
    • style .u-border-*
    • width .u-border-* .u-border-t-* .u-border-r-* .u-border-b-* .u-border-l-*
  • effects
    • shadow .u-shadow-*
  • interactivity
    • cursor .u-cursor-*
    • outline .u-outline-*
    • user-select .u-select-none

4. Components

Component themes using CSS variables

  • badge .ald-badge
  • button .ald-btn
  • button group .ald-btn-group
  • data item .ald-data-item
  • dropdown .ald-data-item
  • forms
    • input .ald-input
    • select .ald-select
    • textarea .ald-text-area
    • radio .ald-radio
    • checkbox .ald-checkbox
    • switch .ald-switch
  • icon .ald-icon
  • spinner .ui-progress-spinner
  • stack .ald-stack
  • table .ald-table
  • tabs .ald-tabs
  • treetable .ald-treetable

5. Global

App wide rules

  • Affects <h*><body><p> elements