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
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.
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.
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.
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.
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's a narrow purpose, but I want to focus just on 1 thing and do it better than anyone in the world.
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.
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.
Really nice visualization; I'll use this if anyone needs an explanation/sandbox on my team!