Comments (5)
Yeah, I'm also not a fan of the #xl
scales. It just feels arbitrary. I see a lot of value in tying the widths to common screen sizes, even if it can't be used for media devices, but it would not fit any numerical scale nor would it fill 10 slots.
If you think the 10 values you have are the ones you want, width-1
thru width-10
would be the clearest, but maybe some semantics can be gleaned from how you got to those values (similar to the previous --measure
values trying to target x number of characters).
I did a little research into other systems but no inspiration struck yet.
from pollen.
Here's where I am so far:
- Abandon size (
sm
,lg
, etc) scales for numerical scales. Effects width and radius. - Either use descriptive units (
loose
,wide
) or size (sm
,lg
) for tracking, leading, and measure
Feels consistent enough while adding semantic value where it could be useful. Other than the font size scale we already have descriptive values for typography (font weights, measures, etc) and it feels natural to continue that for line heights and letter spacing, where you don't have an extensive scale like with --size
etc but a few key values you'd probably customise for your own design system. Doing that for something like --leading-3
vs --leading-normal
or --leading-sm
feels unintuitive.
In places with more that 4-5 values, a scale from xs
→ 7xl
or whatever scale is semantically the same as a numerical scale but more cumbersome for no reason.
from pollen.
I agree that for line-height and border-radius making the values consistent is great. With the widths however, I feel that meaning is lost and incorrect meaning is implied (such that width-2 is half of width-4).
I think it would be better to have an alias for or otherwise emphasize commonly used breakpoints (768px, 544px, 1200px) such as width-tablet, -mobile, -screen-sm. Maybe then the numbered units can be tied to something more immediately understandable. Best example for now: width-1
could be 10rem.
from pollen.
Hmm good point. I don't know that tying it to devices/breakpoints would be best, because you can't use CSS variables in media queries anyway, and there are 10 values for widths so you'd run out of device names pretty quick. The width scale is for setting max widths of containers on a page (for example).
There are other places in Pollen where a numerical scale doesn't have the same proportional relationship as the Size scale, but I agree that widths are pretty closely tied to sizes, semantically, that it could be a gotcha.
The only alternative I see is sticking to the original xs
→ 7xl
scale, but it feels a bit odd
from pollen.
yeah it's tricky. I guess we could reduce the width scale, I only ever use a few myself in the prod sites I've used Pollen on, and even then measure
is usually a better tool for things like article max widths, and if anything it'd be worth expanding that scale. The current width scale was just lifted straight from Tailwind.
from pollen.
Related Issues (20)
- Colors: colorful (warm/cold) greys HOT 2
- Support shadow DOM HOT 7
- Feature: Add ability to export json file of tokens HOT 4
- Support for wider color gamuts HOT 5
- RFC: Support for queries HOT 1
- Rename elevation to shadow(?) HOT 1
- Add and configure unit tests HOT 2
- Document & release JSON output
- Add git hooks to run tests
- Automatically resolve `.cjs` config HOT 1
- Use rem for layout units HOT 3
- Fluid sizes HOT 13
- Custom colors not in exported JSON HOT 2
- Writing output-file to a file in a directory gives error HOT 1
- Proper easing library
- Aspect ratios
- system-ui in --font-sans font stack HOT 2
- postcss and postcss-jit-props integration HOT 1
- Not an issue, but information about this project HOT 1
- Stale link to Bokeh on doc site landing page HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pollen.