3 ms·

Bootstrap Designer – Generate Bootstrap Templates

61 points by yusw 14y ago

Online design tool, producing HTML5 templates based on Twitter Bootstrap that you can use for your clients' projects or sell on your own website.

yusw 14y ago
Here is sample template, created using Bootstrap Designer: http://bootstrapdesigner.com/easy-start.aspx http://bootstrapdesigner.com/easy-start.aspx More samples can be seen at: http://www.facebook.com/BootstrapDesigner http://www.facebook.com/BootstrapDesigner
imrank1 14y ago
Looks interesting but there is no trial version? I dont see a a way to try it without paying.
- bowline_nc 14y ago
  Agreed - I was about to give it a try, but I'd need to be able to create one (even watermarked) to see the quality of what's generated before I pay.
  - alphamale3000 14y ago
    How would you go about watermarking html & css?
    - olefoo 14y ago
      data-* attributes on all the elements. But switched up and randomised so you wouldn't be able to strip them out with a single line of XSLT; and for greater annoyance, some of them would be required to make the design work, so stripping them out with a regex would break things. Make 'em work for the free html they designed with your tool... If it seems like a waste of effort on both sides, that's because it is. Given that tools like this appear to be easy to write and easy to launch they should probably be sold to hosting companies not designers. As in, you'd make more money selling AutoMattic the whole shebang to use for designing things on top of Wordpress or it's successor than you would trying to sell $9/month subscriptions to would be web designers.
    - bowline_nc 14y ago
      Seconding olefoo's suggestions - and if they're providing images, throw in some actual watermarks. Hell, it's Bootstrap, just put some copyright/payment reminders in there - it's a pretty honest crowd, I'm sure they'd get their $5 from most people.
KaoruAoiShiho 14y ago
Really dislike this way of 'designing' with bootstrap. You need to be using the grid and setting relative values rather than fiddling with px sliders.
oonny 14y ago
what's the music that was used in the demo?
- yusw 14y ago
  Music from Audiojungle :)
deleted 14y ago
[deleted]
highace 14y ago
I think this is the second 'bootstrap designer' posted to HN today alone. Here's my gripe with these things. It seems like we're going backwards. Years ago everyone used Frontpage and Dreamweaver to create their pages, which was fine. But it soon became apparent that handwriting your own HTML gave your far greater control and added way more value, and so use of these visual editors died down. But now they're back for revenge, except from the browser this time, and stuck with a totally overused css framework which in my opinion [when used at stock] completely devalues your design. As a then designer who took the time to learn HTML and CSS during the WYSIWYG cull of the early 00s - which wasn't that hard - I just can't see why these editors are needed.
- jasonlaster11 14y ago
  I think the editor is valuable if: 1. is responsive and lets you think visually 2. doesn't break bootstrap's model, so the output is similar to what a human would do. This means that you should have control over ids and classes and generally know the html structure of the components. 3. lets you extend bootstrap's components with CSS,JS,HTML 4. lets you create new components in a similarly modular way 5. plays nicely with server-side/front-end templates (mustache/erb) 6. talks with github so the changes you make can eventually be merged in (feature branch, pull request)
- SkyMarshal 14y ago
  >But now they're back for revenge, except from the browser this time, and stuck with a totally overused css framework which in my opinion [when used at stock] completely devalues your design. Did you look at the examples on the site? None of them look anything like the default bootstrap design. And the section below the example section is "Your Bootstrap site doesn't have to look like Bootstrap!" Also, you download the resulting code, and the customized CSS is apparently in a separate CSS file that overrides the default bootstrap stuff, not intermixed, so it's easy to further hand-modify as needed. Only problem is there's no apparent way to test it out and see how it works without providing a credit card. Would love the ability to really see for myself to what degree you can customize bootstrap before signing up for recurring billing, even at just $4.99/mo. A free tier that gives you the ability to create customized designs and view them in a preview window (similar wrapbootstrap.com), but no way to save them to your account or other conveniences, would be nice.
state 14y ago
There sure is an abundance of these lately. I can see the reason why Bootstrap opens up the possibility of building this, but I don't see exactly where it's going. Maybe I'm missing something though, so I'd be curious to have the creators defend the work. What is going to make one of these win over the others, and who exactly is the intended audience?
- yusw 14y ago
  Before releasing the Bootstrap Designer, it was my personal tool to create a mockup for clients. I can quickly experiment with colors, fonts, images, etc and pick the combination that I feel works for my project. I see this will help users to focus more on creative work.
keeptrying 14y ago
This is great. Now u can seriously play around with a design without knwing photoshop skills. Great effing job!
- pestaa 14y ago
  Photoshop was never needed to build an interactive demo. https://37signals.com/svn/posts/1061-why-we-skip-photoshop https://37signals.com/svn/posts/1061-why-we-skip-photoshop
jtesp 14y ago
Tons! Of! Exclamation! Marks! :)
deepGem 14y ago
"Generate HTML templates at the speed of light" - Really ? I use powerpoint/Keynote for that. Thank you.
mnicole 14y ago
I'm sure this is a great personal tool for quick prototyping, but I'd really like to see people who are building products around the premise of design to actually care about and understand design instead of compiling bad assets from free resources to charge for it. The default Bootstrap layout is preferable to bad textures and typography laid on a custom non-grid. https://www.easel.io/bootstrap https://www.easel.io/bootstrap is a free alternative for people looking for a WYSIWYG approach to Bootstrap, but in any case - like with the previously mentioned Frontpage and Dreamweaver dilemmas - I'd advise against using these tools for anything other than a functional mockup.

61 points by yusw 14y ago

Online design tool, producing HTML5 templates based on Twitter Bootstrap that you can use for your clients' projects or sell on your own website.

yusw 14y ago

Here is sample template, created using Bootstrap Designer: http://bootstrapdesigner.com/easy-start.aspx http://bootstrapdesigner.com/easy-start.aspx More samples can be seen at: http://www.facebook.com/BootstrapDesigner http://www.facebook.com/BootstrapDesigner

imrank1 14y ago

Looks interesting but there is no trial version? I dont see a a way to try it without paying.

bowline_nc 14y ago
Agreed - I was about to give it a try, but I'd need to be able to create one (even watermarked) to see the quality of what's generated before I pay.
- alphamale3000 14y ago
  How would you go about watermarking html & css?
  - olefoo 14y ago
    data-* attributes on all the elements. But switched up and randomised so you wouldn't be able to strip them out with a single line of XSLT; and for greater annoyance, some of them would be required to make the design work, so stripping them out with a regex would break things. Make 'em work for the free html they designed with your tool... If it seems like a waste of effort on both sides, that's because it is. Given that tools like this appear to be easy to write and easy to launch they should probably be sold to hosting companies not designers. As in, you'd make more money selling AutoMattic the whole shebang to use for designing things on top of Wordpress or it's successor than you would trying to sell $9/month subscriptions to would be web designers.
  - bowline_nc 14y ago
    Seconding olefoo's suggestions - and if they're providing images, throw in some actual watermarks. Hell, it's Bootstrap, just put some copyright/payment reminders in there - it's a pretty honest crowd, I'm sure they'd get their $5 from most people.

KaoruAoiShiho 14y ago

Really dislike this way of 'designing' with bootstrap. You need to be using the grid and setting relative values rather than fiddling with px sliders.

oonny 14y ago

what's the music that was used in the demo?

yusw 14y ago
Music from Audiojungle :)

deleted 14y ago

[deleted]

highace 14y ago

I think this is the second 'bootstrap designer' posted to HN today alone. Here's my gripe with these things. It seems like we're going backwards. Years ago everyone used Frontpage and Dreamweaver to create their pages, which was fine. But it soon became apparent that handwriting your own HTML gave your far greater control and added way more value, and so use of these visual editors died down. But now they're back for revenge, except from the browser this time, and stuck with a totally overused css framework which in my opinion [when used at stock] completely devalues your design. As a then designer who took the time to learn HTML and CSS during the WYSIWYG cull of the early 00s - which wasn't that hard - I just can't see why these editors are needed.

jasonlaster11 14y ago
I think the editor is valuable if: 1. is responsive and lets you think visually 2. doesn't break bootstrap's model, so the output is similar to what a human would do. This means that you should have control over ids and classes and generally know the html structure of the components. 3. lets you extend bootstrap's components with CSS,JS,HTML 4. lets you create new components in a similarly modular way 5. plays nicely with server-side/front-end templates (mustache/erb) 6. talks with github so the changes you make can eventually be merged in (feature branch, pull request)
SkyMarshal 14y ago
>But now they're back for revenge, except from the browser this time, and stuck with a totally overused css framework which in my opinion [when used at stock] completely devalues your design. Did you look at the examples on the site? None of them look anything like the default bootstrap design. And the section below the example section is "Your Bootstrap site doesn't have to look like Bootstrap!" Also, you download the resulting code, and the customized CSS is apparently in a separate CSS file that overrides the default bootstrap stuff, not intermixed, so it's easy to further hand-modify as needed. Only problem is there's no apparent way to test it out and see how it works without providing a credit card. Would love the ability to really see for myself to what degree you can customize bootstrap before signing up for recurring billing, even at just $4.99/mo. A free tier that gives you the ability to create customized designs and view them in a preview window (similar wrapbootstrap.com), but no way to save them to your account or other conveniences, would be nice.

state 14y ago

There sure is an abundance of these lately. I can see the reason why Bootstrap opens up the possibility of building this, but I don't see exactly where it's going. Maybe I'm missing something though, so I'd be curious to have the creators defend the work. What is going to make one of these win over the others, and who exactly is the intended audience?

yusw 14y ago
Before releasing the Bootstrap Designer, it was my personal tool to create a mockup for clients. I can quickly experiment with colors, fonts, images, etc and pick the combination that I feel works for my project. I see this will help users to focus more on creative work.

keeptrying 14y ago

This is great. Now u can seriously play around with a design without knwing photoshop skills. Great effing job!

pestaa 14y ago
Photoshop was never needed to build an interactive demo. https://37signals.com/svn/posts/1061-why-we-skip-photoshop https://37signals.com/svn/posts/1061-why-we-skip-photoshop

jtesp 14y ago

Tons! Of! Exclamation! Marks! :)

deepGem 14y ago

"Generate HTML templates at the speed of light" - Really ? I use powerpoint/Keynote for that. Thank you.

mnicole 14y ago

I'm sure this is a great personal tool for quick prototyping, but I'd really like to see people who are building products around the premise of design to actually care about and understand design instead of compiling bad assets from free resources to charge for it. The default Bootstrap layout is preferable to bad textures and typography laid on a custom non-grid. https://www.easel.io/bootstrap https://www.easel.io/bootstrap is a free alternative for people looking for a WYSIWYG approach to Bootstrap, but in any case - like with the previously mentioned Frontpage and Dreamweaver dilemmas - I'd advise against using these tools for anything other than a functional mockup.