jsxstyle.md

jsxstyle and Co Interfaces

jsxstyle interface allows you to define CSS right inside your JSX nodes.

Provides you these pre-generated basic building blocks.

• <Block> — <div> with display: block.
• <Inline> — <span> with display: inline.
• <InlineBlock> — <div> with display: inline-block.
• <Row> — <div> with display: flex; flex-direction: row.
• <Column> — <div> with display: flex; flex-direction: column.

Usage

Import the basic building blocks.

import {
    jsxstyle,
    Block,
    Inline,
    InlineBlock,
    Row,
    Column
} from 'freestyler/lib/jsxstyle';

Or create your own custom building blocks.

const Button = jsxstyle('button', {
    bg: '#07f',
    col: '#fff',
    pad: '20px',
    mar: '5px',
    bd: 0
});

You can add extra styles to your building blocks.

<Button>Foo</Button>
<Button borderRadius='3px'>Bar</Button>
<Button bdrad='10px' bg='red'>Baz</Button>