Refactor common component attributes to be more consistent (I.E. marginTop, etc)

[gabrielbull]

Blocked by: #112

We should have one common way to add the props attributes like marginTop, horizontalAlignment, etc to the styling.

For example:

import createCss from './createCssForAllComponents';
import styled, { css } from 'react-emotion'

const viewStyle = css`
  color: rebeccapurple;
`

class View extends React.Component {
  propTypes = {
    hidden: PropTypes.boolean,
    marginTop: PropTypes.number
  }

  render() {
    const { otherProp, ...props } = this.props;

    return <div otherProp={otherProp} className={createCss(css, props)} />
  }
}

function createMarginCss(css, props) {
  for (let prop of in props) {
    if (props.hasOwnProperty(prop)) {
      switch (prop) {
        case 'marginTop': css.extend(...); break; // add margin-top: `${props[prop]}px` here
      }
    }
  }
}

function createHiddenCss(css, props) {
  if (props.hidden) {
    return css.extend(...); // add display: 'none' here
  }
}

export default createCss (css, props) {
   css = createMarginCss(css, props);
   css = createHiddenCss(css, props);
  return css;
}

[alacroix]

@gabrielbull something like styled-system may fit our needs? Seems pretty cool to use with styled-components. (Never used it before though)

[gabrielbull]

Looks like something we might try indeed. Keeping the dependency count low is also very important so if it's something simple we might want to implement our own solution. If we do not use styled-system, we should inspire ourselves from styled-system so people coming to this library who have used it will find it familiar, and vice-versa.