style-assistant
style-assistant WIP
Table of Contents
Quick Start
npm install --save style-assistant
const myAssistant= {}
or
npm install --save style-assistant
Examples
Link | Description | Tools Used |
---|---|---|
This Example shows how you can recreate styled-system and rebass with responsiveProp | responsiveProp & switchProp | |
WIP- demos for API usage below | ALL |
Usage
Usage Here
const config={}const styler= config//ORconst pxToRem pxToEm pxToPct pxToRelative normalize normalizeToEm normalizeToRem toMq parse getDefaultTheme mergeDefaultTheme getTheme getThemeWithFallbackKey getThemeOr responsiveProp responsiveBoolProp switchProp transformStyle= config
Config
config descriptions
Key | Default Value | Description | Used in |
---|---|---|---|
defaultTheme | {} | defaultTheme is a fallback object if a theme or theme value is not provided within props | getTheme |
baseFontSize | 16 | Used for unit conversion utils | pxTo |
themeKey | 'theme' | Although 'theme' is the norm, some other libraries pass theme as '$theme' | getTheme |
breakpointsKey | 'breakpoints' | This is used for responsive utils and toMq util | responsiveProp,responsiveBoolProp |
transformOptions | {defaultLookup: false, defaultTransform: false, keys: {}, getter: {}, functions: {pxToRem ,pxToEm ,pxToPct } } |
Set Global options for the transformStyle util | transformStyle |
responsivePropOptions | {transform: false} | Set Global options for responsivePropOptions | responsiveProp |
switchPropOptions | {transform: false} | Set Global options for switchPropOptions | switchProp |
parserOptions | {transform: false} | Set Global options for parserOptions | parser |
const config = defaultTheme baseFontSize: 16 /// Unitless value used for unit conversions Utils themeKey: 'theme' /// Unitless value used for unit conversions Utils breakpointsKey: 'breakpoints' transformOptions: defaultLookup: true defaultTransform: true keys: defaultLookupskeys getter: defaultLookupsgetter functions: defaultLookupsfunctions responsivePropOptions: transform: false switchPropOptions: transform: false parserOptions: transform: false
Example Theme
/// Any theme attribute can be an value, array or object // breakpoints:[640,832,1024], breakpoints: tablet: 640 laptop: 832 desktop: 1024 //space:[0,2,4,8,16,32,64,128], space: none: 0 xxs: 2 xs: 4 sm: 8 md: 16 lg: 32 xl: 64 xxl: 128 //fontSizes:[12,14,16,20,24,32,48,64,72], fontSizes: xs: 12 sm: 14 md: 16 lg: 20 xl: 24 xxl: 32 xxxl: 48 colors: red: "#f5222d" ;
defaultLookUps
const identity = x /// Any theme attribute can be an value, array or object keys: /// Default themeKey to use id matching cssProp is found within transformStyle margin: 'space' marginTop: 'space' marginBottom: 'space' marginLeft: 'space' marginRight: 'space' padding: 'space' paddingTop: 'space' paddingBottom: 'space' paddingLeft: 'space' paddingRight: 'space' color: 'colors' fontSize: 'fontSizes' fontFamily: 'fonts' lineHeight: 'lineHeights' fontWeight: 'fontWeights' letterspace: 'letterspaces' maxWidth: 'maxWidths' minWidths: 'minWidths' height: 'heights' gridGap: 'space' gridColumnGap: 'space' gridRowGap: 'space' border: 'borders' borderColor: 'colors' backgroundColor: 'colors' boxShadow: 'shadows' getter: /// Default getter to use id matching cssProp is found within transformStyle, can be string to match functions below or function margin: 'pxToRem' marginTop: 'pxToRem' marginBottom: 'pxToRem' marginLeft: 'pxToRem' marginRight: 'pxToRem' padding: 'pxToRem' paddingTop: 'pxToRem' paddingBottom: 'pxToRem' paddingLeft: 'pxToRem' paddingRight: 'pxToRem' fontSize: 'px' functions: // Shorthand lookup functions. used in switchProp. If value is a string of one of the keys below, then will call corresponding function with corresponding prop value identity returnAsIs: identity //Can add aliases propValue: identity //alias self: identity //alias + 'px' + 'ms' { x = x = Math < 1 ? x * 100 : x return x + '%' }
Function Dependecies
- pxTo
- config.baseFontSize
- pxToEm
- pxToRem
- pxToPct
- pxToPct
- pxToRelative
- normalize
- normalizeToEm
- normalizeToRem
- toMq
- getTheme
- config.themeKey
- config.defaultTheme
- transformStyle
- getTheme
- config.transformOptions
- config.alwaysTransform
- responsiveProp
- getTheme
- config.breakpointsKey
- toMq
- transformStyle
- config.responsivePropOptions
- responsiveBoolProp
- getTheme
- config.breakpointsKey
- toMq
- transformStyle
- switchProp
- responsiveProp
- responsiveBoolProp
- transformStyle
- config.transformOptions.functions
- config.switchPropOptions
- parser
pxTo
Deps: | config.baseFontSize. |
Live Example: Sandbox
unit => pxNumber || pxString => converted
[Description Here]
Example
TODO...
pxToEm
Deps: | pxTo |
Live Example: Sandbox
[Description Here]
Example
const styler= baseFontSize:16const example=styler //=> '1em'
pxToRem
Deps: | pxTo |
Live Example: Sandbox
[Description Here]
Example
const styler= baseFontSize:16const example=styler //=> '1rem'
pxToPct
Deps: | pxTo |
Live Example: Sandbox
[Description Here]
Example
const styler= baseFontSize:16const example=styler //=> '1%'
pxToRelative
Deps: | pxTo |
Live Example: Sandbox
[Description Here] Returns untiless relative number.
Example
const styler= baseFontSize:16const example=styler //=> 1
normalize
Deps: | pxTo |
Live Example: Sandbox
[Description Here]
Example
...TODO
normalizeToEm
Deps: | normalize | Live Example: Sandbox [Description Here]
Example
const styler= baseFontSize:16const example=styler //=> '2em'const example2=styler //=> '2em'
normalizeToRem
Deps: | normalize |
Live Example: Sandbox
[Description Here]
Example
const styler= baseFontSize:16const example=styler //=> '2rem'const example2=styler //=> '2rem'
getTheme
Deps: | config.themeKey | config.defaultTheme |
Live Example: Sandbox
[Description Here]
Example
const defaultTheme = colors: "red": "#f5222d" const getTheme = defaultTheme const emptyProps = {}const withProps = theme: colors: blue: 'myBlueColor' let o = {}owithEmptyProps = emptyProps //=>"red": "#f5222d"owithProps = withProps //=>"blue": "myBlueColor"odotNotation = emptyProps //=>"#f5222d",ofallsBacktoDefaultTheme = withProps //=> "#f5222d"
toMq
Deps: | pxToEm |
Live Example: Sandbox
Used in responsive utilties. quick helper to convert object to media query string. Currently depends on the 'pxToEm' functions.
Example
import React from 'react'import styled from './styled'import styler from './styler' const StyledExample = const Example = color: 'red' styler: color: 'blue' //Example=>{"color":"red","@media screen and (min-width:25em)":{"color":"blue"}} const Component = Example return <div> <Component>JSON</Component> </div>
transformStyle
Deps: | getTheme | config.transformOptions | config.alwaysTransform |
Live Example: Sandbox
[Description Here]
Example
const identity = xconst transformOptions = functions: identity /// usefull in long switchProp Blocks self: identity //alias + 'px' const defaultTheme = space: none: 0 xxs: 2 xs: 4 sm: 8 md: 16 lg: 32 xl: 64 xxl: 128 const transformStyle = transformOptions defaultTheme const emptyProps = {}const withProps = theme: colors: blue: 'myBlueColor' const exampleOptions = key: 'space' getter: 'pxToRem'//// *************************All below will result to {"marginTop": "1rem"}*******************************let o = {}oBasic = emptyProps oConverts = emptyProps olooksUpValue = emptyProps opostFnOrGetter = emptyProps /// preFn options runs the raw value before applying theme lookup or getter/postfnopreFn = emptyProps
responsiveProp
Deps: | getTheme | toMq | transformStyle | config.breakpointsKey |
Live Example:Sandbox
[Description Here]
Example
const defaultTheme = fontSizes: 12 14 16 20 24 32 48 64 96 128 fontSizesObj: xs:12sm:14 md:16 lg:20 breakpoints: 640 832 1024 const responsivePropOptions=transform:trueconst responsiveProppx = defaultThemeresponsivePropOptions let o = {}obasic=fontSize:'2px' //=>{"fontSize": "2px"} othemeLookup=fontSize:1 //=>"{fontSize": "14px"} oresponsivethemeLookup=fontSize:12//=>{"fontSize": "14px","@media screen and (min-width:40em)": {"fontSize": "16px" }} ousingBuiltInTransformation=fontSize:12//=>{ "fontSize": "0.875rem", "@media screen and (min-width:40em)": { "fontSize": "1rem" } } ousingObjectStyleTheme=fontSize:"sm"'md'//=>{ "fontSize": "14px", "@media screen and (min-width:40em)": { "fontSize": "16px" } }
responsiveBoolProp
Deps: | getTheme | toMq | config.breakpointsKey |
Live Example:Sandbox
This function is useful if you have a css property with a static default value, and want to apply to certain breakpoints
Example
const defaultTheme = breakpoints: 640 832 1024const defaultTheme2 = breakpoints: 'sm':640'md':832 'lg':1024 const responsivePropOptions=transform:trueconst responsiveBoolProp = defaultThemeresponsivePropOptions const responsiveBoolProp:responsiveBoolProp2 = defaultTheme:defaultTheme2responsivePropOptions const hidden= const hidden2= let o = {}obasic= //=>{ "display": "none" } oresponsive= //=>{ "display": "none", "@media screen and (min-width:40em)": { "display": "block" } } obasicObjBP= //=>{ "display": "none" } oresponsiveObjBP= //=>{ "display": "none", "@media screen and (min-width:40em)": { "display": "block" } } oresponsiveObjBP2=//=>{ "display": "none", "@media screen and (min-width:40em)": { "display": "block" } }
switchProp
Deps: | responsiveProp| responsiveBoolProp | transformStyle | config.transformOptions.functions | config.switchPropOptions |
Live Example:Sandbox
[Description Here] Useful SwitchStatement like style block.
Basic Example
const defaultTheme = breakpoints: tablet: 640 laptop: 832 desktop: 1024 space: none: 0 xxs: 2 xs: 4 sm: 8 md: 16 lg: 32 xl: 64 xxl: 128 const transformOptions = functions: x + 'px' const switchPropOptions=transform:trueconst switchProppxToRem = defaultThemeswitchPropOptionstransformOptions ///Use switch props for alias prop Targetsconst padding = let o = {} obasic = //=>{ "padding": "1rem" } obasic2 = //=>{ "padding": "0.5rem" } oorderMatters = //=>{ "padding": "1rem" } oUsesDefault = //=>{ "padding": ".25rem" } oresponsive = //=>{ "padding": "1rem", "@media screen and (min-width:40em)": { "padding": "0.5rem" } } oresponsiveWithObj = //=>{ "@media screen and (min-width:64em)": { "padding": "0.5rem" } } olooksUpSpaceTheme = //=>{ "padding": "0.5rem" } oresponsiveThemeLookup = //=>{ "padding": "0.5rem", "@media screen and (min-width:40em)": { "padding": "1rem" }, "@media screen and (min-width:52em)": { "padding": "2rem" } }
parser
Deps: | switchProp | responsiveProp | responsiveBoolProp | toMq |
Live Example:
[Description Here] parser aka styler.
Example
const parser =
Contributing
Contributions are welcome! Feel free to open an issue or a pull request and participate at whatever level you would like.
License
The MIT License - see LICENSE
.