Typography Component design

[coopy]

@alexlande Please fill out your initial thoughts on a typography component here.

[du5rte]

Hey, I love the Radium thinking and seen you're looking to build a library, I converted the sass mixin I use for styling typography into inline JS styles. It's inspired by Joshua Hibbert blog post How to Set Up a Baseline Grid. In short It allows it to define size without breaking the vertical grid (24px default but can be change) and calculates the appropriate line-height, margin and padding to keep it inline

Here's a working demo, it's also on CodePen and GitHub

import typoRhythm from 'typoRhythm'

class Hello extends React.Component {
  render() {
    return (
      <h1 style={ typoRhythm(size: 47, margin: 1) } > Hello World </h1>
    )
  }
}

<h1 style={ fontSize: "2.9375em", marginBottom: "0.5106382978723404em", lineHeight: 1.0212765957446808} > Hello World </h1>

I think with a little work it could be a good solution let me know what you think

[coopy]

@monteirocode thanks for the comment! We've moved discussion to https://github.com/FormidableLabs/radium-typography/issues/4 – could you re-post your comment in there? I'm closing this issue.