Add breakpoints option about typography.js HOT 19 OPEN

@KyleAMathews @TylerBarnes any updates on this?

from typography.js.

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

from typography.js.

Hey there! Any news on the breakpoints?

Cheers,

Michael

from typography.js.

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

from typography.js.

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

from typography.js.

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?

from typography.js.

@KyleAMathews Is there any update on this?

from typography.js.

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.

from typography.js.

@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

from typography.js.

@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.

from typography.js.

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 */
  }
}

from typography.js.

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

from typography.js.

@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.

from typography.js.

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

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

from typography.js.

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

from typography.js.

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

from typography.js.

any updates on this?

from typography.js.

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

from typography.js.

@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

from typography.js.