@beamwind/preset-play
v2.0.4
Published
rapid prototyping for beamwind using auto-conversion of values
Downloads
28
Readme
@beamwind/preset-play
rapid prototyping for beamwind using auto-conversion of values
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
npm install @beamwind/preset-play
Usage
Please refer to the main documentation for further information.
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
or1.5
) are divided by a divisor and a unit is added (w-2.5
becomeswidth: 0.625rem;
)fractions (
1/6
or3/5
) are evaluated and%
is used as a unit (w-4/5
becomeswidth: 80%;
)most directives are lenient when a value is not found in the theme:
- decimal numbers (
2
or1.5
) are divided by a divisor and a unit is added (w-2.5
becomeswidth: 0.625rem;
) - fractions (
1/6
or3/5
) are evaluated and%
is added as a unit (w-4/5
becomeswidth: 80%;
) - color names (
text-rebeccapurple
) and hex colors (text-#009900
)
- decimal numbers (
bg-gradient
accepts additionally to the side-or-corner parameter (bg-gradient-to-tr
) an angle or mixed parameters:bg-gradient
- defaults to180deg
egto bottom
bg-gradient-45
bg-gradient-0.25turn
bg-gradient-to-bottom-left
Contribute
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.