F+Foldkit Plus
HomeLearnPackagesComponentsDemosGitHub ↗

Mixins

Guides

foldkit-mixins

  • Overview
  • The mental model
  • Quick start
  • What the resolver guarantees
  • Slots: the public contract
  • Style: appearance as data
  • Behavior: reusable element-level interaction
  • SlotView
  • Testing and static output
  • Foundations in the first paint

foldkit-mixins-surface

  • Overview
  • Usage

foldkit-mixins-ui

  • Overview
  • The mental model
  • When to use it
  • Sixty seconds: style a Button without copying it
  • Follow the click
  • toView and resolve
  • What resolve does
  • What the resolver protects
  • Submodel components remain Submodels
  • Supported components
  • Views and components of this package
  • Recipes
  • Mechanisms
  • Accessibility patterns
  • Why some components needed a fork

Inside-out composition

  • Overview
  • The problem it solves
  • The five-term mental model
  • Why this is more than className
  • Style and Behavior are deliberately different
  • A small example
  • Surface and Mixins answer different questions
  • @foldkit/ui

API

foldkit-mixins

  • foldkit-mixins
  • foldkit-mixins/layers
  • foldkit-mixins/theme
  • foldkit-mixins/layout
  • foldkit-mixins/defaults
  • foldkit-mixins/prose
  • foldkit-mixins/app
  • foldkit-mixins/utilities
  • foldkit-mixins/testing
  • foldkit-mixins/foundations

foldkit-mixins-surface

  • foldkit-mixins-surface

foldkit-mixins-ui

  • foldkit-mixins-ui

Open source, MIT
Foldkit 0.168 · Effect 4

Mixins / foldkit-mixins/theme

fluidRatio

function · packages/mixins/src/theme/fluid.ts:73

function fluidRatio(viewport: Viewport): string

The ratio for a checked px range; see fluidRatioOf.

Previousfoldkit-mixins/theme

Edit on GitHub ↗

This site is a Foldkit Plus application, rendered at build time with foldkit-ssr. Its source

FoldkitEffectGitHub