Show HN: CSS Grid Playground in Webflow(webflow.com)
webflow.com
Show HN: CSS Grid Playground in Webflow
https://webflow.com/grid
33 comments
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. :)
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. :)
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.
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.
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...
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.
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 on native support, and now working towards converting scrollbars to be JavaScript-driven to support Firefox (otherwise the white scrollbars stick out like a sore thumb in a dark UI).
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 on native support, and now working towards converting scrollbars to be JavaScript-driven to support Firefox (otherwise the white scrollbars stick out like a sore thumb in a dark UI).
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.
CSS Grid only works in select browsers to begin with.
https://caniuse.com/#feat=css-grid
https://caniuse.com/#feat=css-grid
Here's a direct link to the playground that skips the landing page: https://webflow.com/css-grid-playground :)
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.
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.
>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.
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.
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!
Got any smart fallbacks for IE?
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 .)
(I agree with Paul Irish's comment: https://twitter.com/paul_irish/status/315112620627730432 .)
Rock on Chris! Glad you're liking the product!
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.
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.
( 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.
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.
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!
Using some "grid-template-areas" + media queries is so cool... It gives you so much control over the layout!
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)
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)
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.
Once IE dies or I have a job where I don't have to care about IE11 so much, then I'm all in.
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.
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.
The next big release will include grids with contents that auto-flow vs having to always manually position them.
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!
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!
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?
What is webflow doing about that? Do you provide some measure of automated fallback to flex box?
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
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
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!
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!
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.
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.
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.
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.
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...
Almost all my clients use IE11 by default...
Do you fall back to flexbox?
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.
This is my favorite CSS grid sandbox:
https://www.cssgridplayground.com/
https://www.cssgridplayground.com/
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?