FrankUICommon CSS (Spacing & Position Utilities)
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.
DOM Selector Wrapper ($)
FrankUI includes a lightweight, vanilla wrapper function $() that offers a jQuery-like API for element selection, property retrieval/mutations, checking matches, and event bindings without the overhead of loading the entire jQuery library.
Live Wrapper Playground
Interact with the controls below and trigger wrapper methods to see returned outputs logged in real-time.
Wrapper Logs:
(Log initialized. Click action buttons to execute selector methods.)
API Reference
| Method | Signature | Description |
|---|---|---|
| $(selector) | $(string | element | list) | Selects element(s) and returns selector wrapper context |
| .val() | .val( [value] ) | Gets or sets the value of selected input/control element |
| .prop() | .prop( propertyName, [value] ) | Gets or sets properties (e.g. checked, disabled) of elements |
| .is() | .is( selectorStr ) | Checks matches against selector helper (e.g. :checked, :disabled) |
| .on() / .click() | .on( events, handler ) | Binds event listener(s) to all selected elements |
| .addClass() / .removeClass() | .addClass( className ) | Adds or removes class strings from element lists |
| .toggleClass() | .toggleClass( className ) | Toggles CSS classes of matched element arrays |
| .find() | .find( selector ) | Searches descendants matching selector |
| .parent() / .closest() | .closest( selector ) | Finds parent element or closest matching ancestor wrapper |
| .attr() | .attr( name, [value] ) | Gets or sets DOM attributes |
| .text() / .html() | .text( [content] ) | Gets or sets textContent / innerHTML configurations |
| .css() | .css( prop, [value] ) | Gets or sets CSS styling values dynamically |
| .trigger() | .trigger( eventName ) | Triggers custom or built-in event calls on elements |
Code Example
// Perform tasks using standard jQuery syntax
$('#my-form').on('submit', function(e) {
if ($('#agree-check').is(':checked')) {
console.log('User value:', $('#username').val());
$('#agree-check').prop('disabled', true);
} else {
e.preventDefault();
$('#error-msg').text('You must accept the terms first!').addClass('fg-red');
}
});