Hacker News Reader

Comment by elcritch | Hacker News Reader

Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms.

It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface?

The reason I like CSS Grid is that I could imitate the formatting like this:

      test "compute others":
        var gt: GridTemplate

        parseGridTemplateColumns gt, ["first"] 40'ux \
          ["second", "line2"] 50'ux \
          ["line3"] auto \
          ["col4-start"] 50'ux \
          ["five"] 40'ux ["end"]

1: https://github.com/elcritch/cssgrid

View on HN

Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet.

One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native)

1: https://github.com/DioxusLabs/taffy

2: https://github.com/facebook/yoga

Hey thanks! That's awesome and great to see other implementations. Figuring out test cases is half the battle and I've really only done the basics. I'll definitely look to stealing things. ;)

> Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want.

Good call, I'll add the license file.

Would be so awesome if single header file also includes the grid layout algorithm.

I think a new framework for lightweight native app development can be built on top. Lightweight flutter sort of.

Correct CSS grid layout calculation is about solving system of equations and constraints. In simple cases, when there are no spanned cells (like in flexbox), it can be done relatively trivially.

Otherwise solving that system is far from being trivial, you will need simplex solver or the like, for example https://constraints.cs.washington.edu/solvers/cassowary-toch...

You definitely don't need a general constraint solver for CSS Grid. The algorithm (including for cases where there are spanned cells) is well defined in the spec [1], and can be translated directly into code.

1: https://www.w3.org/TR/css-grid-1/#algo-content

Reply on news.ycombinator.com