A responsive flex container for React, based on the article: The Flexbox Holy Albatross by Heydon Pickering
Download latest.tgz, then
npm install --save <path to [email protected]>import React, { Component } from 'react'
import { Container } from 'holy-albatross';
import 'holy-albatross/dist/index.css';
class Example extends Component {
render() {
return (
<Container>
... YOUR UI ELEMENTS
</Container>
);
}
}See example with props here
| Key | Type Expected | Default value | Description |
|---|---|---|---|
gap |
String/Number | '1' | Controls the gap between the child components inside the container. Expects a number or a quoted number ('1') |
gutter |
Boolean | False | When set the container gets a default side gutter of 25% |
maxWidth |
String/Number | 'none' | Sets the maxWidth for the container (using rem as units). Expects a number or a quoted number ('1') |
paddingTop |
String/Number | 'none' | Sets the top padding for the container (using rem as units). Expects a number or a quoted number ('1') |
paddingBottom |
String/Number | 'none' | Sets the bottom padding for the container (using rem as units). Expects a number or a quoted number ('1') |
MIT Ā© JesperBry