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

11–20 of 34 posts

Re: Show HN: CSS Grid Playground in Webflow

#11

Post by brryant »

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!

Re: Show HN: CSS Grid Playground in Webflow

#12

Post by int0x80 »

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!

Do you fall back to flexbox?

Re: Show HN: CSS Grid Playground in Webflow

#13

Post by wilsmex »

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!

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)

Re: Show HN: CSS Grid Playground in Webflow

#14

Post by edvinbesic »

brryant wrote: post #6
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...

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

Re: Show HN: CSS Grid Playground in Webflow

#15

Post by jihoon796 »

thesergie wrote: post #10
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…

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!

Re: Show HN: CSS Grid Playground in Webflow

#16

Post by callmevlad »

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

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

Re: Show HN: CSS Grid Playground in Webflow

#17

Post by callmevlad »

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…

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

Re: Show HN: CSS Grid Playground in Webflow

#20

Post by vosper »

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!

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.

Post reply on HN