TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: CSS Grid Playground in Webflow

65 pointsby brryantover 6 years ago

9 comments

vosperover 6 years ago
I enjoyed playing with the playground a bit, though as a developer I don&#x27;t think I&#x27;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&#x27;s fine.<p>Some more specific feedback:<p>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.<p>2. I don&#x27;t understand the second image, of the frowny computer icon. Again, looks nothing like a web page and I&#x27;m not sure of the relevance of the image to CSS grid. There&#x27;s a hint says &quot;turn that frown upside down&quot; 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&#x27;t one. I could find no way to rotate it. What am I supposed to be doing here?<p>3. The fourth one says &quot;These shapes aren&#x27;t in the right place&quot;. Aren&#x27;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&#x27;s pointing at a blank part of the layout.<p>4. By the time I get to the end of the examples &#x2F; demo I haven&#x27;t seen anything that looks like something that I would be dealing with as a web developer. So, I&#x27;m unclear whether this tool is something that is intended for me, or as a way to use grids to design print media?
评论 #18203803 未加载
gmjoeover 6 years ago
Sorry but I find this page extremely off-putting...<p>All these colored boxes following my cursor around makes it hard to figure out what I&#x27;m even supposed to do.<p>And scroll doesn&#x27;t work... I&#x27;m used to scrolling down to find out more about the product, but this doesn&#x27;t give me anything to scroll to.<p>And then &quot;try out the new grid playground --&gt;&quot; isn&#x27;t even a link.<p>I&#x27;m sure a lot of thought went into this landing page, but it&#x27;s so different from normal landing pages that I don&#x27;t want to have to figure out how it even works in order to learn about the product.<p>Apologies for the criticism, but I assume I&#x27;m not the only one who feels frustrated by breaking so many web UX conventions.
评论 #18202524 未加载
评论 #18202975 未加载
brryantover 6 years ago
Hello HN! 6 years ago we launched our very first playground on HN (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=5407499" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=5407499</a>). 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&#x27;d take a page out of history and show you guys how far we&#x27;ve come, with a version of the original playground, but fully integrated with CSS Grid.<p>The Webflow designer was built mostly in knockout.js in 2013&#x2F;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.<p>We&#x27;d love to hear your feedback!<p>The CSS Grid playground works in desktop Chrome&#x2F;Safari&#x2F;Brave&#x2F;Vivaldi, as we&#x27;re still working on Firefox and tablet support.
评论 #18203590 未加载
评论 #18207058 未加载
cprover 6 years ago
Webflow is really the bee&#x27;s knees! Thanks for making such a great product.<p>(I agree with Paul Irish&#x27;s comment: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;paul_irish&#x2F;status&#x2F;315112620627730432" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;paul_irish&#x2F;status&#x2F;315112620627730432</a> .)
评论 #18203805 未加载
madroxover 6 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&#x27;s nice to see a there&#x27;s now an ungated part of the product.<p>I like the idea of more visual design tools, but I&#x27;m not sure the browser is the place for it. Just having the demo open destroys my laptop, and it&#x27;s not exactly a weak machine.
评论 #18246965 未加载
electrotypeover 6 years ago
CSS Grids are a game changer in my opinion.<p>Using some &quot;grid-template-areas&quot; + media queries is so cool... It gives you so much control over the layout!
评论 #18202809 未加载
评论 #18202558 未加载
jihoon796over 6 years ago
The CSS grid was much-needed in Webflow, but I found the implementation to be pretty unintuitive.<p>There&#x27;s a few examples I&#x27;ve run across. One is copy + pasting text, links, or images into the grid - maybe it&#x27;s just the way I&#x27;m using it, but it doesn&#x27;t let me paste an object into the exact grid box I want intuitively.
评论 #18202719 未加载
xemokaover 6 years ago
I love CSS Grid, but still can&#x27;t use it because of support for IE11. There&#x27;s still just too many windows 7 users, hopefully not for too much longer.<p>What is webflow doing about that? Do you provide some measure of automated fallback to flex box?
评论 #18246871 未加载
评论 #18202720 未加载
评论 #18205845 未加载
Sir_Cmpwnover 6 years ago
This is my favorite CSS grid sandbox:<p><a href="https:&#x2F;&#x2F;www.cssgridplayground.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.cssgridplayground.com&#x2F;</a>