PaulSavignano / savignano-flex

Define flex style attributes in JavaScript as React props and have them served with css.

Savignano-Flex

Write JavaScript Flex styles and have them served in css.

Savignano-Flex is a JavaScript library for styling user interfaces.

• Declarative: Define the styles you need and enjoy the benefit of cached css without the cost of inline style redefinition.
• Flexible: No pun intended. Props that do not have css definitions will be inline styled. You may also pass a style prop. Have a className you'd like incorporated? Pass in a className prop and have it concatenated.

Installation

npm install savignano-flex

Usage

Here is an example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import Flex from 'savignano-flex';

function App() {
  return (
    <Flex alignItems="center" flexFlow="row wrap" justifyContent="center">
      <p>This</p>
      <p>content</p>
      <p>is horizontal</p>
    </Flex>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Examples

Codesandbox

Contributing

• see CONTRIBUTING.md