Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: CSS Grid Playground in Webflow

webflow.com

Post reply on HN
Print view View original

21–30 of 34 posts

Re: Show HN: CSS Grid Playground in Webflow

#21

Post by overcast »

edvinbesic wrote: post #14
brryant wrote: post #6

Earlier quoted context omitted.

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...

> It looks like you’re using a browser we don’t support yet. > To have a better experience in Webflow Designer we > recommend using Google Chrome 62+ or Apple Safari 10.1+. > You can still look around, but your changes will not be saved. I'm on firefox and the whole things seems to be working just fine so not sure why you are giving me this message, but anyhow it doesn't speak well for your product if the output only…

CSS Grid only works in select browsers to begin with.

https://caniuse.com/#feat=css-grid

Re: Show HN: CSS Grid Playground in Webflow

#22

Post by vosper »

I enjoyed playing with the playground a bit, though as a developer I don't think I'd find it more convenient to use Webflow vs just writing the CSS myself, since Grid is pretty simple. However, maybe I am not your target market, so that's fine.

Some more specific feedback:

1. The initial example (the Theater flyer) is very busy visually, and looks nothing like a usable web page (sideways text?). Again, maybe this is me misunderstanding what webflow is for, but I think I would prefer a slightly less complex initial view of the grid.

2. I don't understand the second image, of the frowny computer icon. Again, looks nothing like a web page and I'm not sure of the relevance of the image to CSS grid. There's a hint says "turn that frown upside down" which I assume is a cute prompt that I should do something with the design... but... what? I looked for an affordance to indicate that I could rotate the grid, but there isn't one. I could find no way to rotate it. What am I supposed to be doing here?

3. The fourth one says "These shapes aren't in the right place". Aren't they? Where are they supposed to be? What am I supposed to do here? Is it just trying to show me that things can be moved around? I figured that out on the first page. Also (minor) the arrow is not actually pointing at shapes, it's pointing at a blank part of the layout.

4. By the time I get to the end of the examples / demo I haven't seen anything that looks like something that I would be dealing with as a web developer. So, I'm unclear whether this tool is something that is intended for me, or as a way to use grids to design print media?

Re: Show HN: CSS Grid Playground in Webflow

#23

Post by deltron3030 »

brryant wrote: post #2

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 m…

>We’re still learning all the tricks needed to make a very large React app performant, but we haven’t looked back.

Have you thought about creating a Webflow UI library for React itself that would appeal to frontend devs as well?

It would be cool if you could use Webflow also as a tool to build React components or widgets, and then enhance a Webflow project with more dynamic app like features. This would appeal to many digital product designers I think.

Basically Webflow as a React UI framework for web apps of all sorts.

Re: Show HN: CSS Grid Playground in Webflow

#24

Post by madrox »

I stumbled on webflow last week while looking for design tools and boilerplates. I was put off from going farther down the funnel by the mandatory account creation to try the demo. It's nice to see a there's now an ungated part of the product.

I like the idea of more visual design tools, but I'm not sure the browser is the place for it. Just having the demo open destroys my laptop, and it's not exactly a weak machine.

Re: Show HN: CSS Grid Playground in Webflow

#25

Post by thesergie »

vosper wrote: post #22

I enjoyed playing with the playground a bit, though as a developer I don't think I'd find it more convenient to use Webflow vs just writing the CSS myself, since Grid is pretty simple. However, maybe I am not your target market, so that's fine. Some more specific feedback: 1. The initial example (the Theater flyer) is very busy visually, and looks nothing like a usable web page (sideways text?). Again, maybe this is…

Hey Craig thanks for the feedback! The examples are not representative of actual website design/layouts, but we wanted to show off the roots of grid design (which originated in print media) and demonstrate that you can build equally expressive designs on the web. With CSS grid there is no limit!

As for providing affordance for what each example should look like, we have a button in the top left corner that you can hover over. Unfortunately we only point it out in the very first example, like we do with the CSS export button. It would be better to show the notes that draws attention to these buttons until you actually interact with them. Thanks again for the feedback. :)

Re: Show HN: CSS Grid Playground in Webflow

#27

Post by brryant »

deltron3030 wrote: post #23
brryant wrote: post #2

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 m…

>We’re still learning all the tricks needed to make a very large React app performant, but we haven’t looked back. Have you thought about creating a Webflow UI library for React itself that would appeal to frontend devs as well? It would be cool if you could use Webflow also as a tool to build React components or widgets, and then enhance a Webflow project with more dynamic app like features. This would appeal to man…

We've heard of quite a few Webflow users that have converted components built in Webflow to React/Vue/Angular components. We've explored it a bit internally but need to get more user feedback on how broadly this would appeal to product designers and developers, and specifically what workflows they're looking to augment or replace. Stay tuned!

Re: Show HN: CSS Grid Playground in Webflow

#28

Post by bluetwo »

brryant wrote: post #11
xemoka wrote: post #3

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?

At least from what we see on webflow.com (> 1MM sessions a month) there have only been 595 IE11 sessions according to GA, so that's less than 0.06%. Windows7 had 6.8% of all sessions but seems like most of them are using a modern browser. All really good signs for web developers out there!

If your tool doesn't support IE11, it seems like you wouldn't get as many IE11 users...

Almost all my clients use IE11 by default...

Re: Show HN: CSS Grid Playground in Webflow

#29

Post by MisterAV »

callmevlad wrote: post #17
edvinbesic wrote: post #14

Earlier quoted context omitted.

> It looks like you’re using a browser we don’t support yet. > To have a better experience in Webflow Designer we > recommend using Google Chrome 62+ or Apple Safari 10.1+. > You can still look around, but your changes will not be saved. I'm on firefox and the whole things seems to be working just fine so not sure why you are giving me this message, but anyhow it doesn't speak well for your product if the output only…

A quick clarification - the output of Webflow actually works across all modern browsers, but the design tool itself has more limited browser support. One of the biggest challenges with Firefox has been the inability to style native scrollbars to become dark with CSS – theres a decade+ long issue/conversation around making that happen: https://bugzilla.mozilla.org/show_bug.cgi?id=77790 . Eventually, we gave up waiting…

Well, if the main problem is the style of the scrollbar and not the functionality itself, I would not put a warning that it's not compatible IMHO.

Re: Show HN: CSS Grid Playground in Webflow

#30

Post by a_humean »

brryant wrote: post #11
xemoka wrote: post #3

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?

At least from what we see on webflow.com (> 1MM sessions a month) there have only been 595 IE11 sessions according to GA, so that's less than 0.06%. Windows7 had 6.8% of all sessions but seems like most of them are using a modern browser. All really good signs for web developers out there!

My clients all default to using IE 11, which is pretty standard in enterprise. Web developers might be using Chrome and Firefox, but the ~50 year old CFO of is using IE because that's what IT have as the default because they have to support a ton of curf that only works in IE. If it doesn't work in the default browser the user won't use it and IT won't accept it.

It's a miracle that we can use flexbox as the bugs in IE11 have easy mitigations and most IT departments have at least upgraded to IE11 in recent years.

Cool site btw, I've bookmarked it for later.

Post reply on HN