Add breakpoints option

[KyleAMathews]

Should be an object with structure something like:

{
  breakpoints: {
    "@media only screen and (max-width:768px)": { // any valid media query.
      scale: 1.618 // Override the default scale
      fontSize: '95%', // Change body font size.
    },
    "@media only screen and (max-width:480px)": { // any valid media query.
      fontSize: '85%',
    },
  }
}

Perhaps also support calling overrideStyles in each breakpoint as well to both neatly consolidate responsive theming + this would be a natural way to design a breakpoints UI for the design tools.

[KyleAMathews]

CSS Locks are cool. We should support them by default.

• http://fvsch.com/code/css-locks/
• https://github.com/seaneking/postcss-responsive-type

[mlukaszczyk]

Hey there! Any news on the breakpoints?

Cheers,

Michael

[ooloth]

Overriding the default scaleRatio at various breakpoints would be very helpful!

[davidprae]

Wanting to use Typography.js in a production website but I need breakpoints. Are breakpoints a feature that we can expect soon?

[hdoro]

In search of using typography.js for production, I've found a silly and not-so-useful-but-better-than-nothing hack to declare media queries:

overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
        'h1, h2, h3, h4, h5': {
            color: '#0f092b'
        },
        '@media screen and (min-width: 760px){h1{font-size:200px}}': {},
    })

However, this doesn't allow me to use variables such as rhythm and I'm still not able to change the scaleRatio between breakpoints... @KyleAMathews I'd gladly try to implement breakpoints to Typography.js, but I'm a bit lost with the repo and I'm still a bit raw with JS, any directions you could give us?

[TylerBarnes]

Heres a hacky solution for this using the object structure you've suggested. I create a new instance of typography js for every breakpoint, combine the css strings and wrap some of them in breakpoints based on the breakpoint object. I then use purgeCss to remove duplicate lines.

https://gist.github.com/tyler-barnes/efa5970d3ae56e4d2af4664fe8f90e7a#file-typographyjs-gulp-breakpoints-js

[fjcalzado]

+1 for breakpoints. It is really helpful in responsive design. Otherwise, this could be a serious stopper in real production.

[muhajirdev]

any updates on this?

[TylerBarnes]

I forked this and added breakpoint support if anyone wants to test it out. As far as I can tell it's working great with toJSON and toString. #157 https://github.com/tyler-barnes/typography.js/tree/breakpoints

[Siyfion]

@KyleAMathews Is there any update on this?

[TylerBarnes]

@Siyfion I'm guessing he's been busy with Gatsby V2. Responsive generated typography would be an awesome addition to Gatsby V2 though ;)

[johncmunson]

Hey guys, it appears that @hcavalieri's clever hack is no longer necessary and that Typography.js now at least partially supports media queries inside of the overrideStyles property. Checkout where @KyleAMathews has used this feature in one of the Gatsby demonstration sites. I have tested it out myself and it's working just fine.

[TylerBarnes]

@johncmunson while that method is super useful, it's not the same as having actual breakpoint support. Breakpoints inside override styles wont allow you to set up different ratios across media queries. I have a PR open (#157) that adds this functionality to typography.js but I think Kyle is too busy with Gatsby to merge it (understandably). I'm thinking soon I'll publish a wrapper library around typographyjs because I want this functionality but I also want to work out an easy way to integrate typographyjs with styled components / styled systems

[johncmunson]

@TylerBarnes while maybe a little hacky, I love the solution you came up with. I think a wrapper library is a great idea, as it will allow Kyle to revisit this at a later date and decide if this is the correct approach or there is a better path

[TylerBarnes]

@johncmunson the solution in the PR is different than the hack posted above.

I've published a temporary package for myself and anyone else that wants breakpoints until they're officially supported.

You can install it with npm i tyjs or yarn add tyjs. It should be exactly the same as typographyjs except for the added breakpoints option. You should import Typography from 'tyjs' and it probably doesn't play nice with the typography gatsby plugin so probably you'll need to use typography.toString() and add the string to your site somewhere.

[richardvanbergen]

@TylerBarnes Thank you so much, it works beautifully. I hope that @KyleAMathews sees it as something that should be in the main repo because otherwise, you're stuck trying to find a middle ground between smaller and larger devices.

[snrbrnjna]

@KyleAMathews @TylerBarnes any updates on this?

[PMudra]

I was able to solve this missing option with a workaround by overriding the font-size of the html tag. Typography config: baseFontSize: "16px" this will result in font-size: 100%. Then I added this in a global css:

@media (min-width: 480px) {
  html {
    font-size: 112.5%; /* --> 18px base size */
  }
}
@media (min-width: 600px) {
  html {
    font-size: 125%; /* --> 20px base size */
  }
}

[chaance]

Another workaround here is to update the typography object when your key breakpoints change (assuming you're using React here, but this is probably adaptable to other frameworks). May also need some adjustments for SSR.

function useTypography() {
  // I have a hook that updates when one of my theme breakpoints change
  // modify based on whatever solution you use here
  let breakpoint = useBreakpoint();
  let typography = React.useMemo(() => {
    let baseFontSize = breakpoint === 'small' ? defaultOpts.baseFontSize : '22px';
    let scaleRatio = breakpoint === 'small' ? defaultOpts.scaleRatio : 2;
    return new Typography({
      ...defaultOpts,
      baseFontSize,
      scaleRatio,
    });
  }, [breakpoint]);

  // layout effect prevents a flash if your first load doesn't match your default styles
  useLayoutEffect(() => {
    typography.injectStyles();
  }, [typography]);
  return typography;
}

// I can now stick this in my theme provider to get dynamic scale and rhythm
// values elsewhere in the app
const ThemeProvider = ({ children }) => {
  let { value: isDark } = useDarkMode(false);
  let typography = useTypography();

  return (
    <ThemeContext.Provider
      value={{
        theme: isDark ? darkTheme : lightTheme,
        typography,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
};