@fower/core

Installation#

npm install @fower/core

css#

import { 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

createStyle#

Use 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>}

keyframe#

import { 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>  )}

injectGlobalStyle#

import { injectGlobalStyle } from '@fower/core'
injectGlobalStyle({  '*, ::before, ::after': {    borderWidth: 0,    borderStyle: 'solid',    borderColor: '#d4d4d4',    boxSizing: 'border-box',  },  html: {    padding: 0,    margin: 0,  },})

setConfig#

import { setConfig } from '@fower/core'
setConfig({  unit: 'rem',})

getConfig#

import { getConfig } from '@fower/core'
const config = getConfig()

setTheme#

import { setTheme } from '@fower/core'
setTheme({  colors: {    brandLight: '#e0f2fe',    brandLighter: '#bae6fd',    brandLightest: '#7dd3fc',    brandPrimary: '#38bdf8',    brandDark: '#0ea5e9',    brandDarker: '#0284c7',    brandDarkest: '#0369a1',  },})

getTheme#

import { getTheme } from '@fower/core'
const theme = getTheme()

addAtom#

addAtom will create new atomic prop.

import { addAtom } from '@fower/core'
addAtom('textHeading', {  fontSize: 28,  fontWeight: 600,  lineHeight: 1.5,})

composeAtom#

composeAtom 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,})
Edit this page