Show HN: CSS Grid Playground in Webflow

by brryant • 8 years ago

65 33 8 years ago

brryant5• 8 years ago

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.

deltron3030• 8 years ago

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.

brryant5• 8 years ago

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!

addedlovely• 8 years ago

Got any smart fallbacks for IE?

xemoka• 8 years ago

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?

brryant5• 8 years ago

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!

int0x80• 8 years ago

Do you fall back to flexbox?

vosper2• 8 years ago

Doesn't that just tell you that most (web) designers aren't using IE 11, because that's the audience for webflow.com?

It's an interesting statistic, but it's not news, unfortunately, and doesn't really tell us anything about either the big picture, or help people whose audience does include a lot of IE 11 users.

bluetwo• 8 years ago

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

a_humean2• 8 years ago

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 <insert large firm> 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.

kaishiro• 8 years ago

While you need to use IE11 specific props it's actually fairly easy to get CSS grids working back in IE11. For page or regional layouts it's been my go to for the past year now.

namuol2• 8 years ago

About 90% of users use a browser that supports the latest spec in full [1], and IE11 supports an older version of the spec and requires `-ms-` prefixing (which we do output), so hopefully most simple uses of grid in Webflow will work for IE11 users. That said I wouldn't say we officially support "out of the box" CSS grid support in IE11.

Right now we have only implemented a _subset_ of the spec; we'll be doing a more thorough audit of IE11 support as we add support for more sophisticated grid features, as those are more likely going to need some kind of built-in fallback.

In the meantime I would encourage folks that need custom fallback behavior to harness site-wide custom code; Webflow outputs pretty straightforward HTML and CSS so it should be easy to manually create fallback styles.

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

electrotype• 8 years ago

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!

brryant5• 8 years ago

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

a_humean2• 8 years ago

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

wilsmex• 8 years ago

I put together a fairly comprehensive video tutorial for those interested in learning CSS grid.

https://www.youtube.com/watch?v=SPFDLHNm5KQ

It's definitely a bit of a challenge to 're-think' layouts for those used to floats / css positioning / flex (like myself)

gmjoe• 8 years ago

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.

brryant5• 8 years ago

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

edvinbesic• 8 years ago

  > 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 works in select browsers.

callmevlad2• 8 years ago

Here's a direct link to the playground that skips the landing page: https://webflow.com/css-grid-playground :)

jihoon7962• 8 years ago

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.

thesergie3• 8 years ago

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.

jihoon7962• 8 years ago

That's awesome. Improving the copy + paste interactions would definitely make it a lot easier to use.

I actually just started using Webflow a few weeks ago, so I didn't even know that CSS grid was a relatively new feature.

Overall, I really like Webflow so far as it's made the design process so much more iterative for me. I actually export the code (code export was a game-changer) into my own Django project, which gives me more configurability. Kudos to you guys for making a great product!

cpr• 8 years ago

Webflow is really the bee's knees! Thanks for making such a great product.

(I agree with Paul Irish's comment: https://twitter.com/paul_irish/status/315112620627730432 .)

thesergie3• 8 years ago

Rock on Chris! Glad you're liking the product!

Sir_Cmpwn• 8 years ago

This is my favorite CSS grid sandbox:

https://www.cssgridplayground.com/

vosper2• 8 years ago

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?

thesergie3• 8 years ago

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

madrox• 8 years ago

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.

namuol2• 8 years ago

( Webflow frontend developer here)

I'm certain that the browser is the _perfect_ environment for a web design tool actually.

The performance issues you're experiencing are no fault of the browser per se; our codebase has grown very quickly in the last few years and we're just beginning to implement RUM to maintain a baseline of performance across the product. Live & learn

That said, we feel your pain! We've formed a feature team to take care of infrastructure-wide performance issues and we're working to maintain a higher standard for performance going forward.

Show HN: CSS Grid Playground in Webflow

Related Stories