Brosho Jquery Plugin

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.

Leave a Comment