type and sizing scales

[argyleink]

as mentioned in #128, open props uses a non-standard / not math driven / not design driven approach to the idea of it's sizing scales. it could be neat to offer, as individual prop packs, various popular type ramps for single import!

currently OP has fluid and static font size scales, and fluid and static sizing scales. it'd be really cool to offer additional sizing scales for both type, space and fluid sizes. just today I saw Andy Bell sharing their type ramp, could easily offer that (with approval and accreditation of course).

this lib / package seeks to make importing props with nicely named purposes easy and swift. i think adding sizing scales makes sense!

• golden ratio
• 8 bit oand 4 bit
• minor second / major second / minor third / etc
• andy's
• suggest more in the comments!

[a-trost]

I'd love it if there was some integration with Utopia. Overall I like the way they handle the type scales, not just giving the scales, but allowing for different scales for mobile and desktop.

I like that the sizing is based on the same values, and their "Space value pairs" are really clever.

Not sure what the solution would be here. Maybe to start, just a recommended way to handle using them both together.

[ianhobbs]

Yes. Utopia methods are brilliant. I'm trying to figure out how to over-ride OP sets for Utopia

[lttr]

I'm in the middle of building a new product and we wanted to build on a solid but flexible base CSS layer. We end up creating our custom base heavily inspired from Open-props but with deeply integrated Utopia's scales.

The problem here is, that there is no such layer as a library out there, as far as I know. Everything layout and font related is based on font and space scales, so it unfortunately can't be done with the current state of Open-props.

I'm not sure how to do this on a smaller project where one does not have time to set everything up by himself.

Since the idea is not that complex I still hope there might be a way to have it as a library. The key is to have a set of logical values for font sizes and spacing (and possibly other logical design tokens like font-weight-headings, font-size-body, ...) which would be configurable. Interestingly, libraries and design systems that I have encountered does not promote such approach.

[argyleink]

I'm interested in how you'd expect to configure the system you describe 🙂 can you share more?

Also, with Open Props, it's very easy to overwrite values (or just not import them) but still use the naming as Open Props created. Maybe custom definitions don't feel as streamlined as a custom properties system that you can hook into?

Thanks for sharing thoughts here!

[lttr]

Hi, it took me quite some time to think about it, sorry 🙂.

I think there is one most important feature in this disscussion. And that is the fact, that CSS can do anything, but that is too much. Therefore there is Tailwind and Open props and others, that limits the number of possible implementations of a design. And while that is great, these libraries needs to be usable by wide audience and the possibilities are still too wide.

I will describe it on the problem with spaces. Open props and other libraries uses naming like size-2. But there is usually too many possible sizes, that can be used and the number does not indicate where on the scale it is. If the scale even have some system in it, which is desirable.

We are currently using Utopia's system with something like 10 different values for all spacing in a project. It works great. What we are doing is that we look with our designer at the values that Open props provide in some area, and then we pick only those, that will be allowed to be used on our project. The decision paralisis is greatly reduced.

So for creating a custom design it make sense to break things apart and build again.

By all this I mean, it is great that everything in Open props can be overwritten, but that does not help when something is fundamentally different or one need to change it on the normalization layer.

I'm interested in how you'd expect to configure the system you describe 🙂 can you share more?

The configuration would probably need to be similar to how the Tailwind's look like. It enables to overwrite the defaults. It would also need to apply the changes in the normalization layer, which is probably more tricky, since there might be a mismatch between the default and the desired scale. And another challenge is that when building a system on Utopia there is a step when deciding how to properly dimension a grid, that is more manual. That is because a specific number of columns and gaps, that are based on spaces, need to match with the overall grid width and still make sense from the design point of view.

At the end I guess there is room for another library that is more opinionated and therefore can pick more specific sets of design tokens. Or maybe some sort of layer or plugin on top. I will probably try when a new project would be around the corner.

One last idea. Maybe it would be benefitial to have some sort of specification which would describe more elaborately what role each value plays. For example for headings it already kind of exists: there are 6 of them in HTML and one would typically use first 2 or 3 in a normal article in quite predictable way. Or example for spaces: "There is a modular scale of 8 values, with configurable multiplier and the 3rd one is expected to be the same as body font size"...

[argyleink]

I see, so it's about a tension between a library offering generics vs specifics? You'd like to see a configurable (at build time or with a web tool like Utopia) and opinionated design system library that prescribes the use cases for sizes (and colors too i presume)? I hear ya, I think there's room for a library like that.

fwiw what you're describing could be house props vs global props. Open Props brings the globals and y'all (designers and devs) work together on the house props. Then your team wouldnt really use Open Props directly, rather they'd work with the house props (that may or may not be backed my OP). The house props offer the prescriptive use cases, subsets, and sizes that align with the product. So it like y'all bring the opinions and Open Props brings generics. But I have a feeling that's not exactly what you're looking for.

I agree the normalize could be more configurable. It wasn't released with intent to be used so much, and will have more configuration options in the next version.

Also, ya saw there are size props for headlines and content too yeah? Those imply a bit of opinion about the use case.

All in all, I'm not sure Open Props will become what you're looking for, but I'm glad it's helped y'all form your own. I do think the next version will pacify some of your needs, but not all of them. I'll keep thinking on this tho and see how Open Props v2 can make it easier.

[lttr]

Thank you, the analogy with house props vs global props is very nice for better understanding.

I like your normalize, because it improves the starting point way more than a classical minimalistic CSS reset.

I know about the props for heading and content length, although I have not used them too much. It corresponds nicely with a concept of the Measure, described in Every Layout.

It is great to hear, that you will be improving Open Props further. I think Open Props already have a lot of options how to use it and I have not yet tried to use the JavaScript API which might be the tool for customizability.

[brandonpittman]

I had similar thoughts about sizing: using OP's sizing vs. Utopia-based values. It's easy to think you adopt OP wholesale, but you have to remember it's modular and you can pull out just the pieces you need. So use Utopia for font-size and spacing values and use OP for colors, box-shadow, and border-radius, etc. 🤷🏻‍♂️