README.md

holy-albatross

A responsive flex container for React, based on the article: The Flexbox Holy Albatross by Heydon Pickering

Install

Download latest.tgz, then

npm install --save <path to [email protected]>

Usage

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>
    );
  }
}

Available props

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')

License

MIT © JesperBry