Explain the Onyx library to me

I just saw the Onx Style Guide on webstudio, but I don't quite understand it.
The Guide style of Onx is completely different from that of Craft I feel. When to use it?

Does Webstudio plan to do a mix between Craft and Onyx ?
I'm a little lost here, because I'm learning the webstudio standards at the moment.
( On the other hand, the Onyx library is really nice! )

I have exactly the same question with the Creative "CIQ Libraries Section" which has not been adapted for Craft actually

22 comments

onyx library released approximately at the same time as webstudio core team released Craft, Onyx guys want to now migrate to using craft

CIQ was created waaay before craft, so my recommendation is to use everything that uses craft

Oh ok Great! Excellent news! Regarding Creative, will this be transformed for Craft in the coming months?

It’s a great thing that Craft exists!

that's the question to the author @John Ope from CIQ Libraries

author of onyx is also here @Sam Gilbert

Hum Okay, Thanks for their work and
thanks @Oleg Isonen for yr reply !

Hi @Mr Bean — iI'm in the process of updating the library to use Craft.

The style guide now includes all the Craft variables, but some Onx tokens and variables still have the old convention but they now reference the Craft variables.

Is there anything specific I can help with in the meantime? I'm happy to jump on a call to show you around.

I admit that I am confused on what is Craft or Onx UI. If I understood correctly the style guide on Webstudi is up to date for Craft? @Sam Gilbert

Craft serves as the standard convention for building with Webstudio. This includes naming components, layouts, and tokens. Under the hood, Craft utilizes Open Props (https://open-props.style/), a library of CSS variables. These variables help maintain consistency across projects and simplify maintenance.

Onx, on the other hand, is a collection of layouts designed to accelerate your development process. These layouts are intended as starting points; you can copy and paste them into your projects and customise them to suit your needs.

and yes the latest update of the style guide does use craft as the base and in the next few hours the components on the onx library will be reverse compatible with the old framework i had built and the new craft

In fact, if I understood correctly, the tokens that you add to the Style Guide allow for faster site creation, in addition to the Craft standards?
I noticed that it looks like Tailwind/Boostrap.
But in the new Tok
ens that you create why not use the craft values?

Sorry it's quite confusing for me and I really want to build as simple and clean as possible. And your content library is interesting! @Sam Gilbert

Hi @Mr Bean, yes the tokens might look like Tailwind/Boostrap, especially row , col, col--lg-6 these only exist to keep a consistent system throughout the more you layouts you build the more you will appreciate just having most parts handled for you in advance.

all tokens are referencing craft values where ever possible

but there are new variables & tokens outside of craft

and example is heading-1

--h1-font-size: var(--font-size-8);
--h1-line-height: var(--font-lineheight-0, 1.1em);
--h1-letter-spacing: var(--font-letterspacing-0, -.02em);
--h1-bottom-margin: .375em;

I understand this might be overwhelming at first but most — this project started before Craft so overtime it will be more aligned to Craft.

Maybe i can build a layout and record a video for you and let me know if that helps.

@Sam Gilbert
Thank you in any case for your answers. 👍 I think I will use yr library soon, because is usefull.
I like the grid system on the boostrap method that you imported. It is indeed useful.

I'll ask another question to make sure I understand correctly.

I don't understand why you created "font size" because there are already sizes with Craft.

the reason why --h1-font-size exists and referenced the new craft font size was not to break a few sites that were using the old system pre craft — overtime they will be removed, and your sites wont be affected.

I will revisit the variables again this weekend, only a few people had access to the old collection. if i can get them to switch to Craft then i can get rid of them so there wont be repetition.

Hum Okay 🙂 thanks for yr answer.
So the next step, all tokens will use Craft variable ?

Yes

ddavidacreates

any chance that you have a list of the added variables and values that you can share? that way it can be added to a code editor and values updated there….then copy and pasted into the advanced panel? similar to john’s workflow for building the Nova template from the youtube tut? i really like that workflow. much better than working in the advanced panel directly.

I've removed most of them, so only a few should remain. I made the update yesterday. I will add the few variables that aren't in Craft to this thread later today!

ddavidacreates

awesome! thanks!!

sstev

hey @Sam Gilbert - just wondering whether there were any updates to this thread? Are you able to confirm whether the Onx style guide now aligns completely to Craft? Thank you!