Introducing Bootstrap Studio | Hacker News Reader

Introducing Bootstrap Studio

bootstrapstudio.io

461 points2a0c40132 comments

Great job, it looks really useful and something I would be interested in using in the future. Some feedback...

1 - The webpage could make it more obvious that the paid for version is a NodeJS based application. It took me a little time to work this out because I read the start of the page and immediately went to the online demo.

2 - Provide an option to choose between Bootstrap 3 and 4, even when 4 is fully released there will still be people stuck on 3 for quite some time. The ability to create/edit projects with either will help you a lot.

3 - Raise you price to at least $99. Any professional freelancer or design company will not think twice about this price point and can see it saves a lot more than this in time on just the first project. I think you should be aiming at professionals and not hobbyists. Odd though it sounds, the less people pay the more they complain about a product and the more demanding the support they ask for. Trust me, you could offer this for $10 and someone will still complain that your 100's of hours of hard work is worth only $5.

4 - Always specify a time limit of a special offer. This creates a sense of urgency and is the reason that offers work. Mention on your site when the offer expires, otherwise people don't know and so they will wait. Then they will miss the deadline and are either upset decide not to buy because they wanted the cheaper price.

5 - If you have a roadmap of additions then mention some of the changes to be released in the next year. This shows it is being actively developed and some of the new features might be the ones people are waiting for before buying.

I know this is a Bootstrap tool, which means it has baggage.

But if something like this existed for email, I would buy it in a snap. I have yet to find a desktop tool that can make decent responsive html emails, and that is one of the main strengths that Bootstrap should offer. Skip the JQ efects.

Perhaps you can make a email mode that is JS free, strips out the unused CSS, and inlines the remaining rules?

Have you looked into Foundation for Emails? A new version has just come out (or is coming out very soon).

http://foundation.zurb.com/emails

I have. Zurb (foundation for sites, email or apps) as a library is not far from Bootstrap, but it's not a tool similar to Bootstrap Studio.

https://beefree.io/index.html :)

They have been getting ready to "go pro" for a really long time now.

In the interim, their online tool has serious limitations (it has been a few months since I last tried, but iirc it wouldn't let me save my templates, add images, make edits after exporting or even edit generated styles).

This is so useful! Thank you!

You should look into http://www.stampready.net - along with Campaign Monitor's email builder (https://www.campaignmonitor.com/features/create-custom-email...), it's one of the best drag-and-drop tools for creating really good, responsive emails. The problem with any of these tools is that they still spit out sometimes convoluted code, but that can't really be avoided since they need to cover their asses in literally dozens of different popular email clients.

If you're looking to code, you should check out Litmus Builder (http://litmus.com/email-builder), a code editor specifically built for email design. Has a bunch of templates available, instant previews in a bunch of different clients, email-specific CSS inlining, etc. Full disclosure: I work at Litmus, but even if I didn't, I'd still use Builder for the previews alone.

Thanks for this.

Thanks. Do these support responsive emails on the gmail android client? Unfortunately the gmail client does not support media queries, which makes building a responsive email for it very difficult.

That's a good question. I'm not sure about StampReady, but Campaign Monitor has a few of the best email designers in the biz working there (namely Nicole Merlin and Stig Morten Myre) who strive for really robust templates. Nicole in particular has written about her approach (typically called 'hybrid' or 'spongey' development), which works without media queries. It's basically using fluid tables, max-width, and MSO conditional tables to get things working and is the best approach around these days. You can read more about it here: http://webdesign.tutsplus.com/tutorials/creating-a-future-pr...

I wouldn't be surprised if Campaign Monitor's email templates built in their builder follow the same approach. MailChimp's too, for that matter. The team there use similar techniques.

Mobile first :)

Been thinking about / working on the email design problem for a long time. Email is a great medium with a startling lack of good design tools. Here are the features I look for in an WYSIWYG email builder:

* Drag and drop with common content types. Text, HTML, image, button, divider, social icons.

* Controls for fonts, colors, borders, padding, etc. You don't want to adjust CSS after the CSS is inlined.

* Control over email structure. Most email layouts are a single column or pre-built with a multi-column area. A good editor allows you to add new sections that are single or multi-column.

* Responsive by default. For email this means that multi-column layouts can "collapse" to one column on mobile. So a 3x3 grid becomes 1x9 and the content of each cell isn't tiny on a phone.

* Cross email client compatible. It handle Outlook, GMail and Apple Mail out of the box. This means lots of <table>s, that's just life.

* One-click export to HTML with inlined CSS.

* Image hosting. You can host the images yourself, but most of the time that's an extra step you don't care about.

* Allows for saving and re-editing. It's not fun creating a variation of a template from scratch.

For the last three years, we've been working on our email builder: https://www.klaviyo.com/email-templates. I think it has all of the above.

https://www.inkbrush.com/ my bruv

http://pingendo.com/ : good free alternative.

Nice. Bootstrap 4 demo is available at: http://v4.pingendo.com/playground.html

I got welcomed with the "Your browser is not supported, please use either Chrome or Safari".

Sorry guys, but if your little app doesn't work in Firefox, I don't care about it, it's probably not worth time to even look at it.

It's an offline program, I wouldn't judge it too heavily off the quality of the online demo

It's a free program that is supposed to be used offline anyway.

...

Please

I gave it a 30 seconds test with Firefox and it seemed to work. Probably not a deep enough test to say that it works, but I guess it's not far from working. I tried the Bootstrap 4 version.

Alternative yes, but in my personal experience far from good. This applies also to the previous version 3.

Looks super cool and very useful. If anyone thinks that $25 or $50 is expensive for 3 installs, they are just being disingenuous. That's less than most devs charge their clients per hour and tools like this easily save a few hours on each project.

And good to see another Bulgarian venture :-)

$50 is nothing for such a tool for a one time payment! Even at that price it is very difficult for the tool to make a profitable full time business model. I want to also add that the 50% discount is not a helpful message either.

I always ask my team, how is that as developers we always want free software but yet want a salary hike every year as a software programmer!

>I always ask my team, how is that as developers we always want free software but yet want a salary hike every year as a software programmer!

A lot of people are short-sighted and self-centered. It's completely and totally rational to buy this product if you're billing at $75/hr and this tool saves you 10+ hours that you couldn't justify billing.

Some people just don't "get it" - that you must produce something of value before you can consume, and that every exchange must leave everyone better off. This is what used to upset me about the software pirates, torrenters, etc. It'll all catch up in the end though, so no need to over-analyze people like this.

I think a lot of people are not billing 75/hour or billing at all.

When you're at work, you typically just have to use the tools the rest of the team does. Then when you are at home, working on a side project... it's essentially a hobby and saving time in a hobby is just a 'nice to have'.

Well, the $50 is low for someone who’s going to use it professionally, but if you just want to make one or two sites (and never use it again afterwards), it’s probably a bit too expensive.

I agree. At $50 I wouldn't buy it as I just use javascript/make websites for myself. It's probably a steal if you do this professionally, or even more often than I do.

The 50% off on the other hand brings it down to where I'm willing to pay for it. So I did.

Well, to be honest, it might be. I myself would never pay so much for software because I have better things to pay, like electricity, water, internet, etc. I'm not saying you should not pay for software, but poor people, even more poor under-18 developers, don't really have the conditions to pay for such things.

Sure, I think the OP was talking about people who earn the price of this tool in an hour or two, not people who aren't even working.

Software pricing is a very strange beast. It seems to vary so widely, with not always a very obvious price/quality connection. And over time, it doesn't seem to follow any reasonable expectation; I paid £65 for a game 25 years ago, which would be over £90 in today's money.

Uhm... Usually I'm buying games on steam for 5-15 euros. There is a lot cheap special offers...

What has that got to do with anything? If I see a game I want on Steam and I want it now, should I not buy it because it's not part of a sale?

just saying... ;)

They are cheap for a reason, steam is popular so lot of people will buy the game at that price point. The creator of this software will see a one time bump because of HN but I doubt he will get a steady stream of income at least initially.

In the end everyone has to put food on the table.

I don't really see where you're going here.

If you're not working, you're not the target market for an application for professional developers and designers.

Wow this is gorgeous! Nice work.

I have a product in a similar space, Beaver Builder (https://www.wpbeaverbuilder.com). A few differences being that it's an in-browser tool and it's a WordPress plugin.

Who is your target customer? Are you hoping to improve workflows for frontend developers or enable non-developers to build web pages? Also, what are your thoughts on maintaining a Bootstrap Studio site?

FWIW, we hit a nice niche with freelance web designers and web agencies. Drag and drop streamlines the development process and it also enables more tech-savvy clients to jump in and make their own edits and updates.

Sorry to go off topic, but i've been interested in your product for a couple of weeks. I recently created a site for young people interested in horses. I built it with a theme called KLEO that included Visual Composer. VC is having insane load times, partially because of admin-ajax.php. Does BeaverBuilder also make use of admin-ajax.php? Visual Composer is clearly too heavy and unoptimised for us, so i'd be more than likely to go with BeaverBuilder.

You've heard of us!? No kidding!? That's awesome to hear. :)

We use a lot of ajax when the actual page builder is in use, but we do our best to ensure that page load times for published pages are low as possible.

Outputting lean and efficient auto-generated markup (relative to what was out there) was one of our big goals from the start.

We have a free version of the software in the WordPress repo: https://wordpress.org/plugins/beaver-builder-lite-version/

You can demo the tool, peek at the markup, and see how it well it plays with your WP theme/install with the free version.

Hey Robby, thanks for the reply. Yeah, I saw it mentioned a couple of times on /r/webdev and /r/wordpress in threads where people were bashing VC while talking positively about your plugin ;-)

I'll try out the lite theme and hopefully find it fitting to our site. Once again, thanks for replying to my off-topic comment. I just had to take the chance since i've been considering your product lately!

My pleasure. Feel free to shoot me an email anytime, too:

robby [at] fastlinemedia [dot] com

Is there a big market for WYSIWYG apps for developers? I think this is a great application but might it be better targeted toward non-technical people? Remember iWeb? This reminds me of a more developer-centric, flexible version of that. But no developer would actually build with it. It was for the people who now use Wix, Weebly, and Squarespace for their websites.

Developers should be able to put together a Bootstrap front end just as easily in code and probably prefer working in code.

Maybe there's a huge developer market for this and I just happen to not know anyone who'd be into this.

There is a whole spectrum of people who work "on the web" in some form or another: hard-core developers, front-end coders, designers, small business owners, content creators, etc... So any tool from Squarespace to BootstrapStudio to Emacs is potentially useful to a subset of the market.

But this is specifically marketed toward developers and designers. So my question is are there really enough of those developers and designers interested in a WYSIWYG took or would it be better to drop the Bootstrap focus and focus on the small business owners and content creators?

Yes, there are plenty of developers who pay good money for Dreamweaver or similar, and a great many more who would like to but don't think the tools are good enough.

Likewise many developers pay for point and click IDEs even though vim is free.

I would. I'd love to be able to load a specific theme/framework/css and have html/css written up for me. I don't mind the under-the-hood programming, and I even like designing, but writing up HTML/refreshing/css-ing/refreshing to match my design goals is really frustrating for me. The worst of coding, while simultaneously taking the joy out of the creative nature of design.

> But this is specifically marketed toward developers and designers.

"Developers and designers" encompasses quite a range of skills. Many designers don't know how to code or don't want to deal with it, or would rather do it in a visual editor rather than in a text editor.

On the other side, there are developers who aren't proficient in modern HTML, CSS, web technologies, and the obnoxious-to-set-up modern web tool chain. A GUI like this could be a handy way of bypassing some of these problems so they can get that website built quickly without it looking like it belongs on the 1990s web. (I admit this case is more rare.)

> would it be better to drop the Bootstrap focus and focus on the small business owners and content creators?

I agree with you there, and that's actually what I'm working on. In my application the web developer/designer can create custom "components" with HTML and CSS and some rules on how these components can fit together, and the site owner / small business person / content creator can manipulate their site in a completely visual, drag-and-drop, edit-in-place environment. There are no mandatory tie-ins with any frameworks or libraries, and the system doesn't alter your markup or insert additional junk. Any valid HTML and CSS the developer puts in will work and will come out essentially as entered.

Same thoughts, i am a coder. I would never touch such Software. I still write the most correct HTML for my eyes and i am faster than anything else could be.

IMO this is another example of unnecessary fragmentation of the dev tools ecosystem. Why do we need a whole IDE for Bootstrap? Can't we instead make a plugin for an existing IDE to accomplish the same thing?

I really don't see it as an IDE. More like a WYSIQYG tool to export HTML for Bootstrap, which is something there has been dozens of for years now

Are there any widely used WYSIWYG web editors left that this could be a plugin for? I can't remember seeing one of those in ages.

Good question. Most designers I know use Sketch and I'm pretty sure Sketch doesn't output HTML or CSS.

I was imagining that that this was good tool for beginners to try. I don't think that is made to replace the myriad technologies that people use to develop a static site.

What is "fragmentation" in your mind and what are the negative effects of it?

I salute this initiative. A free 3-7 days trial would be so welcomed though, dispite the online demo which I assume it is not entirely the same as the desktop app. Looks good otherwise, and love the comments from other people as well. Love the price too.

There is one more alternative that I tried before. Decent. http://www.pinegrow.com

I find the existence of this kind tool to be strange, but that may just be because of my preferred way of working. Despite the fact that i'm not hugely keen on Bootstrap, I recognise that people find it useful. But do people really love it so much that they build an ecosystem and actual paid apps around it? It just seems like such a weird thing to focus your energy on.

Are you kidding? There are plenty of devs that build bootstrap front ends - if this makes life easier for them and saves time / effort, it's an easy decision to purchase this. There are other front end frameworks that with IDE's that people pay for too such as vaadin. You're probably not in the target audience for this.

Not Bootstrap specific but Macaw 1.6 [1] is now a free alternative since they were bought by InVision.

[1] http://macaw.co

"Will you still be updating Macaw? Version 1.6 will be the last update to Macaw."

I don't get it. Why did InVision buy them off? just to kill it?

No linux version. :(

This looks promising but I would need a free trial before paying for it.

I was actually hyped a little bit until I saw your comment. Forgot about the price.

$50 for 1 year free updates and only 3 installs is a little bit steep.

Seems like a pretty perfect price point to me - as someone who doesn't do front-end as a job, just for hacks etc.

ATM the price is $25.

How much would you charge - if you made it?

Same $50 but lifetime updates and no limited installs.

Charge me again for Bootstrap studio 3 or something but don't end updates for 2 after 1 year.

Professional tools cost money. How am I going to drive in nails without a good quality hammer?

If this becomes a good solid product - I would expect to be paying several hundred dollars.

Wow. Very impressed. I'm a big fan of Webflow (https://webflow.com). I would love if I could use Bootstrap in Webflow's visual designer but this is great.

Isn't Webflow based on bootstrap?

Love it.

I'm very bad at website design and at 25$ this is a no brainer . Can see myself using this for small websites

^^this

Pretty confident that i'll get my $25 from it...

Pretty. I hope it doesn't mangle markup like GUI tools (that tackled the problem) in the distant past did. Frontpage or Netscape Composer anyone?

GoLive, Dreamweaver too. It's hard to convey semantic intent and create efficient structures in markup when your tool has to be generic enough to have a flexible GUI.

It still comes down to how skillful the creator is, to not end up with nested divs and classes like "rt-col1-flex-span-head".

Adobe Contribute... i.e. Adobe code mangler.

That's been my experience in the past with these kind of tools as well. Its easy to make a mess.

This is fantastic. Got more done in 5 minutes than I usually do in an hour of trial and error.

Any keyboard shortcuts available? At least a shortcut for Duplicate would be good.

Edit: Shortcuts here > https://bootstrapstudio.io/pages/keyboard-shortcuts

$25! Thank you! I'm buying me a copy right now! Someone was saying you should charge $99 as freelance developers would buy it at that price, but as a hobbyist who $99 is how much I spend on almost monthly groceries because of the exchange rate, I'm glad that the price is at reach.

From looking at the site, this looks awesome, especially since I can import my own Bootstrap themes. I haven't used a visual CSS editor in over half a decade, and after the page refreshes that I spent time on just last night, I hope this will be a great tool for me to use.

Thanks again :)

EDIT: I see it comes bundled with Bootswatch themes, this is awesome as I use some of them! Great tool so far!

I'm not a web dev, but I had a plan for some time now for a small sideproject and this seems it has a potential to accelerate things for me. Does it generate fairly vanilla/idiomatic bootstrap? I would take the generated html to the backend, but if I later decided to edit html directly I wouldn't want to deal with weirdness left by your software. What are your payment options? They seems to be hidden behind email form. Any weird drm? I seem to format/reinstall OS more frequently and wouldn't want to deal with problems arising from the software refusing to run when I change my distro.

I bought it about an hour ago. The code generation looks fairly standard. You get 3 installs, but you can deactivate them to use elsewhere (it seems)

Looks like a very useful product, I've tried and want to use these kinds of tools.

So far I tried Pinegrow and Bootply, I'm certainly going to give this one a try.

http://pinegrow.com/

http://www.bootply.com/

I just made the purchase.

This tool will hopefully make my life easier. I'll still code everything carefully by hand but I have a hard time imagining how the UI will look like and I find myself spending quite some time coding and F5 repeatedly only to be disappointed by the result.

These thigs come with experience. I believe people that dedicate their time mostly to UI get real good and would not need a tool like this but for me I believe it'll do wonders.

This looks really cool. It seems like you have a lot of granular control over the elements and layout. That being said, most of the websites I build these days don't need this level of customization. I've found that Blocs[1] is more my tempo. I just really want to organize structure at a high level, add content, polish, and export.

[1] - https://www.blocsapp.com

Nice, but Mac only. :/

Just a FYI, Chrome is giving me a warning on the HTTPS certificate (vulnerable SHA1 certificate), try to get one from LetsEncrypt or make an update to your StartSSL one.

Cool. When I added a new page (untitled.html) and renamed it the page name change wasn't reflected back. Also, There appears to be a page tab for the page editor, but I'm only getting one tab while I have more than one page defined in the design.

I have enjoyed layoutit.com for simple free wireframing.

You can define your layout pretty quickly if you have ever made a bootstrap layout before.

I know there are other alternatives as well but does anyone have any significant experience with this?Is this a lot better, is this the best one out there?

I'm no great designer and only doing hobby sites but I've found PineGrow (http://pinegrow.com/) quite nice.

I tried using Pinegrow for my hobby stuff. It seems to work great but the price is a little steep for someone who is just playing around with side hobbies.

They hooked me on the $49 price when I started playing around and I was ready to buy until I saw that the price jumps to $99 if I want master page support and some other nice things.

I realize it is well worth it but I just can't justify a $100 editor for my hobby projects. I just purchased this tool for $25 as its pricing aligns with what I'm willing to spend much better.

Trial is crucial before buying.

Part of me really wants to hand this to the users I program an internal webapp for and let them spec the basic layout of the the pages, another part of me knows that is a no good, very bad, horrible idea. :/

I can't believe the negativity in the comments.

This looks great and I'll probably be looking to purchase this. I assume that this would help me out when i'm fiddling around trying to make stuff look good in react.

bought it a short while ago

please tell me there's a code you are using for that wonderful checkout. email-->entering postal code --> entering card --> done.

any reason why you are capturing postal code first?

I will post another comment with a review later

is this built using electron? where can you find a boiler template project complete with installation wizard?

edit: just realized you can't even import HTML files or I'm dumb. I clicked open but it only lets you select some proprietary file. This is a HUGE MINUS because I was looking forward to editing existing bootstrap template and you can't!

The checkout form is Paddle: https://www.paddle.com/features/checkout/

Stripe also has the same thing: https://stripe.com/checkout

i think this can be achieved by a bootstrap snippet set; a decent text editor with live reload/files watch setup.

a dedicated app is not needed.

It's $25. How much time would it take someone starting from scratch to gather those snippets, choose a text editor, get it installed and configured, and set it up to use the snippets, watch files, etc.? If their time is worth anything at all I can understand the attraction of paying $25 to skip straight to the part where they're doing the actual work people pay them to do.

if you're a web developer, you should probably have those already.

We've been using this for about 6 months to bang out prototypes very quickly. Happy with it so far.

It looks really interesting

---

But:

"Bootstrap Studio is a desktop application filled with powerful features."

That line tells me absolutely nothing about it

What CSS framework are they using for the app [0]? It doesn't look like Bootstrap.

[0] https://bootstrapstudio.io/demo/assets/css/styles.css

Just bought it after being quite impressed with the online demo, and figured it was worth a shot for $25.

First impression after downloading: an unsigned OS X app? Really? This is commercial software; it's not that expensive to get a dev certificate.

Which is the OS they use in the video?

Looks like a watered down Webflow

great resource for developers to work on bootstrap. It would have more been interesting if free version was available.

Only Chrome? Firefox please!

"Only Chrome" is just the demo. I assume the limitation is due to BootstrapStudio being built with Electron (I believe).

> Sorry, our online demo only works in Google Chrome for now.

Sorry, if you don't bother supporting Firefox or Safari, then I don't bother looking your website either.

(No, I don't ask you to support IE 8)

Edit: Didn't know it was desktop application. Explanation below.

In all fairness, it's a desktop application, not a browser application. So I wouldn't expect them to support every browser.

(written in Firefox)

I guess big percentage of users who visit that page never get idea that it is desktop app.

First lines (1200px height) don't mention desktop app.

>Introducing Bootstrap Studio

>A powerful web design tool for creating responsive websites using the Bootstrap framework.

Then there is call to action button, which says that we don't support you.

Most users then close tab.

I think there's probably a way to make your point without the unnecessary snark. They clearly say "for now", which means support is coming.

Guys you need to get a trial version up ASAP. Few people will risk real money on a tool from an unknown team without being able to try it out.

Now you're just wasting your marketing..

It's unfair of me, but I'm always turned off when I see a desktop app that works on multiple platforms. That irrationally soured my first impression, because I think it otherwise looks like a great tool.

What? How on earth multiplatform support could be a bad thing?

If the developer were to have made a swift version for Mac, a C# version for Windows and a C++ version for Linux, that would be very bad. A startup simply cannot reliably keep all up to date, and the product would suffer.

If they wrote it in Java and in that way claim multiple platforms, I daresay it would be even worse, on all platforms.

If they used a tool that did the conversion for them, it would likely be a security and usability disaster, even though I need sources for that.

So a bias against a multi-platform tool is understandable.

The one exception is a Javascript tool, since things like Chromium have a LOT of effort put into them by companies with thousands of developers on payroll. However the number of tools that should run in such a environment is limitted.

Guess what, it is that one exception. Also, now we have lots of apps developed using electron, so welcome to 2016.

http://electron.atom.io/

I admitted it was irrational! Twice!

Hmm... generally, I would say that is irrational. Unless you're assuming something like a 1990's Java Swing app, or a GTK app, that achieves cross-platform support at the expense of looking like crap on all platforms.

However, based on the fact that this app has an "in-Chrome browser" demo mode available... I'm assuming that it's REALLY a web application, packaged up for desktop use (like the Atom text editor).

Personally, I think that the Atom route of "HTML/JavaScript on the desktop" is a poor choice in most cases (a Bootstrap designer tool might be the rare exception). Regardless, there are multiple cross-platform frameworks out there today that look and work just great. Being turned off by cross-plat support is really an outdated bias, I think.

This looks very nice. But please move the video to the top of the page. Always remember engage first, then offer people a chance to try it out in the browser.

Also I had to reach the bottom of the page to find out that it was a desktop app. Is it built in Electron? One last tip if this works as well as it looks in the demo you could easily double your price.

Ditto on the price, that seems ridiculously cheap. The 3 computer limit puts me off, I know I personally have paid more just to get an unlimited "all the computers you personally own" licence. (Alfred App call this their Mega Supporter tier, it's nearly twice the price of their Single User offering.)

The "Run Browser Demo" button engages me much better than video. I very rarely have patience for linear media.

Especially since it fires up quickly, and doesn't require an account.

Yeah, me too, however stuff only works for one specific browser and the video works for uhm.. all of them?

But only in Chrome. So the best would be show the demo button only in Chrome and the video in other browsers.

Chrome-only demo is unfortunate in this particular case (I also use another webkit variant). If you ask me, scrollable page with screenshots is still better than video.

And since it's a desktop app, they should mention which platform they support - I'm sure they support OS X and Windows, but what about Linux?

runs on Windows (7+), Linux and OS X (10.8+).

I don't understand, on my mobile it's mentioned on the top of the page that is a desktop app.

Reply on news.ycombinator.com