7 ms·
Show HN: Shoelace.io – Visual Bootstrap Grid Builder and Teacher Beta
- seivan 12y agoThis 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 12y agoNope. 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 12y agoYeah 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.
- shaunxcode 12y agothere is an undocumented preview feature that shows your layout with lorum ipsum and placekitten images that I will dig up for you.
- eflowers 12y agoAs 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.
- manug102 12y agoAfter 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 12y agoYou 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.
- eflowers 12y agoXS 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.
- coderzach 12y agoThis is great! It's always so hard to explain how bootstrap css and html work to non-technical people.
- ldec 12y agoThis is awesome. love it. Thankyou Erik and Shaun.
- eflowers 12y agoYou'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 12y agoAs 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 12y agoWrong guy to ask, I'm just the experience and design and bootstrap guy, my partner is the engineering powerhouse behind how it actually works
- shaunxcode 12y agothis was created before Om existed so it is largely dommy with a smidge of core async.
- bitroliest 12y agoAs a backend engineer, this is fantastic. Thank you!
- ohitsdom 12y agoI 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!
- ohitsdom 12y agoI 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!
- larme 12y agoCan you change the column type from lg to others like xs?
- eflowers 12y agoWhat 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.
- radicality 12y agoThis is great! I can't figure out how to nest containers though, is this supported?
- deleted 12y ago[deleted]
- eflowers 12y agoYou'd never nest containers using bootstrap. Do you mean rows/cols?
- deleted 12y ago[deleted]
- lpsz 12y agoFYI, 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-bootstrap-3-grid-works http://www.helloerik.com/the-subtle-magic-behind-why-the-boo...
- jaunkst 12y agoProbably 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.
- tcfunk 12y agoI 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.
- lominming 12y agoReally 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.
- benbristow 12y agoThis... is awesome. Such a time saver and very nicely designed too!
- yellowapple 12y agoQuick nitpick: all the links on the bottom (with the exception of the "Code by Shawn" link) appear to be non-operational.
- eflowers 12y agoYeah, an bug from posting this in a hurry and problems deploying it from github to heroku. Fixing it tonight =D
- schmidtc 12y agoThank 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".
- jetro223 12y agoThat'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 12y agoperfect response.
- jxm262 12y agoThis 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.
- lowmagnet 12y agoOffset 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!
- eflowers 12y agoThat's a bug. Offset inheritance and reverse-inheritance was a real bugger of logic. Will fix.
- jitl 12y agoIs 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
- punkmouse 12y agoHey, quick note, the "About Shoelace" link in the bottom doesn't work for me (Safari 7, OS X). Cheers, good stuff.
- eflowers 12y agoFor anyone still reading - I fixed the save/preview feature, its really cool. Example: http://shoelace.io/#2aed04bc819c4c7da28a http://shoelace.io/#2aed04bc819c4c7da28a
- tianshuo 12y agoThe site is broken for China, since the prettify js code is hosted on Google Code.
- kanakiyajay 12y agoGood Work ! Had made something similar before : http://jaykanakiya.com/bootstrap-grid-builder/ http://jaykanakiya.com/bootstrap-grid-builder/
- S4M 12y agoThis 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.