Latest Download

Other Available Package

Build your custom Savvy.UI

Custom Builder

Feel lost?

Check out these instructions.

Query Element

Here we will demonstrate you how easy it is to use Savvy.UI JavaScript Library to select/filter HTMLelements using SUI.Query namespace.

Selecting HTMLelements by Id

is identical with selecting using document.getElementById.

Savvy.UI is a collection of JavaScript Library which I would consider as critical or useful to any web development environment.

var node = SUI.Query.id("example-query-id");
SUI.CSS.Setup(node, {
    "background": "red",
    "color": "white",
    "padding": "0px 2px"
});

Which we can simplify using SUI.Ext.Elements.

SUI("#example-query-id").css({
    "background": "red",
    "color": "white",
    "padding": "0px 2px"
});
<p id="example-query-id">
    Savvy.UI is a collection of JavaScript Library which I would consider as critical or 
    useful to any web development environment.
</p>

This example requires the following namespace:

  • SUI.Query
  • SUI.CSS

Selecting HTMLelements by TagName

is identical with selecting using document.getElementsByTagName.

Savvy.UI is a collection of JavaScript Library which I would consider as critical or useful to any web development environment.

var parent = SUI.Query.id("example-query-tags");
var node = SUI.Query.tags("strong", parent);
SUI.fn.each(node, function() {
    SUI.CSS.Setup(this, {
        "background": "red",
        "color": "white",
        "padding": "0px 2px"
    });
});

Which we can simplify using SUI.Ext.Elements.

SUI("#example-query-id strong").css({
    "background": "red",
    "color": "white",
    "padding": "0px 2px"
});
<p id="example-query-tags">Savvy.UI is a 
    <strong>collection</strong> of 
    <strong>JavaScript Library</strong> which I would consider as 
    <strong>critical</strong> or 
    <strong>useful</strong> to any web development environment.
</p>

This example requires the following namespace:

  • SUI.Query
  • SUI.CSS