
Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta - eflowers
http://shoelace.io/
======
lowmagnet
Offset appears to be 'sticky' in that sm-offset-0 is possible by dragging the
left most cell offset bar to the right then drag the whole thing left.

Really nice visualization; I'll use this if anyone needs an
explanation/sandbox on my team!

~~~
jitl
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

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

~~~
tcfunk
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.

~~~
zapt02
+1, nesting would be the killer feature

~~~
eflowers
Nesting is the next on the roadmap once we get around to it. The Clojure for
this is super complex, it was a ton of work making it "unbreakable" (as if).
We're in a good spot to add it.

The nesting will actually "zoom" into the col you're putting it in and give
you a new view, then you can zoom back out.

There IS a live HTML preview that you can actually see and drag your browser
big and small.... but it's broke. Fixing it after work tonight.

------
lominming
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.

------
eflowers
For anyone still reading - I fixed the save/preview feature, its really cool.

Example:
[http://shoelace.io/#2aed04bc819c4c7da28a](http://shoelace.io/#2aed04bc819c4c7da28a)

------
ohitsdom
I had this exact idea (but didn't think I had the skill to pull it off), how
cool for people afraid of code. Well done!

------
coderzach
This is great! It's always so hard to explain how bootstrap css and html work
to non-technical people.

------
S4M
This is pretty awesome!

One suggestion: would it be possible to add old browsers as well? I am working
on an app that doesn't render well on older versions of Firefox. I'll use
Shoelace all the time for the front end part if I can use it to spot rendering
problems with all kind of browsers.

------
tianshuo
The site is broken for China, since the prettify js code is hosted on Google
Code.

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

~~~
Gigablah
In other words, "screw Chinese users".

------
benbristow
This... is awesome. Such a time saver and very nicely designed too!

------
manug102
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.

~~~
DoubleMalt
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.

------
kanakiyajay
Good Work !

Had made something similar before : [http://jaykanakiya.com/bootstrap-grid-
builder/](http://jaykanakiya.com/bootstrap-grid-builder/)

------
seivan
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.

~~~
eflowers
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.

~~~
seivan
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.

~~~
eflowers
As shaunxcode says, there is an unpushed preview that does let you expand it
out with text, images, and then try it out live in a browser that is real HTML
you can resize, etc. Really cool.

That should be done tonight.

------
jetro223
That's great. Before clicking the link I thought "who the hell needs this"?
But after trying it out for ~20 seconds... great - I'll use it.

~~~
eflowers
perfect response.

------
jxm262
This is awesome! I'll definitely start using this. I've seen JetStrap before
for building the full UI. But this is great for alot of my uses.

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

~~~
eflowers
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.

~~~
larme
Now I get it. Thanks :)

~~~
eflowers
I will look at the UX on that and make some improvements.

------
schmidtc
Thank you! I've been trying to get my head around responsive grids for a while
and after using this for 2 minutes I finally "get it".

------
bitroliest
As a backend engineer, this is fantastic. Thank you!

------
ldec
This is awesome. love it. Thankyou Erik and Shaun.

~~~
eflowers
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.

~~~
findjashua
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?

~~~
eflowers
Wrong guy to ask, I'm just the experience and design and bootstrap guy, my
partner is the engineering powerhouse behind how it _actually_ works

------
yellowapple
Quick nitpick: all the links on the bottom (with the exception of the "Code by
Shawn" link) appear to be non-operational.

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

------
punkmouse
Hey, quick note, the "About Shoelace" link in the bottom doesn't work for me
(Safari 7, OS X). Cheers, good stuff.

