Show HN: Visual CSS Grid Editor

Show HN: Visual CSS Grid Editor(pinegrow.com)

60 points by mattront 7 years ago | 10 comments

type0 7 years ago |

I would rather use https://github.com/artf/grapesjs

I guess it's all comes down to what one likes to grow:

pines or grapes

proprietary or open source

(all pun intended)

mattront 7 years ago | |

It's also comparing apples and oranges ;)

The feature set of the two are quite different, also the way how they are used. Here is an overview of what Pinegrow can do, including full support for Bootstrap, Foundation, plain HTML, CSS with live SASS editing, WordPress theme export and more:

https://pinegrow.com/#features

mattront 7 years ago |

Btw. we also have a course covering the basics of CSS Grid: https://pinegrow.com/courses/learn-css-grid-with-pinegrow/

Globz 7 years ago |

If you guys want to learn CSS grid I recommend this free online course with an amazing interactive editor/screencast:

https://scrimba.com/g/gR8PTE

neovive 7 years ago |

Great work! I've been looking for a tool to help jumpstart my designs before moving to code, especially for grids. Adobe XD is fun to work with, but it's a bit far removed from the code for day-to-day.

Questions:

Do you plan to add support for additional CSS and JS frameworks (e.g. Bulma, Vue, etc.)?

I noticed Atom is supported for real-time updates; is VS Code support planned?

Thanks.

mattront 7 years ago | |

Thanks!

Pinegrow is a general purpose HTML & (S)CSS editor, so Bulma (and similar) can be easily used with Pinegrow already.

React and Vue are another story, at the moment I don't have a clear vision of how they could be used with Pinegrow in an effective way.

VS Code is on the list, but not high priority. Our Atom integration is open source, perhaps somebody could/will adapt it for VS Code.

pjmlp 7 years ago |

Love it, this is the kind of GUI tooling that we need for Web development.

mattront 7 years ago | |

Thanks!

forlorn 7 years ago |

Seems similar to Setka Editor (https://setka.io/) .

mattront 7 years ago | |

It's hard to see what exactly Setka does, but from what I can see, the main differences are that Pinegrow is a desktop app that works with your local projects and that Pinegrow is a more low-level HTML & CSS editor, that let's you do whatever you want with HTML and CSS, but with the help with visual tools.