TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

158 pointsby eflowersalmost 11 years ago

20 comments

lowmagnetalmost 11 years ago
Offset appears to be &#x27;sticky&#x27; in that sm-offset-0 is possible by dragging the left most cell offset bar to the right then drag the whole thing left.<p>Really nice visualization; I&#x27;ll use this if anyone needs an explanation&#x2F;sandbox on my team!
评论 #8044819 未加载
评论 #8044759 未加载
radicalityalmost 11 years ago
This is great! I can&#x27;t figure out how to nest containers though, is this supported?
评论 #8043817 未加载
评论 #8043768 未加载
评论 #8043899 未加载
评论 #8043820 未加载
评论 #8043776 未加载
评论 #8043795 未加载
lominmingalmost 11 years ago
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.<p>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.
eflowersalmost 11 years ago
For anyone still reading - I fixed the save&#x2F;preview feature, its really cool.<p>Example: <a href="http://shoelace.io/#2aed04bc819c4c7da28a" rel="nofollow">http:&#x2F;&#x2F;shoelace.io&#x2F;#2aed04bc819c4c7da28a</a>
ohitsdomalmost 11 years ago
I had this exact idea (but didn&#x27;t think I had the skill to pull it off), how cool for people afraid of code. Well done!
coderzachalmost 11 years ago
This is great! It&#x27;s always so hard to explain how bootstrap css and html work to non-technical people.
S4Malmost 11 years ago
This is pretty awesome!<p>One suggestion: would it be possible to add old browsers as well? I am working on an app that doesn&#x27;t render well on older versions of Firefox. I&#x27;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.
tianshuoalmost 11 years ago
The site is broken for China, since the prettify js code is hosted on Google Code.
评论 #8045838 未加载
评论 #8045718 未加载
benbristowalmost 11 years ago
This... is awesome. Such a time saver and very nicely designed too!
manug102almost 11 years ago
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.
评论 #8043949 未加载
评论 #8044739 未加载
kanakiyajayalmost 11 years ago
Good Work !<p>Had made something similar before : <a href="http://jaykanakiya.com/bootstrap-grid-builder/" rel="nofollow">http:&#x2F;&#x2F;jaykanakiya.com&#x2F;bootstrap-grid-builder&#x2F;</a>
seivanalmost 11 years ago
This was really useful, thank you! I&#x27;ve always had a hard time visualising the grids. Is there anyway I can add text, images and buttons? Mostly for testing layouts.
评论 #8043809 未加载
jetro223almost 11 years ago
That&#x27;s great. Before clicking the link I thought &quot;who the hell needs this&quot;? But after trying it out for ~20 seconds... great - I&#x27;ll use it.
评论 #8044578 未加载
jxm262almost 11 years ago
This is awesome! I&#x27;ll definitely start using this. I&#x27;ve seen JetStrap before for building the full UI. But this is great for alot of my uses.
larmealmost 11 years ago
Can you change the column type from lg to others like xs?
评论 #8043787 未加载
schmidtcalmost 11 years ago
Thank you! I&#x27;ve been trying to get my head around responsive grids for a while and after using this for 2 minutes I finally &quot;get it&quot;.
bitroliestalmost 11 years ago
As a backend engineer, this is fantastic. Thank you!
ldecalmost 11 years ago
This is awesome. love it. Thankyou Erik and Shaun.
评论 #8043195 未加载
yellowapplealmost 11 years ago
Quick nitpick: all the links on the bottom (with the exception of the &quot;Code by Shawn&quot; link) appear to be non-operational.
评论 #8044588 未加载
punkmousealmost 11 years ago
Hey, quick note, the &quot;About Shoelace&quot; link in the bottom doesn&#x27;t work for me (Safari 7, OS X). Cheers, good stuff.