Live data from Hacker News

Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

shoelace.io

21–30 of 50 posts

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#21

This is great! I can't figure out how to nest containers though, is this supported?

I like how no one really answered this question, but just pointed out that you asked it incorrectly.

I would like to know this as well...without the ability to create nested rows, I don't really see myself using this tool.

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#22

After messing around with this, is there any reason to use any of the other sizes besides xs? With xs it seems like every device is covered, from the phone up to the large desktop.

You might want to have something as a grid with three columns on the desktop but as full width boxes on a phone.

Then using another size as xs let's you define the grid for bigger sreens while on small screens the content is just stacked vertically.

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#23
post #11

This was really useful, thank you! I've always had a hard time visualising the grids. Is there anyway I can add text, images and buttons? Mostly for testing layouts.

Nope. This is all it does and all it is planned to do. There may be more features to extend the way it works, but it's strictly a grid tool and learning tool, not a builder. I wanted to attack the problem from a different angle than bootply and some of the others that recreate a WYSIWYG like Dreamweaver in the browser. This is JUST for seeing the grid and learning how it works, and seeing how the Less mixins work. It…

Yeah I wanted to say I am not looking for a builder. I just want to visualise how text looks like with those grids.

Grids on their own isn't as important as grids with content.

Still a great tool though, will come in handy.

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#24
post #23

Earlier quoted context omitted.

Nope. This is all it does and all it is planned to do. There may be more features to extend the way it works, but it's strictly a grid tool and learning tool, not a builder. I wanted to attack the problem from a different angle than bootply and some of the others that recreate a WYSIWYG like Dreamweaver in the browser. This is JUST for seeing the grid and learning how it works, and seeing how the Less mixins work. It…

Yeah I wanted to say I am not looking for a builder. I just want to visualise how text looks like with those grids. Grids on their own isn't as important as grids with content. Still a great tool though, will come in handy.

there is an undocumented preview feature that shows your layout with lorum ipsum and placekitten images that I will dig up for you.

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#25
Really nicely done. I do not really see it in my workflow much because typing is faster than dragging around for me now and I am pretty familiar with grid concepts, but this will be very useful to explain the concepts to people. Very impressed with the dragging and snapping.

Suggestions: There are some bugs. Sometimes I cannot drag to create an offset, sometimes I can. Also, sometimes I can only resize the col from the right. Would be nice to support containers (fluid and non-fluid) and we can better visualize how it impact the behavior in relation to the width of the device. Also, I think you can easily support Zurb Foundation grid too.

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#28
post #9

Can you change the column type from lg to others like xs?

What do you mean? You can change them to any by clicking on the left side different "views" and then change the column width to anything, and when you click back and forth between the responsive sizes you'll see it change live, and you'll see the HTML and Less change.

Now I get it. Thanks :)

Re: Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta

#29
post #4

Earlier quoted context omitted.

You're welcome. Saving is broke right now. Be sure to check out the Less Mixin mode where you can name your rows and columns and use pure Less to make the grids. Fun fact - it's all clojurescript.

As someone who knows Python/JS/some html, but very little css, this is absolutely fantastic. Thank you! PS: you mentioned Clojurescript, are you using Om?

this was created before Om existed so it is largely dommy with a smidge of core async.
Post reply on HN