Jquery Equivalent of Yui Stylesheet Utility

jQuery equivalent of YUI StyleSheet Utility?

Found a couple that look like they do similar things. I haven't tested them. jQuery.Rule looks to be pretty good though

jQuery.Rule by Ariel Flesler

This plugin allows quick creation/manipulation of CSS Rules, in a "jQuery-way". It includes features like chaining, iteration using each, selectors with context.

GlobalStylesheet by Jeremy Lea

Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS. This is particularly handy for modifying CSS styles that you want to remain persistent until a page is refreshed again.

Mixing jQuery and YUI together in an app, is it easily possible?

Speaking from some experience in developing a small tool myself, I've used YUI's rich control set with Prototype for DOM manipulation in the past and experienced no issues. Admittedly, this was a small tool that didn't use a wide array of the controls.

Even so, I'm always hesitant to use multiple frameworks on my web projects; however, if you're only using jQuery's DOM functionality and YUI's control functionality, then I think you're fine - there's not really a conflict of interest there. Plus, with jQuery's noConflict() mode and YUI's namespacing, the two frameworks really shouldn't trump one another.

Is it possible to set CSS properties of .element:before or .element:after via javascript?

Expanding on my comment:

:before and :after are not properties, they are CSS selectors. Therefore you cannot set them on some element, you can only add rules with such selectors to a stylesheet.

If you want to add DOM nodes before or after all elements that match a given selector with jQuery, you can use the before and after methods respectively.

If you want to add CSS rules to the current page, you can use the DOM level 2 CSSStyleSheet interface. A minimal example would look like this:

// Note: this is sample code. Do not use it blindly in your own page.
document.styleSheets[0].insertRule(".foo:before { /* something */ }", 0);

See the MDN documentation for insertRule for more example code.

JavaScript frameworks and CSS frameworks: JQuery, YUI, neither, or something else?

Firstly, it's probably worth perusing Which Javascript framework (jQuery vs Dojo vs … )?.

Secondly, there are two broad categories of Javascript framework:

Rich: made for creating so-called Rich Intenet Applications, they are typically aimed at creating experiences much like a desktop applications with sophisticated windowing GUIs. This includes, but aren't limited to, YUI, Dojo, ExtJS and SmartClient;
Complementary: these are more focused on improving a traditional Website experience rather than replacing it altogether. These include jQuery, Prototype and others. Some might point out that jQuery has jQuery UI but this is a barebones widget library at best and completely incomparable to, say, YUI in terms of out-of-the-box user interface capabilities.

So the first thing you should ask yourself is: what kind of application are you creating?

Personally I think you can't go wrong with YUI or jQuery, depending on your answer.

can jquery manipulate the global css definition of the document?

I would probably handle this by having your checkbox add and remove a class form the <body> element:

$('body').toggleClass('hideABC');

And have the following CSS:

body.hideABC div.abc { display:none; }
body div.abc { display:block; }

So, if elsewhere in your page a <div> gets the '.abc' class added to it, then it will take on the first CSS rule and be hidden.

Copy stylesheet content to clipboard

To get a stylesheet as a string you can use document.styleSheets, and do something like this

var styleSheet  = document.styleSheets[0],
    styleString = $.map(styleSheet.rules, function(rule) {
        return 'cssText' in rule ? rule.cssText : '';
}).join("\n");

note that document.styleSheets is a collection, so [0] gets the first stylesheet in the page, [1] gets the second etc.

As for saving to the clipboard, that can be rather complicated, the prefered way is to use a prompt, something like this

window.prompt("Copy to clipboard: Ctrl+C, Enter", styleString);

telling the user to manually copy the string.

If you want a cross browser way to use a button instead, you would have to use flash, and there are plugins for this, ZeroClipboard is most commonly used, but there's also Clippy, which is a little easier to use.

How to make the effects of jQuery's $(element).css() persistent?

Right, well, when you perform that command, it styles all p elements in #container. If you want it to be permanent, you could create a <style /> element and add the CSS stylings there.

To elaborate, you could do something like this:

$(document.head).append('<style>#container p{font-size: 24px;}</style>');

jQuery vs. Yahoo UI API design

I don't think your argument is directed at jQuery, but more the APIs provided by plugin authors.

Unfortunately, no two plugin authors will create a plugin with the same API. The level of programmatic access is not limited by jQuery itself, but rather by the author/s of the plugin.

Also, as you said, jQuery is all about the DOM -- I see this as a benefit because it means jQuery doesn't get all mixed up in the "logic" (eh, "business logic") of the application... It's quite fine on it's own level of abstraction -- it deals with the DOM, and that's all!

You can create an unlimited amount of data structures and additional APIs for your application. jQuery doesn't hinder you in this respect.

You've added more details to your question -- this 'edit' is in response to those details.

I think what you're experiencing is common when you reach a certain stage with jQuery... The API becomes insufficient. You don't want the DOM... You want a nice clean API for your module, whether it's an accordion or a data-grid.

Personally, I don't think that some things should be bundled into a "jQuery plugin" -- doing so normally means sacrificing the API -- or having to resort to jQuery's mechanisms such as psuedo-event triggering through "trigger":

var someModule = $('#contain').someCoolModule();
someModule.trigger('initiate');

I get what you're saying, and I think I agree, but I also think it's important to have jQuery on an entirely separate level -- forget about it -- only utilise it when you need to attack the DOM.

Jquery Equivalent of Yui Stylesheet Utility