Brosho 'Design in the Browser' jQuery Plugin
52
With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.
Demo
Source
Design in the Browser
I was inspired by the article Make Your Mockup in Markup by Meagan Fisher. I am one of those persons who can't stand Photoshop and design every bit of a website in it. Also it is not very DRY to design paragraphs, or whatever, in Photoshop and again with CSS.
But designing the mockup with markup is also somewhat annoying. You change the CSS code and need to check the result in your Browser. I used a Firefox add-on called ReloadEvery so I don't need to reload the page manually. Still not the optimal way.
That's why I coded this Plugin. You can stop switching between your Editor and the Browser and changes will occur immediately without reloading the page. Once you are done designing your mockup you can generate the CSS code, copy and paste it to your stylesheet and tweak it to your likings. Much faster and better!
Installation and Usage
Please see the Demos and the example source code here and here. This section will be extended as the Plugin and the options grow. If you need any help please comment to this article and I'll be glad to help you.
Download latest Version
You always find the latest version of the Plugin at the GitHub repository download page.
very cool plugin! I'm gonna use it right away :)
great plugin!
ich changed the hover-style for me, so the border doesn’t break the layout:
.brosho-element-hover { outline: 3px solid red; }
Very very great plugin! ;)
Strike bro! haha
Andrus:
Thanks! Glad you like it.
Torsten:
Thank you very much for the feedback. I totally forgot about the outline CSS property! Will change it to that solution in the next release.
Hidayat:
;) Thanks man!
This looks awesome! I too love to design in the browse.
Thanks Sebastian
Whoa! That's awesome!
I had some problems with links following through even though the click function was returning false. So I added this code:
var thisurl = "";
$('a').hover(function(){
thisurl = $(this).attr("href");
$(this).attr("href","#");
},function(){
$(this).attr("href",thisurl);
});
Hmm, have you used the example and still included the main.js?
Because there is a workaround to follow the links on the example pages: http://github.com/mustardamus/brosho-plugin/blob/master/js/main.js
If so, remove this code and it should be good.
Nice plugin, but did you know there is something called Firebug (and Firebug Lite too)?
And Web Developer Toolbar also.
Sure I know that. But I find it annoying changing CSS styles with Firebug. Also it let you not generate the new CSS code for the elements.
nice collect it to
http://ajax.wespai.com
Very nice - will definately use it.
Unfortunately, doesn't seem to work in IE 6,7,8 and Opera?
Yeah I haven't tested it in IE and Opera. Cross-Browser Testing is on the to-do list ;)
Thanks!
I tried "Brosho" and it's a really nice way to edit the code.Thx!
In the demo if I hover the paragraph that has the script tags the cursor goes wild and the browser crashes. I am using Firefox 3.5 on Ubuntu
You can do this using Firebug. Actually you can copy your Firebug changes and paste! For that click the CSS tab and click edit!! May be you can implement some of the Firebug features like increasing numerical values with up down arrows. Of course showing drop-down with possible values for a property will be tough to implement. Anyway its a nice tool though personally I will never use it.
For some additional fun, try this out:
http://www.alexschreyer.net/programming/liquid-page-a-bookmarklet-to-rearrange-webpages/
This jQuery bookmarklet lets you reorganize pages to preview small changes. Nothing gets saved, though.
abhijit:
Yes, you can achieve these functionality with Firebug too. It is indeed a great tool but for me it was a bit annoying to edit CSS properties and get them out of there.
Alex:
Kewl stuff!
very very cool
i like this...
Great tool. Please get this working in IE6&7. I've tried a few options for live editing in IE and none are robust. I know you can use the IE developer toolbar to add styles, but it's such an odd workflow and you run into cascade problems (styles added inline). Brosho could make IE a little less painful to deal with.
Hello,
is it possible to save generated CSS into the file? Or could somebody suggest how can I do this? It would be great if it could overwrite CSS on the server or local disk...
That's possible by sending a POST Ajax request to the server with the generated CSS. The backend then can handle the code and overwrite the previously generated file.
hi there! awesome stuff... just tested it quickly and couldnt get the :hover pseudo-selector to work... meaning that if I write for example "p:hover" then hover any paragraph it doesnt work... :S any thoughts?
Why investigating the wheel a second time? Use Firebug instead ...
wowwww...i love this plugin ! thanks for sharing
this plugin is sooooo legit !!!!
I used it the whole day today...
I love it !!!!
wish in the future we can drag around the editor...
I Love It !
Hi Sebastian, you've created a simple but beautiful plugin that I am sure many many developers will find extremely handy, well done.
I am relatively new to jQuery and I have recently created the {css}DesignerGrid plugin and I have been thinking to implement similar functions to what you have developed here, but now there's no need :)
Combine our plugins together, although I have not yet tested it :) and you have the perfect solution for grid based designers!
Love your work!!!