rapid prototyping for beamwind using auto-conversion of values
npm install @beamwind/preset-play> rapid prototyping for beamwind using auto-conversion of values
> Read the docs |
> API |
> Change Log
---
> This is a only a preset. @beamwind/play provides a ready to use bw export.
> This preset should be used for _prototyping only_ as it usually prevents a consistent UI experience.
---
- Installation
- Usage
- Contribute
- License
``sh`
npm install @beamwind/preset-play
> Please refer to the main documentation for further information.
`js
import { setup, warn } from '@beamwind/core'
import play from '@beamwind/preset-play'
// Use warn as fallback if no conversion could be made
setup(play(warn))
`
See preset-play/src/play.ts which conversions are applied.
Most tailwind classes use a deterministic number calculation scheme (for example width). If beamwind detects a number in a directive and there is not mapped value in the theme it uses the following algorithm to generate a CSS value which aligns with the tailwind rules for that directive:
- decimal numbers (2 or 1.5) are divided by a divisor and a unit is added (w-2.5 becomes width: 0.625rem;)1/6
- fractions ( or 3/5) are evaluated and % is used as a unit (w-4/5 becomes width: 80%;)
- most directives are lenient when a value is not found in the theme:
- decimal numbers (2 or 1.5) are divided by a divisor and a unit is added (w-2.5 becomes width: 0.625rem;)1/6
- fractions ( or 3/5) are evaluated and % is added as a unit (w-4/5 becomes width: 80%;)text-rebeccapurple
- color names () and hex colors (text-#009900)
- bg-gradient accepts additionally to the side-or-corner parameter (bg-gradient-to-tr) an angle or mixed parameters:bg-gradient
- - defaults to 180deg eg to bottom
-
-
-
Thanks for being willing to contribute!
> This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.
Working on your first Pull Request? You can learn how from this _free_ series How to Contribute to an Open Source Project on GitHub
We are following the Conventional Commits convention.
 Kenoxa GmbH