A tool for writing style and media query more efficiently with Aphrodite
npm install aphrodite-freestyle
item: {
color: 'blue',
selected: {
color: 'red'
}
}
`
- Standalone breakpoint definition: it can be used to convert into the styles Aphrodite need.
- Build-in global selector extension for supporting global style.
Install
npm install aphrodite-freestyle
Notice
- The name you defined for substate should not start with :, because it was used in pseudo-selector
- The def param in your style is required.
- The media name in your styles and breakpoints definition should be the same.
- The alias param's value is a abbreviation for writing the media name convinent, it use as param name in creatStyle function's return. So that I can write this way : css(dt.box) not css(desktop.box).
- Ensure writing param media and alias both in your breakpoints if you use alias.
Usage
#### 1. Defined your breakpoint
`javascript
//breakpoints.js
export default {
mobile : '@media (max-width: 600px)',
desktop : {media:'@media (min-width: 601px) and (max-width: 1200px)', alias:'dt'}
}
`
#### 2. Design your styles
`javascript
//styles.js
export default {
def: {
item: {
color: 'green',
selected: {
color: 'yellow'
}
},
box: {
//this won't be work because of the breakpoint definition
width: '600px'
}
},
mobile: {
box: {
width: '400px',
}
},
desktop : {
box: {
width: '800px',
'*a': {
color: 'orange'
}
}
}
}
`
#### 3. Import in
`javascript
//App.js
import React, { Component } from 'react'
import {creatStyle, css} from 'aphrodite-freestyle'
import breakpoints from './breakpoints'
import styles from './styles'
class App extends Component{
render() {
let {def,mobile,dt} = creatStyle(styles, breakpoints)
return (
)
}
}
App.defaultProps = {
activeItem: 'home'
}
`
API
`javascript
/**
* @description
* The convert function.
* @param @required {object} styles: the style definition
* @param @required {object} breakpoints: the breakpoint definition
* @return {object} the converted styles, the param is alias in breakpoints if you use it.
*/
creatStyle(styles, breakpoints)
/**
* @description
* Aphrodite origin function, but with some extensions.
* @param @required {object} the same as aphrodite
* @return {object} the converted styles by aphrodite
*/
css(...)
`
Changelog
$3
- Created a global selector extension to support global style
$3
- Support the substate nested in style
- change name aphrodite-breakpoint to aphrodite-freestyle`