@cloudflare/elements
TypeScript icon, indicating that this package has built-in type declarations

3.0.5 • Public • Published

elements

Props-based styling hooked into the Cloudflare design system.

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/elements

Usage

elements is a method of styling closely resembling writing semantic HTML, leading to greater readability. Because it uses styled-system under the hood, elements is able to work with most css-in-js libraries and greater enforce constraint-based styling.

Pseudo-classes

For pseudo-class usage, you'll want to default to usage of createComponent from @cloudflare/style-container.

Responsive styling

For guidelines on responsive styling, read the styled-system guidelines on styles.

When do I use Component Library?

Certain elements, such as <Button /> and <Select /> have counterparts in Component Library. To reduce confusion around when to use elements versus Component Library, a general rule of thumb is: if it looks like a Component Library component, it's best to use Component Library. If you need alternate styling but semantically require the specified DOM element (ex: <button />) then use elements. There will be ongoing work to rewrite Component Library using elements, thus this reduces the amount of maintenance needed.

Readme

Keywords

none

Package Sidebar

Install

npm i @cloudflare/elements

Weekly Downloads

10,504

Version

3.0.5

License

BSD-3-Clause

Unpacked Size

129 kB

Total Files

6

Last publish

Collaborators

  • lbarthonet
  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga