@fower/core
#
Installation- npm
- Yarn
npm install @fower/core
yarn add @fower/core
#
cssimport { fower, css } from '@fower/core'import preset from '@fower/preset-web'
fower.setConfig(preset)
const className = css('p-20', 'mx-10', 'borderGray', 'text4XL')
const $app = document.getElementById('root')
$app.className = className
#
createStyleUse Atomic Props:
import React from 'react'import { createStyle } from '@fower/core'
const cardStyle = createStyle('p-20', 'square-400', 'bgRed')
export default () => { return <div style={cardStyle}></div>}
Use CSS Object:
import React from 'react'import { createStyle } from '@fower/core'
const cardStyle = createStyle('p-20', 'square-400', 'bgRed', { background: '#fff', fontSize: 14,})
export default () => { return <div style={cardStyle}></div>}
#
keyframeimport { Box } from '@fower/react'import { keyframes } from '@fower/core'
const bounce = keyframes({ 'from, 20%, 53%, 80%, to': { transform: 'translate3d(0,0,0)', padding: 10, },
'40%, 43%': { transform: 'translate3d(0, -30px, 0)', },
'70%': { transform: 'translate3d(0, -15px, 0)', },
'90%': { transform: 'translate3d(0,-4px,0)', },})
export default () => { return ( <Box toCenter> <Box text-30 css={{ animation: `${bounce} 1s ease infinite`, }} > 40 Lorem ipsum dolor sit amet </Box> </Box> )}
#
injectGlobalStyleimport { injectGlobalStyle } from '@fower/core'
injectGlobalStyle({ '*, ::before, ::after': { borderWidth: 0, borderStyle: 'solid', borderColor: '#d4d4d4', boxSizing: 'border-box', }, html: { padding: 0, margin: 0, },})
#
setConfigimport { setConfig } from '@fower/core'
setConfig({ unit: 'rem',})
#
getConfigimport { getConfig } from '@fower/core'
const config = getConfig()
#
setThemeimport { setTheme } from '@fower/core'
setTheme({ colors: { brandLight: '#e0f2fe', brandLighter: '#bae6fd', brandLightest: '#7dd3fc', brandPrimary: '#38bdf8', brandDark: '#0ea5e9', brandDarker: '#0284c7', brandDarkest: '#0369a1', },})
#
getThemeimport { getTheme } from '@fower/core'
const theme = getTheme()
#
addAtomaddAtom
will create new atomic prop.
import { addAtom } from '@fower/core'
addAtom('textHeading', { fontSize: 28, fontWeight: 600, lineHeight: 1.5,})
#
composeAtomcomposeAtom
will compose existed atomic props to single, but not create a new prop.
import { composeAtom } from '@fower/core'
composeAtom('formInput', { 'border-2': true, borderGray200: true, 'borderOrange400--focus': true, rounded: true, outlineNone: true, px4: true, py2: true,})