Giters

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

Home Page:https://open-props.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Suggestions for the Next Update

mobalti opened this issue · comments

commented

I've been thinking a lot about Open Props and how we can make it better. After building numerous components with Open Props, here are some suggestions for the next update:

Add:

  • font-size: 0.875rem | 14px (Frequently used by designers, especially for links and buttons).
  • border-radius: 4px.
  • border-radius: 8px.

More:

  • Fluid font size.
  • Fluid size.
  • Gradients (especially multi-layer gradients).
  • SVG filters.

I understand that you can create your own props on top of Open Props, but when you encounter certain props frequently with different designs, I think it's time for these props to be included by default.

commented

My wishlist:

  • All colors specified in oklch() by default.
  • A 2 minute intro video on the homepage and readme (like the second half of the video on the bulma framework's homepage)
  • The card code example at the top of the homepage should "animate" it's css variables being switched (e.g. --radius-2 to --radius-4 and the <pre> containing it's own styles should animate to the new values).
  • Improve the main website:
    • I didn't even notice the bottom stickied navigation until my 5th time visiting the site. The website needs a side-nav that highlights the current scroll-position.
    • The color palete is so unaligned I'm getting trypophobia. A plain ol' color grid will fix this.
    • No 12-column-grid example. Throw an example in there for people to copy out when they need to as a starting point.
  • Change name format of color files from props.gray.css to colors.grey.css
    • This will make it easier at a glance to see which files are color related. (This makes a large difference when the list is alphabetically sorted, e.g. shadows and sizes shouldn't appear between sand and stone.)
commented

@spartanatreyu, I completely agree with all your points. The library is indeed moving to HDR, not only for colors but also for gradients. Additionally, there's a mention of adding logical properties for animation in this issue #390

commented

Opinion. In forms styling move to:
<label> <span>Name</span> <input name="name" type="text" /> </label>
I don't like annoying

"for" and "id".

Also:

  • as @mobalti mention font-size: 0.875rem | 14px is must have
  • reorder --surface-1,2,3. Layers should be like stack of cards. It will also allow to add more layers if someone need (--surface-4 ...)
commented

Button group and icon button styling