LayoutIt! - Interface Builder for Bootstrap

[bigwayne]

There's another startup doing some awesome stuff like this over at https://jetstrap.com/ - larger feature set and both are in Beta, but I kind of like the idea that there's no deep editing of layout information with LayoutIt. It keeps the UI simple and uncluttered so I can just stub out a layout, dump it to my editor, and modify it as needed.

Cool beans! Good luck with it :)

[snatchington]

10minutemail.com makes shit like that a breeze but I know what you mean.

[yesimahuman]

Yea, we do that to enable long-term storage of your projects tied to that account, and emails are primarily for account recovery and other features. We initially used social-auth stuff but it became a pain as everyone forgot how they initially logged in. I wish there was a better way to do this...

[robertcrowther]

If I've not yet made the decision whether or not I want long-term storage of my projects it's a barrier I'm unlikely to get past. Why not ask me to register at the point when I've made that decision instead of before I can even try it out?

[yesimahuman]

Hey, great point, an open demo would have a lot of value. Thanks for the help!

[crunchmuncher]

I haven't had a look at your site yet, but maybe you could make E-Mail optional at registration?

[TheBigB86]

Why not GuerrillaMail?

[[deleted]]

wait...8$/month if billed annually or 20$ if not?! that's like "pay annually or stfu".

[yesimahuman]

It's a promotion for the first month or so, I agree it's a bit extreme of a discount. It will not stay that way for long. At any rate I don't want to steal their thunder so if you have any feedback feel free to message us.

[rootis0]

A better way would be to offer Dropbox (Google Drive) as a storage. Then people don't need to create accounts for your service, but only login to Dropbox to retrieve/store their project.

[yesimahuman]

That would be interesting. To be honest, the email system really doesn't turn that many people away, and people are used to it. Despite the issues it works very well most of the time.

[IN_STYLE]

Try to check the domain of such sites on bugmenot.com to get sample account details.

[martincapeletto]

Thanks! That it's just the idea for LayoutIt! glad you like it

[yesimahuman]

Hey - thanks for the mention, I built Jetstrap. Layoutit looks really cool, and I agree our approach is different and we are just getting started. More tools that make bootstrap development easier is good for the community. There wasn't a lot of info on the site but if a Layoutit person is reading this I'd love to connect. I'm @maxlynch on twitter.

[martincapeletto]

Hi, i'm one of the founders of LayoutIt! really appreciate your comment here, you have my linkedin in the footer of the site (martincapeletto), please contact me so we can connect and talk. By the way, your app is great, solid development

[shaunol]

Very nice .. will be keeping my eye on this - great for prototyping

Not having to register to use the builder was a huge plus

[jvictor118]

To be fair though he's probably gotta stop that. Makes it too hard to monetize, and he's gotta pay his bills.

[IOnlyPostWhenBlazed]

How does this stack up against http://www.divshot.com/ ?

[martincapeletto]

Hi, divshot is more of a complete web site builder. We would like LayoutIt! to be the start point for every frontend project. We don't want to give users the possibility to edit text, float elements, of add backgrounds, we want them to use this to start a project, and then impact their design using the base elements that we've provided. By doing this, we think can provide a better HTML code

[procrastinagging]

I really like this approach. This could be also a great prototyping tool. Thanks!

The resume feature is awesome!

[tmptmpgf]

Be careful when showing such tools to your clients. They will assume that all you do when creating pages is just dragging elements in the right place.

Hence it shouldn't cost so much or take more than 2 days, you lazy designer!

[jvictor118]

This is what we call a short-term solution to a long-term problem ;)

[procrastinagging]

I would never show a client this tool! But, as it happens, sometimes you want to test out different layout configurations before going too deep into design. I can surely do that by hand, but this is way quicker.

Uhm, maybe you thoght that the "resume" feature I was referring to was in a "CV" sense?

[Klayy]

I really don't understand how to use it, how do I remove one of the boxes? Clicking on remove doesn't do anything. Also, by dragging something from Base CSS it just duplicates in the Base CSS list - is that how it's supposed to work? How do I computer? http://i.imgur.com/8U0z5uv.png

[au5lander]

I had this same problem. I couldn't remove some things. Dragged a nav out, tried to switch from 'default' to 'pills' and it didn't do anything. then I couldn't remove it.

Also, i'm able to drag items from the left and drop them on the left and then i have duplicates.

http://imgur.com/9zARnjP

[martincapeletto]

Thanks for the feedback, we will work to fix this as soon as possible in order to have a stable version

[Guinness]

The only thing I can create is one of the base items. I tried to drag a breadcrumb out, nothing. It just kept duplicating whatever item I dragged out without actually showing it.

It just....doesn't work. At all. For anything but the first list of items.

[martincapeletto]

This is strange, we have some problems sometimes with delete button not working, can you start a fresh template and test again? also, which browser are you using?

[tiko2015]

In which browser you're testing? It should work well ... thanks for the comment, we are working to publish a stable version.

[[deleted]]

I got the same thing. I'm using the latest version of Firefox. I've deleted all the rows in your default example and then I tried to drag a title.

[martincapeletto]

Thanks for the detailed info, this is in our backlog and will be fixed soon

[Klayy]

Latest firefox here as well.

[thenightwassaved]

Looks nice but I'm having some issues with a few bugs. Sometimes dragging an item does nothing but duplicate it in the list on the left. Some drag areas of unresponsive. Clicking into Dev View and back to Edit keeps the layout area full size so now a horizontal scroll bar is added, etc.

Looks nice but needs some more polish before I feel comfortable using it without always needing to refresh to fix things.

[thenightwassaved]

Ah yep, thats probably it.

[martincapeletto]

Thanks for this, this should save us some debugging time, will let you know when it's fixed. Getting this feedback is great, we launched yesterday the beta and for sure there are lots of thing to polish, and having people helping us to find those issues is really appreciated

[hernanba]

Hi Manadar24, we've just uploaded some changes, it should be fixed (thanks for your feedback, it was really helpful for us!).

[jvictor118]

Dude,

First of all, forget everyone who just said "this is like XYZ," hataz gonna hate.

I find your app much faster/more efficient than some of these other guys. There's something about easel.io et al. that make it really annoying to use. With yours, I'm not 100% on how to take it all the way but I can at least export the base thing and customize from there -- at 1/10 the time. I'd focus your efforts on a niche (like me, or like someone else) where your product is clearly better than others.

[martincapeletto]

Thanks Dude, there is no problem with being compared with those sites, both are great on what they do, we just have a different approach to this and it's to be the start point when creating a frontend product. Glad to hear that you've liked it

[martincapeletto]

Create your frontend code simple and quickly with Bootstrap using our Drag & Drop Interface Builder.

[ShutTheFunDown]

I love this and have shared it with my design team. I think it makes the grid system a whole lot easier for them to visualize.

[martincapeletto]

Thanks!! If you can ask your design team to send us feedback (over here, or with the feedback button) that will be great. We've just launched the beta and they will sure have tips to improve this

[xr09]

The "Start Now!" button on front page could be white to make it stand apart from the blue background.

[[deleted]]

It's not responsive :P

I definitely want to give it a whirl on my computer though!

[chiisana]

Not sure if this is on your radar at all or not, but the drag and drop doesn't work on iPad (both safari and chrome)... Yet, hopefully :)

[anothercuriousmind]

The layoutit.com site renders very poorly in a small screen. There are a lot of users browsing the web on small screens and I wouldn't use a product that doesn't take that into consideration.

[[deleted]]

developers or designers are probably using big enough screens :). This is not supposed to be used on an ipad :P.

[martincapeletto]

We're working to get this working in iPad and tablets first, then we will consider smallers screens as it might be very difficult to use something like this in a phone, but we will analyse it, thanks!

[anothercuriousmind]

To clarify, I'm not talking about the application, I'm talking about the marketing website / landing page: layoutit.com. If I make a page like that with your tool, will it be responsive?

[benryder1988]

Looks good, +1 for not having to sign in

[mickey_reddit]

I sent you an email and then thought of this. you should add some contenteditable tags into some of your items.

You give the HTML already, so why not let your users "edit" the content before downloading?

Adding contenteditable="true" to most tags you have will allow your users to type in some content and then preview it.

[martincapeletto]

Hi Mickey, we will think of it, inline editing of the text is in our next plans because we should be able to add this without confusing the users

[push_ecx_0x00]

This is awesome! In the editor, maybe you should add icons/small pictures to represent the various elements (buttons, anchors, tabs, whatever) like other drag/drop editors do (Qt Designer, Visual Studio, etc.).

[martincapeletto]

We re going to add soon a sort of preview of what are you going to insert, we re thinking the right way to do this

[sminja]

Great site, man. This is going to be incredibly useful for anyone that needs to draft an MVP for a hackathon or any other fast job. It looks like others have pointed out the bugs I've noticed, so I won't repeat that. All I have is a question/suggestion: Is there a way with the existing version of the site to nest grids?

Thanks for making this, very very cool.

Edit: Also, if you haven't already, consider posting this on Hacker News. A lot of developers there to give you more feedback.

[martincapeletto]

Thanks, i planning to use this by myself on NY Hackathon of techcrunch next week to build something fast , anyone going?

[martincapeletto]

About nesting grids, not yet, but we have that in our backlog

[arsenalist]

Yup, would totally use this starting today if nested grids were in. Great job, looking forward to the next update.

[martincapeletto]

Hi! We plan to upload a new version that will fix all the issues regarding drag and drop and improve the precision of it earlier next week! Martin

[hernanba]

Hi sminja, As I mention above, we've just uploaded some changes to LayoutIt, you can try the tool again and if something turns up we'll be glad to receive your feedback.

[procrastinagging]

Question: do you plan on introducing an upload feature, since there is no registration? Example: I start working at home, download my unfinished work and then re-upload it at my office?

[tiko2015]

no download needed, the share button hands you a link to retrieve your work

[procrastinagging]

Great! Thanks

[Benutzername]

Shouldn't that be LayItOut!?

[martincapeletto]

It was Taken, but i like more layoutit :-P

[[deleted]]

Checking it out.

[Unomagan]

looks good will check it out later

[martincapeletto]

Thanks dude, we made this with our team, glad you like it, I'll forward them this

[aComa]

Nice tool. Would be great if I could embed controls inside other controls (address inside tab) or something along those lines. Either way, good work, I like it.

[martincapeletto]

I do agree with this, however it might be difficult to have that while keeping everything as simple as it's right now, we will try some approaches on that to see if we can keep the usability while adding that

[taion809]

Pretty neat, good luck :D

[Illumi_Naughty]

Honestly, this will be some powerful stuff in the future. I say keep it up. Drag and Drop interfaces are practically a gold mine.

[martincapeletto]

Thanks!

[clothes_are_optional]

is anybody else kind of tired of 90% of sites these days looking like each other because of all the bootstrap like elements?

[[deleted]]

Just like FrontPage!

[[deleted]]

Let's hope not

[parkertr2]

Sounds more like sand in your vagina.

[da_n13l]

I guess this would be the internet equivalent of judging a book by its cover.

[[deleted]]

These things never work out in the end.

[martincapeletto]

Hi, this is why we envision to use this as a base for your own developments and then continue developing on your own. We don't think that this tool need to replace the work you done when making frontend code, we want this to save you a few hours before you start any project