How to use the jsxstyle/curry function in jsxstyle
To help you get started, we’ve selected a few jsxstyle examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
py-in-the-sky / gae-flask-redux-react-starter-kit / browser_client / src / app / components / Flex / Flex.js View on Github 
import BaseFlex from 'jsxstyle/Flex'
import curry from 'jsxstyle/curry'
export const Flex = curry(BaseFlex, {
backfaceVisibility: 'hidden',
boxSizing: 'border-box',
flex: '1 1 auto',
height: 'auto',
justifyContent: 'flex-start',
order: 0,
position: 'relative',
})
export const ColumnWise = curry(Flex, {
flexDirection: 'column',
})
export const Column = curry(Flex, {
flexDirection: 'column',
alignItems: 'stretch',
})
export const RowWise = curry(Flex, {
flexDirection: 'row',
})
export const Row = curry(Flex, {position: 'relative',
})
export const ColumnWise = curry(Flex, {
flexDirection: 'column',
})
export const Column = curry(Flex, {
flexDirection: 'column',
alignItems: 'stretch',
})
export const RowWise = curry(Flex, {
flexDirection: 'row',
})
export const Row = curry(Flex, {
flexDirection: 'row',
alignItems: 'stretch',
})
export const Container = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'hidden',
padding: '1rem',alignItems: 'stretch',
})
export const RowWise = curry(Flex, {
flexDirection: 'row',
})
export const Row = curry(Flex, {
flexDirection: 'row',
alignItems: 'stretch',
})
export const Container = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'hidden',
padding: '1rem',
})
/*
Fits width and height of the viewport. Use as the root flexbox
container in the app. Default: it arranges children in a
column-wise orientation.
*/
export const WindowFrame = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'column',also see this flexbox-based grid system that uses React with inline sytles:
http://broucz.github.io/react-inline-grid/
https://github.com/broucz/react-inline-grid
flexbox playgrounds:
http://demo.agektmr.com/flexbox/
http://bennettfeely.com/flexplorer/
http://the-echoplex.net/flexyboxes/
*/
import BaseFlex from 'jsxstyle/Flex'
import curry from 'jsxstyle/curry'
export const Flex = curry(BaseFlex, {
backfaceVisibility: 'hidden',
boxSizing: 'border-box',
flex: '1 1 auto',
height: 'auto',
justifyContent: 'flex-start',
order: 0,
position: 'relative',
})
export const ColumnWise = curry(Flex, {
flexDirection: 'column',
})
export const Column = curry(Flex, {Fits width and height of the viewport. Use as the root flexbox
container in the app. Default: it arranges children in a
column-wise orientation.
*/
export const WindowFrame = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'column',
flexWrap: 'nowrap',
height: '100vh',
minHeight: '400px',
overflowX: 'hidden',
overflowY: 'auto',
})
export const Frame = curry(Container, {
minHeight: '100%',
justifyContent: 'center',
})
/*
Default: when `flexDirection` is `row`, it's just tall enough
to accommodate children.
Alternative: when `flexDirection` is overridden and set to
`column`, it's just wide enough to accommodate children.
Optionally add padding to give some space between the border
of ShrinkWrap and its children.
This container is useful for menu bars.
NB: if you include drop-down menus, make sure to not set
`overflow` to `hidden` and make sure to keep `position` as
`relative` and the `position` of the drop-down menu asexport const Container = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'hidden',
padding: '1rem',
})
/*
Fits width and height of the viewport. Use as the root flexbox
container in the app. Default: it arranges children in a
column-wise orientation.
*/
export const WindowFrame = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'column',
flexWrap: 'nowrap',
height: '100vh',
minHeight: '400px',
overflowX: 'hidden',
overflowY: 'auto',
})
export const Frame = curry(Container, {
minHeight: '100%',
justifyContent: 'center',
})backfaceVisibility: 'hidden',
boxSizing: 'border-box',
flex: '1 1 auto',
height: 'auto',
justifyContent: 'flex-start',
order: 0,
position: 'relative',
})
export const ColumnWise = curry(Flex, {
flexDirection: 'column',
})
export const Column = curry(Flex, {
flexDirection: 'column',
alignItems: 'stretch',
})
export const RowWise = curry(Flex, {
flexDirection: 'row',
})
export const Row = curry(Flex, {
flexDirection: 'row',
alignItems: 'stretch',
})flexDirection: 'column',
})
export const Column = curry(Flex, {
flexDirection: 'column',
alignItems: 'stretch',
})
export const RowWise = curry(Flex, {
flexDirection: 'row',
})
export const Row = curry(Flex, {
flexDirection: 'row',
alignItems: 'stretch',
})
export const Container = curry(Flex, {
alignItems: 'stretch',
flexDirection: 'row',
flexWrap: 'nowrap',
overflow: 'hidden',
padding: '1rem',
})
/*
Fits width and height of the viewport. Use as the root flexbox/*
Default: when `flexDirection` is `row`, it's just tall enough
to accommodate children.
Alternative: when `flexDirection` is overridden and set to
`column`, it's just wide enough to accommodate children.
Optionally add padding to give some space between the border
of ShrinkWrap and its children.
This container is useful for menu bars.
NB: if you include drop-down menus, make sure to not set
`overflow` to `hidden` and make sure to keep `position` as
`relative` and the `position` of the drop-down menu as
`absolute`.
*/
export const ShrinkWrap = curry(Flex, {
alignItems: 'stretch',
flex: '0 0 auto',
flexDirection: 'row',
flexWrap: 'wrap',
})jsxstyle
Inline style system for React and Preact
