Show HN: CSS Grid Playground in Webflow

#1

Post by brryant » Fri, Oct 12, 2018, 1:58 PM UTC

Show HN: CSS Grid Playground in Webflow
webflow.com

Re: Show HN: CSS Grid Playground in Webflow

#2

Post by brryant » Fri, Oct 12, 2018, 2:04 PM UTC

Hello HN! 6 years ago we launched our very first playground on HN (https://news.ycombinator.com/item?id=5407499). It barely worked, but a few months later we go into YC largely due to the awesome feedback we received from it. We thought we'd take a page out of history and show you guys how far we've come, with a version of the original playground, but fully integrated with CSS Grid.

The Webflow designer was built mostly in knockout.js in 2013/2014, but we finished a migration to React about a year ago. We’re still learning all the tricks needed to make a very large React app performant, but we haven’t looked back.

We'd love to hear your feedback!

The CSS Grid playground works in desktop Chrome/Safari/Brave/Vivaldi, as we're still working on Firefox and tablet support.

Re: Show HN: CSS Grid Playground in Webflow

#3

Post by xemoka » Fri, Oct 12, 2018, 3:39 PM UTC

I love CSS Grid, but still can't use it because of support for IE11. There's still just too many windows 7 users, hopefully not for too much longer.

What is webflow doing about that? Do you provide some measure of automated fallback to flex box?

Re: Show HN: CSS Grid Playground in Webflow

#4

Post by electrotype » Fri, Oct 12, 2018, 3:54 PM UTC

CSS Grids are a game changer in my opinion.

Using some "grid-template-areas" + media queries is so cool... It gives you so much control over the layout!

Re: Show HN: CSS Grid Playground in Webflow

#5

Post by gmjoe » Fri, Oct 12, 2018, 4:16 PM UTC

Sorry but I find this page extremely off-putting...

All these colored boxes following my cursor around makes it hard to figure out what I'm even supposed to do.

And scroll doesn't work... I'm used to scrolling down to find out more about the product, but this doesn't give me anything to scroll to.

And then "try out the new grid playground -->" isn't even a link.

I'm sure a lot of thought went into this landing page, but it's so different from normal landing pages that I don't want to have to figure out how it even works in order to learn about the product.

Apologies for the criticism, but I assume I'm not the only one who feels frustrated by breaking so many web UX conventions.

Re: Show HN: CSS Grid Playground in Webflow

#6

Post by brryant » Fri, Oct 12, 2018, 4:27 PM UTC

gmjoe wrote: post #5

Sorry but I find this page extremely off-putting... All these colored boxes following my cursor around makes it hard to figure out what I'm even supposed to do. And scroll doesn't work... I'm used to scrolling down to find out more about the product, but this doesn't give me anything to scroll to. And then "try out the new grid playground -->" isn't even a link. I'm sure a lot of thought went into this landing page,…

Thanks for the useful feedback — we took a different approach to see if we could redefine the border of what "UX conventions" are on the web. Sometimes it hits, sometimes it's... different.

Fortunately we didn't expend a tremendous amount of effort building the page. Here's the preview link to the actual landing page for those curious: https://preview.webflow.com/preview/g-r-i-d?utm_source=g-r-i...

Re: Show HN: CSS Grid Playground in Webflow

#7

Post by brryant » Fri, Oct 12, 2018, 4:30 PM UTC

electrotype wrote: post #4

CSS Grids are a game changer in my opinion. Using some "grid-template-areas" + media queries is so cool... It gives you so much control over the layout!

Yea, it's a pretty transformational layout paradigm for the web. The crazy thing is less than 1% of websites use it: https://twitter.com/ebidel/status/1034874571747291136?s=19

Re: Show HN: CSS Grid Playground in Webflow

#8

Post by jihoon796 » Fri, Oct 12, 2018, 4:36 PM UTC

The CSS grid was much-needed in Webflow, but I found the implementation to be pretty unintuitive.

There's a few examples I've run across. One is copy + pasting text, links, or images into the grid - maybe it's just the way I'm using it, but it doesn't let me paste an object into the exact grid box I want intuitively.

Re: Show HN: CSS Grid Playground in Webflow

#9

Post by a_humean » Fri, Oct 12, 2018, 4:40 PM UTC

brryant wrote: post #7

electrotype wrote: post #4

CSS Grids are a game changer in my opinion. Using some "grid-template-areas" + media queries is so cool... It gives you so much control over the layout!

Yea, it's a pretty transformational layout paradigm for the web. The crazy thing is less than 1% of websites use it: https://twitter.com/ebidel/status/1034874571747291136?s=19

#1 reason I and likely most people don't use it: IE11's poor support.

Once IE dies or I have a job where I don't have to care about IE11 so much, then I'm all in.

Re: Show HN: CSS Grid Playground in Webflow

#10

Post by thesergie » Fri, Oct 12, 2018, 4:48 PM UTC

jihoon796 wrote: post #8

The CSS grid was much-needed in Webflow, but I found the implementation to be pretty unintuitive. There's a few examples I've run across. One is copy + pasting text, links, or images into the grid - maybe it's just the way I'm using it, but it doesn't let me paste an object into the exact grid box I want intuitively.

Thanks for the feedback! The interesting thing about the CSS grid is that the cells are not actual empty elements, but we want to represent the cells visually somehow to help with affordance. We'll be adding some much needed enhancements to the copy-paste interaction (I mean, it's so fundamental) soon, like giving you the ability to select these non-existent cells so that you can paste inside of them. Let us know if there's anything else that can be improved.

The next big release will include grids with contents that auto-flow vs having to always manually position them.