5 ms·

Bootstrap Live Editor

101 points by coderdude 14y ago

themanr 14y ago
I'd be very interested to see some sort of visual grid editor for bootstrap or a similar framework.
- TopTrix 14y ago
  What if I use it as a online WYSIWYG HTML editor? If I create a table and then copy paste the HTML code into not BootStrap based webpage like Blogger, will that work? I think it should work if I have not included special Google webfonts.
  - yusw 14y ago
    Just need to disable the "Bootstrap Snippets" button, and you got the Editor for non bootstrap content/purposes. "Bootstrap Snippets" button is used to insert Bootstrap's elements (Hero Units, Header, Well, Labels, Badges, Buttons, Icon glyphs, Alerts, etc). Google webfont feature is also optional.
- coopaq 14y ago
  It is a boostrap component/plugin. From what I can tell this is a wysiwyg HTML editor that you drop in your bootstrap based web pages - rather than a boostrap style/grid editor.
  - deleted 14y ago
    [deleted]
- yesimahuman 14y ago
  I'm not quite sure what you mean, but my tool Jetstrap (http://jetstrap.com/ http://jetstrap.com/) has grid support. You can drag in a grid row and then drag in grid columns. The UX on the grids isn't quite where I want it yet though.
  - themanr 14y ago
    Thanks! That was what I meant. I'm building a CMS and I'd like to include a layout manager.. I'll certainly be checking out Jetstrap for inspiration.
    - yusw 14y ago
      a WYSIWYG editor may not suitable for layout manager. The idea is separating content from the template (layout/grid). However Bootstrap Live Editor also provides a basic grid insertion function as in the demo, which can be used to insert multi column text, etc.
- bung 14y ago
  there is definitely a need for this, but I wouldnt necessarily approach it that way. For example, jQuery UI does have widgits that are resizable to a grid, however its a pixel resize sort of thing. This isnt so bad if you dont mind dealing with absolutely positioned content, but it gets very messy very fast if you wanted an 'editor'. I think if we could get a plugin that does this independently of bootstrap, and works sanely when you think about things floating and moving around in a browser, think draggable/portlets, then you'd have definitely found a new holy grail. However portlets require certain source expectations as well, and it's just not setup for a grid. Anyway, there are many expensive enterprise CMSes that don't even have this for their author views for content pieces, and it would be a huge feature I think.
  - themanr 14y ago
    An approach I'd like to try is allowing the template designer to expose a certain amount of grid changing freedom. I'd also like to experiment with content types that have a render method parameterised by width (and possibly height).
diminish 14y ago
Amazing to see the ecosystem rising around bootstrap.
tnorthcutt 14y ago
Use it in as many as website projects. Might want to clarify that language a bit.
- yusw 14y ago
  Yes, it can be used in as many as clients' commercial projects or websites/domains (unlimited). However, re-packaged in a template product for distribution is not covered (separate license is required).
ErrantX 14y ago
The OP has linked to the demo running on Wrapbootstrap (a bootstrap marketplace). The overview page for the editor on Wrapbootstrap is here: https://wrapbootstrap.com/theme/bootstrap-live-editor-WB0DFT966 https://wrapbootstrap.com/theme/bootstrap-live-editor-WB0DFT...
synor 14y ago
The UI components visually do not adhere to the general Twitter Bootstrap appearance. And it uses tables (!) for laying out the toolbar buttons.
almost 14y ago
Excellent, I'm sure that will be very useful at some point. wrapbootstrap (the marketplace this is on) is awesome in general. I've purchased loads of bits from them over the last few months. I just wish they had a better way to search and filter the themes, it was fine when there were just a few but it's getting unmanageable now!
- coderdude 14y ago
  Thanks! :) I'm glad you like the site. Search and categorization are implemented in a reboot of the site design that will be released in the next few weeks (along with other neat changes and additions). It should make it a lot easier to narrow down what you're looking for.
yatendra 14y ago
Its good to see a good set of custom widgets coming out for bootstrap. Bootstrap become a really good framework to bootstrap a web app. http://jhollingworth.github.com/bootstrap-wysihtml5/ http://jhollingworth.github.com/bootstrap-wysihtml5/ is another rich text editor I came across. Its based on wysihtml5.
kcbanner 14y ago
I never understood these live editors. Why throw all the great features of your local text editor out the window?
- fourstar 14y ago
  Because now you can get your "startup" up and off the ground within 12 hours instead of 24! In all seriousness though, why is this kind of thing necessary? Who exactly wins here? Certainly not developers since you'll probably never learn how to write basic HTML/CSS with this Dreamweaver approach.
dcooper 14y ago
Hey James, sorry to post here but I used the wrapbootstrap.com contact form 2 or 3 days ago and haven't received a reply in regards to not being able to download the theme I purchased.
- coderdude 14y ago
  Hi Danny, I just shot you an email with your item. Let me know if I can help with anything else.
deleted 14y ago
[deleted]
deleted 14y ago
[deleted]
deleted 14y ago
[deleted]

101 points by coderdude 14y ago

themanr 14y ago

I'd be very interested to see some sort of visual grid editor for bootstrap or a similar framework.

TopTrix 14y ago
What if I use it as a online WYSIWYG HTML editor? If I create a table and then copy paste the HTML code into not BootStrap based webpage like Blogger, will that work? I think it should work if I have not included special Google webfonts.
- yusw 14y ago
  Just need to disable the "Bootstrap Snippets" button, and you got the Editor for non bootstrap content/purposes. "Bootstrap Snippets" button is used to insert Bootstrap's elements (Hero Units, Header, Well, Labels, Badges, Buttons, Icon glyphs, Alerts, etc). Google webfont feature is also optional.
coopaq 14y ago
It is a boostrap component/plugin. From what I can tell this is a wysiwyg HTML editor that you drop in your bootstrap based web pages - rather than a boostrap style/grid editor.
- deleted 14y ago
  [deleted]
yesimahuman 14y ago
I'm not quite sure what you mean, but my tool Jetstrap (http://jetstrap.com/ http://jetstrap.com/) has grid support. You can drag in a grid row and then drag in grid columns. The UX on the grids isn't quite where I want it yet though.
- themanr 14y ago
  Thanks! That was what I meant. I'm building a CMS and I'd like to include a layout manager.. I'll certainly be checking out Jetstrap for inspiration.
  - yusw 14y ago
    a WYSIWYG editor may not suitable for layout manager. The idea is separating content from the template (layout/grid). However Bootstrap Live Editor also provides a basic grid insertion function as in the demo, which can be used to insert multi column text, etc.
bung 14y ago
there is definitely a need for this, but I wouldnt necessarily approach it that way. For example, jQuery UI does have widgits that are resizable to a grid, however its a pixel resize sort of thing. This isnt so bad if you dont mind dealing with absolutely positioned content, but it gets very messy very fast if you wanted an 'editor'. I think if we could get a plugin that does this independently of bootstrap, and works sanely when you think about things floating and moving around in a browser, think draggable/portlets, then you'd have definitely found a new holy grail. However portlets require certain source expectations as well, and it's just not setup for a grid. Anyway, there are many expensive enterprise CMSes that don't even have this for their author views for content pieces, and it would be a huge feature I think.
- themanr 14y ago
  An approach I'd like to try is allowing the template designer to expose a certain amount of grid changing freedom. I'd also like to experiment with content types that have a render method parameterised by width (and possibly height).

diminish 14y ago

Amazing to see the ecosystem rising around bootstrap.

tnorthcutt 14y ago

Use it in as many as website projects. Might want to clarify that language a bit.

yusw 14y ago
Yes, it can be used in as many as clients' commercial projects or websites/domains (unlimited). However, re-packaged in a template product for distribution is not covered (separate license is required).

ErrantX 14y ago

The OP has linked to the demo running on Wrapbootstrap (a bootstrap marketplace). The overview page for the editor on Wrapbootstrap is here: https://wrapbootstrap.com/theme/bootstrap-live-editor-WB0DFT966 https://wrapbootstrap.com/theme/bootstrap-live-editor-WB0DFT...

synor 14y ago

The UI components visually do not adhere to the general Twitter Bootstrap appearance. And it uses tables (!) for laying out the toolbar buttons.

almost 14y ago

Excellent, I'm sure that will be very useful at some point. wrapbootstrap (the marketplace this is on) is awesome in general. I've purchased loads of bits from them over the last few months. I just wish they had a better way to search and filter the themes, it was fine when there were just a few but it's getting unmanageable now!

coderdude 14y ago
Thanks! :) I'm glad you like the site. Search and categorization are implemented in a reboot of the site design that will be released in the next few weeks (along with other neat changes and additions). It should make it a lot easier to narrow down what you're looking for.

yatendra 14y ago

Its good to see a good set of custom widgets coming out for bootstrap. Bootstrap become a really good framework to bootstrap a web app. http://jhollingworth.github.com/bootstrap-wysihtml5/ http://jhollingworth.github.com/bootstrap-wysihtml5/ is another rich text editor I came across. Its based on wysihtml5.

kcbanner 14y ago

I never understood these live editors. Why throw all the great features of your local text editor out the window?

fourstar 14y ago
Because now you can get your "startup" up and off the ground within 12 hours instead of 24! In all seriousness though, why is this kind of thing necessary? Who exactly wins here? Certainly not developers since you'll probably never learn how to write basic HTML/CSS with this Dreamweaver approach.

dcooper 14y ago

Hey James, sorry to post here but I used the wrapbootstrap.com contact form 2 or 3 days ago and haven't received a reply in regards to not being able to download the theme I purchased.

coderdude 14y ago
Hi Danny, I just shot you an email with your item. Let me know if I can help with anything else.

deleted 14y ago

[deleted]

deleted 14y ago

[deleted]

deleted 14y ago

[deleted]