Show HN: Layoutit – An interactive CSS Grid generator • Hacker News Board

Re: Show HN: Layoutit – An interactive CSS Grid generator

#11

Post by melvster » Thu, Jul 26, 2018, 4:19 PM UTC

I like the export to codepen feature. Anyone know how that works?

Re: Show HN: Layoutit – An interactive CSS Grid generator

#12

Post by Vinnl » Thu, Jul 26, 2018, 4:27 PM UTC

coding123 wrote: post #3

Very nice - I feel like I just learned CSS Grid in like 2 seconds. Also learned about fr units: https://alligator.io/css/css-grid-layout-fr-unit/

For Firefox users: the Firefox developer tools also have an excellent grid inspector [1] that is very helpful in understanding CSS Grid.

[1] https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

Re: Show HN: Layoutit – An interactive CSS Grid generator

#13

Post by psetq » Thu, Jul 26, 2018, 4:29 PM UTC

melvster wrote: post #11

I like the export to codepen feature. Anyone know how that works?

right click the button and `inspect` in firefox or chrome, it simply submits the form immediately before the button markup using:

https://blog.codepen.io/documentation/api/prefill/

Re: Show HN: Layoutit – An interactive CSS Grid generator

#14

Post by Edmond » Thu, Jul 26, 2018, 4:32 PM UTC

whoa!!great to see these guys are still at it! I have kept an eye out for what you might come up with next as I am interested in possibly integrating it for Solvent:

http://codesolvent.com/static-assets/gif-studio/ui-builder/s...

Kudos!!

Re: Show HN: Layoutit – An interactive CSS Grid generator

#15

Post by orliesaurus » Thu, Jul 26, 2018, 4:33 PM UTC

The site is great, but the name of the domain is unfortunate

Re: Show HN: Layoutit – An interactive CSS Grid generator

#16

Post by dnadler » Thu, Jul 26, 2018, 4:34 PM UTC

This is cool, but I'm having a lot of trouble reshaping the grids, and editing things that I've already created.

For example, I can't click on certain elements, dragging to make something bigger actually makes it smaller, etc. This will be a really nice tool once the UI is ironed out.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#17

Post by samstave » Thu, Jul 26, 2018, 4:39 PM UTC

orliesaurus wrote: post #15

The site is great, but the name of the domain is unfortunate

Layoutpenismightierthanthesword.com was taken.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#18

Post by reaperducer » Thu, Jul 26, 2018, 4:43 PM UTC

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#19

Post by isostatic » Thu, Jul 26, 2018, 5:05 PM UTC

Meh, I'll just stick with , and a few frames.

tries it out

Wow, that's amazing. I'm tempted to build a new gui right now to replace a rather long in the tooth linear divs.

Re: Show HN: Layoutit – An interactive CSS Grid generator

#20

Post by asdojasdosadsa » Thu, Jul 26, 2018, 5:13 PM UTC

reaperducer wrote: post #18

If you're taking requests, a similar page for Flexbox would be the bee's knees.

Is there a case you would prefer Flexbox over Grid?