Using with modular scale

fluxxus commented 8 years ago

First of all I want to say that your library looks really nice. Might be exactly what I need!

Just a few questions. Any tips on using with predefined modular scales, e.g. https://github.com/modularscale/modularscale-sass ?

Can I use typoRhythmGenerator to create different settings for responsive breakpoints?

du5rte commented 8 years ago

@Madebym Hi, thanks. I had not heard of modularscale-sass but I'm glad you've introduce me to it, relationship scale was what I was trying to solve. As for media queries you could wrap typoRhythmGenerator inside different media queries here's a theoretical example how you could use the two.

$ms-base: 1em;
$ms-ratio: $golden;

@media screen and (min-width: 40em) {
  @include typoRhythmGenerator(
    ( h1: 47, h2: 34, h3: 26, h4: 21, h5: 18, h6: 16 ),
    $margin: 1
  )
}

@media screen and (min-width: 60em) {
  @include typoRhythmGenerator(
    ( h1: ms(4.5), h2: ms(3), h3: ms(1.5), h4: ms(1.25), h5: ms(1.125), h6: ms(1)),
    $margin: 2 /* margin 2 really is ms(2) */
  )
}

But you'll end up with a lot of styles. If you liked this library you mind find something else I'm working on interesting, check out Rhythm it's built for Inline JavaScript Styles ( if that boggles your mind check this talk by Colin Megill - Inline Styles are About to Kill CSS )

rhythm({
  typo: '47',
  padding: `0.5x 1x`,
  marginVertical: '1x'
})

{
  fontSize: "2.9375em",
  lineHeight: "1.0212765957446808",
  padding: "0.75em 1.5em"
  marginTop: "1.5em",
  marginBottom: "1.5em",
}

fluxxus commented 8 years ago

@monteirocode Thanks for the provided example with modular scale!

I don't mind ending up with lots of styles, I don't use React. SCSS is my way to go :) I already saw that inline React styles debate on the net, but I'll stick with SCSS for now.

du5rte / typoRhythm

Using with modular scale #3