Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta (opens in new tab)

FYI, Erik's great post that was here yesterday may be useful in dissecting containers vs. rows vs. cols. [1]

[1] http://www.helloerik.com/the-subtle-magic-behind-why-the-boo...

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.

Probably want to nest a row in a col. nesting containers is something you don't want or need to do.

rows will reset the col padding so nesting rows in cols will have the correct behavior.

You'd never nest containers using bootstrap. Do you mean rows/cols?

I think pinning this one on the developer is a pretty hard argument to make.

Ask your local ISP or local authorities for your local problem.

Is there a way to re-arrange columns? I couldn't get negative pulls to work :(. I think bigger column names, or different column colors would improve the usability once you have push/pull in. Right now if cols are different sizes its a little tricky trying to figure out which one is which.

You could auto-name them with silly generated names or something; like what github does when you create a new repo

That's a bug. Offset inheritance and reverse-inheritance was a real bugger of logic. Will fix.

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.

XS keeps columns in a phone view, but often you want to just stack the cols and not use a grid so much as just "a shelf"

90% of my designs use col-sm-*, and then if stuff needs fiddling at md or lg I do it there. For xs I just usually let it default to stacked 100% cols.

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's a narrow purpose, but I want to focus just on 1 thing and do it better than anyone in the world.

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.

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.

perfect response.

Yeah, an bug from posting this in a hurry and problems deploying it from github to heroku. Fixing it tonight =D