Port to PostCSS

[dacodekid]

Hi, Do you have any plan to port this one to PortCSS as well?

[tunnckoCore]

@dacodekid I've thought that this morning, lol.
maybe I'll try as soon as I can.

[tunnckoCore]

another good idea is to build stylus/sass/scss to postcss transformer, hm.

[tunnckoCore]

@corysimmons oooohohoo, no no, I cant :D

it seems it would be something like postcss-lost

[corysimmons]

I've considered it and might end up doing it in the future, but right now I think Typographic is really just a single mixin so it doesn't really make sense to port it all to PostCSS.

[corysimmons]

I might do it in the future just so it works with LESS and vanilla CSS from one codebase. :X

[tunnckoCore]

from one codebase

it would be hard, imo

also the compilier/transformer idea wasn't so good and also be too hard and complex.

when I have little more time will review the raw css from the demo page to understand it and rewrite it as postcss :)

[madeleineostoja]

Would love this as a postcss plugin. Sure it'd be tiny, but still super handy IMO. Could strip it right down to the vw calc() media queries (as a custom property? like typographic: minwidth maxwidth), and use something like https://github.com/markgoodyear/postcss-vertical-rhythm to simplify vert rhythm for headings and such.

[madeleineostoja]

So I went ahead and built a postcss plugin around the core sizing logic of Typographic, checkit https://github.com/seaneking/postcss-responsive-type.

You can use it with Stylus through PostStylus.

[corysimmons]

This is awesome!

[corysimmons]

Does it do any of that vertical rhythm crap or is it just nice and clean?

[madeleineostoja]

Heh nup it's pretty minimal, literally just the core calc font sizing and associated media queries. For memory there's already a couple of postcss plugins in the wild that do vert rhythm related things.

[corysimmons]

Awesome. I'll definitely be using this in the future.

[janwirth]

@seaneking are you talking about postcss-vertical-rhythm? Are they compatible? Because responsive-type is outputting calculations whiches are not defined as compatible with the vert rhythm plugin.

[madeleineostoja]

@FranzSkuffka tbh I've never used any vert-rhythm plugin (prefer to define that stuff myself), but after a quick skim it seems it requires you to use the font shorthand on body. Currently postcss-responsive-type only parses font-size rules. Feel free to open an issue on postcss-responsive-type for it, but not sure when/if I'll be able to get to it.

[janwirth]

I will just stick to this one right here for now. What method or technique are you using for creating a vertical rhythm?

[corysimmons]

Sorry it's taken me so long to respond. I have my ups and downs with being a good maintainer.

---

I'm planning on migrating this project to PostCSS in the next month or so, and when I do, I'll probably rewrite it from scratch and include vertical rhythm.

@seaneking Love what you did with https://github.com/seaneking/postcss-responsive-type It's super simple and clean and easy to use...

The new version of Typgraphic will try to serve typophiles (that's why I'm even gonna make it), but in day-to-day use, I'd personally prefer your project. 👍

[rlam3]

so we just need to install postcss to use typographic now?
is there a configuration example to use with gulp? Thanks!

[janwirth]

@rlam3 no, you can use seaneking's package though, which handles the fluid scaling only.

[corysimmons]

@rlam3 You can continue using the Stylus/Sass version of Typographic for now, but in the future I'm going to do a major version release that completely rewrites this project from the ground up using PostCSS only.

Or use Seane's cool typography stuff.