TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Clay – UI Layout Library

460 点作者 ivmoreau5 个月前

31 条评论

mega-tux5 个月前
Looks very nice, I just watch a great YT video from the developer here <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=DYWTw19_8r4" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=DYWTw19_8r4</a>
评论 #42465834 未加载
评论 #42465990 未加载
elcritch5 个月前
Nice! It&#x27;s pretty cool what you can make in a few thousand lines. Though Flex isn&#x27;t my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I&#x27;m proud of in pure Nim (1). Though I&#x27;ll have to checkout Clay and compare some of the layout algorithms.<p>It&#x27;s neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface?<p>The reason I like CSS Grid is that I could imitate the formatting like this:<p><pre><code> test &quot;compute others&quot;: var gt: GridTemplate parseGridTemplateColumns gt, [&quot;first&quot;] 40&#x27;ux \ [&quot;second&quot;, &quot;line2&quot;] 50&#x27;ux \ [&quot;line3&quot;] auto \ [&quot;col4-start&quot;] 50&#x27;ux \ [&quot;five&quot;] 40&#x27;ux [&quot;end&quot;] </code></pre> 1: <a href="https:&#x2F;&#x2F;github.com&#x2F;elcritch&#x2F;cssgrid">https:&#x2F;&#x2F;github.com&#x2F;elcritch&#x2F;cssgrid</a>
评论 #42468082 未加载
评论 #42468215 未加载
bee_rider5 个月前
Just a funny note—there’s a button at the end to switch between HTML and Canvas. I think it is neat how little difference it makes… normally.<p>But with iOS Safari + Dark Reader, at least on my side, the HTML page is turned into dark mode with Dark Reader, while the canvas page is not. So, it basically ruins the wow factor, haha.<p>But it still looks nice.
评论 #42467724 未加载
评论 #42473269 未加载
评论 #42471170 未加载
评论 #42467368 未加载
jasonjmcghee5 个月前
Just wanted to drop a note - everything following the animation cannot be selected - seems focus is stolen somehow - whenever I try to select text, it immediately deselects it.
评论 #42466191 未加载
评论 #42465861 未加载
bvisness5 个月前
This is a delightful take on a style of UI I really love. Separating the UI logic from drawing with a set of draw commands is an excellent and very versatile idea - I first saw it in microui, and the separation allowed me to easily use the library in the browser using WASM and Canvas2D. (<a href="https:&#x2F;&#x2F;rxi.github.io&#x2F;microui_v2_an_implementation_overview.html" rel="nofollow">https:&#x2F;&#x2F;rxi.github.io&#x2F;microui_v2_an_implementation_overview....</a>)<p>Also, doing layout in WASM and rendering to HTML is a great idea that I can&#x27;t believe I never thought of before.
dgan5 个月前
Okey i was going to complain about what&#x27;s the point of doing it in C, when it could be done more safely in Haskell&#x2F;OCaml<p>But 2000 lines of C, and no dependencies is pretty cool!
评论 #42467523 未加载
virtualritz5 个月前
There is also taffy (Rust) which has WIP C bindings.<p><a href="https:&#x2F;&#x2F;crates.io&#x2F;crates&#x2F;taffy" rel="nofollow">https:&#x2F;&#x2F;crates.io&#x2F;crates&#x2F;taffy</a>
wishinghand5 个月前
It&#x27;s a good first draft. I do find it a shame that the HTML output is only div elements. I think a little accessibility would go a long way. I also can&#x27;t select text in many places before some re-render de-selects before I can hit control-c.
ahmedfromtunis5 个月前
Serious question: am I the only one who finds writing a webpage like this to be a little too much (even if the concept is cool):<p>void LandingPageDesktop() { CLAY(CLAY_ID(&quot;LandingPage1Desktop&quot;), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT({ .min = windowHeight - 70 }) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { .x = 50 } })) { CLAY(CLAY_ID(&quot;LandingPage1&quot;), CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { 32, 32 }, .childGap = 32 }), CLAY_BORDER({ .left = { 2, COLOR_RED }, .right = { 2, COLOR_RED } })) { CLAY(CLAY_ID(&quot;LeftText&quot;), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 })) { CLAY_TEXT(CLAY_STRING(&quot;Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.&quot;), CLAY_TEXT_CONFIG({ .fontSize = 56, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY(CLAY_ID(&quot;LandingPageSpacer&quot;), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) } })) {} CLAY_TEXT(CLAY_STRING(&quot;Clay is laying out this webpage right now!&quot;), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); } CLAY(CLAY_ID(&quot;HeroImageOuter&quot;), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 })) { LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING(&quot;High performance&quot;), CLAY_STRING(&quot;&#x2F;clay&#x2F;images&#x2F;check_5.png&quot;)); LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING(&quot;Flexbox-style responsive layout&quot;), CLAY_STRING(&quot;&#x2F;clay&#x2F;images&#x2F;check_4.png&quot;)); LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING(&quot;Declarative syntax&quot;), CLAY_STRING(&quot;&#x2F;clay&#x2F;images&#x2F;check_3.png&quot;)); LandingPageBlob(4, 32, COLOR_BLOB_BORDER_2, CLAY_STRING(&quot;Single .h file for C&#x2F;C++&quot;), CLAY_STRING(&quot;&#x2F;clay&#x2F;images&#x2F;check_2.png&quot;)); LandingPageBlob(5, 32, COLOR_BLOB_BORDER_1, CLAY_STRING(&quot;Compile to 15kb .wasm&quot;), CLAY_STRING(&quot;&#x2F;clay&#x2F;images&#x2F;check_1.png&quot;)); } } } }<p>Source: <a href="https:&#x2F;&#x2F;github.com&#x2F;nicbarker&#x2F;clay&#x2F;blob&#x2F;35d72e5fba6872be48d15ed9d84269a86cd72b4e&#x2F;examples&#x2F;clay-official-website&#x2F;main.c#L50C1-L67C2">https:&#x2F;&#x2F;github.com&#x2F;nicbarker&#x2F;clay&#x2F;blob&#x2F;35d72e5fba6872be48d15...</a>
评论 #42466890 未加载
评论 #42471339 未加载
chromanoid5 个月前
cool stuff! selectable text is a MUST in the browser for me. In clients and apps that do not need that or can provide it themselves, this seems to be a very nice and tiny solution.
评论 #42465356 未加载
b3orn5 个月前
Right and middle click on links behaves like a left click on the website.
评论 #42473402 未加载
britannio5 个月前
So cool. I wonder if it&#x27;d work for a Raspberry Pi Pico + <a href="https:&#x2F;&#x2F;pimoroni.com&#x2F;picodisplay" rel="nofollow">https:&#x2F;&#x2F;pimoroni.com&#x2F;picodisplay</a> or similar devices.
评论 #42469370 未加载
ilrwbwrkhv5 个月前
The d for debugging is so cool. Fantastic library. C is also such a good language. If I wasn&#x27;t doing Rust, I would have gone back to C.
评论 #42467132 未加载
erichocean5 个月前
Would be fun to combine this with the single-file Impeller header from the Flutter people.<p>The API approach could be implemented extremely cleanly in Clojure and Java, and then the whole thing would be runtime-dynamic, since Clojure generates new Java functions on the fly, and the JVM&#x27;s JIT makes them fast.<p>If anyone wants a fun project over the holidays…
zibzob5 个月前
This looks pretty cool, but from the page I can&#x27;t tell if there&#x27;s any interactivity supported...there&#x27;s a button example but it seems to have no click handler?<p>Okay, from the examples there&#x27;s something like this:<p><pre><code> if (isMouseDown &amp;&amp; !scrollbarData.mouseDown &amp;&amp; Clay_PointerOver(Clay_GetElementId(CLAY_STRING(&quot;ScrollBar&quot;)))) {</code></pre>
评论 #42466516 未加载
citizenpaul5 个月前
I&#x27;m not a frontend person. Can anyone explain why this is better than using CSS directly or a CSS framework&#x2F;library? Seems like added complexity when there are already hundreds of CSS frameworks available that seem like they do the same thing.
评论 #42474326 未加载
评论 #42473214 未加载
评论 #42480440 未加载
评论 #42477400 未加载
thiht5 个月前
Using CSS translations to place elements on the page is... cursed to say the least. It&#x27;s probably why text selection works (assuming it qualifies as working) in such a weird way when the cursor goes between blocks.
steve-chavez5 个月前
So cool! For some reason navigating to Github&#x2F;Discord by clicking the links is slow on my phone (old galaxy s20fe). The click highlight of the button is normal, just going to the sites is slow.
wangii5 个月前
Looks impressive! What are the connection&#x2F;comparison with imgui though?
评论 #42477369 未加载
isagues5 个月前
My question may be to obvious but, how can you incorporate js to mutate your layout based on user interaction and api calls? Do you have a dynamic website example?
m3kw95 个月前
The canvas renderer tried on iPhone feels weird. The scroll is completely different from regular, also no scroll bounce. That alone is a deal breaker
huhtenberg5 个月前
Getting an empty, cream-rose-colored page, followed by a warning that the script on the page is slowing the browser down with an offer to stop the script. Just FYI.
Naru415 个月前
Excellent. If these compiled data structures were the web standard instead of HTML, www would be ridiculously fast.
xhrpost5 个月前
I&#x27;m not proficient in C. Does this &quot;just work&quot; or do you need to provide some sort of rendering environment like SDL?
评论 #42468100 未加载
评论 #42468023 未加载
gnarlouse5 个月前
Highlighting is degraded for me running on Firefox, it&#x27;s wigging out every time I nudge my cursor
fuzzythinker5 个月前
Press &quot;d&quot; to debug didn&#x27;t work for me. On Chrome in Mac.
mendor5 个月前
the inspector at the end was a neat surprise! I had some issues trying to build the examples on windows but I think it&#x27;s an opportunity to contribute to the project
sgt5 个月前
This is basically what Flutter web is doing - its own canvas, rendering UI, and leveraging Wasm
评论 #42490622 未加载
NoZZz5 个月前
Oh sweet jesus, the preprocessor? Go away.
noamchompsit5 个月前
Cool, so if i look for &#x27;clay&#x27;, i&#x27;ll find your lib?
评论 #42468702 未加载
评论 #42468033 未加载
评论 #42467482 未加载
inson5 个月前
why it&#x27;s not written in rust?! now every cool kid writes in rust)) Jokes aside this is nice!