Days
Hours
Minutes
Seconds
Happy Ramadan! Enjoy limited time 30% discount. Coupon: RAMADAN24(Valid for annual subscription)
qxio-ios-color-wand-outline Grab The Deal

Utility Functions

Quix comes with so many utility functions and classes to help you develop faster.

classNames

A simple utility function for conditionally joining classNames together. Example:

$classes = classNames( "qx-element qx-element-{$type} {$field['class']}", $visibilityClasses, [
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
    "wow {$field['animation']}" => $field['animation']
]);

Think you have an alignment slectbox in your element config that allow you to control text alignment. Bootstrap comes with alignment classes so you need to add right class in your <div> or <p> tag.

Traditional Way

$class = '';
if( $field['alignment'] == 'left' ){
  $class = 'qx-text-left';
}elseif( $field['alignment'] == 'center' ){
  $class = 'qx-text-center';
}elseif( $field['alignment'] == 'right' ){
  $class = 'qx-text-right';
}

classNames() Function

$classes = classNames([
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
]);

Plus you can join many class together, like :

$classes = classNames( "qx-element qx-element-{$type}",[
    'qx-text-left' => $field['alignment'] === 'left',
    'qx-text-center' => $field['alignment'] === 'center',
    'qx-text-right' => $field['alignment'] === 'right',
    "wow {$field['animation']}" => $field['animation']
]);

"wow {$field['animation']}" => $field['animation'] based on animation settings.

This class is designed to reduce your conditional code. Take a look at all core element for better understanding of its usages.

More Example of classNames()

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', [ bar: true ]); // => 'foo bar'
classNames([ 'foo-bar': true ]); // => 'foo-bar'
classNames([ 'foo-bar': false ]); // => ''
classNames([ foo: true ], [ bar: true ]); // => 'foo bar'
classNames([ foo: true, bar: true ]); // => 'foo bar'

// lots of arguments of various types
classNames('foo', [ bar: true, duck: false ], 'baz', [ quux: true ]); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, [ baz: null ], ''); // => 'bar 1'

Css Helpers

Font

<?php Css::fonts($field['font']);?>

This function automatically determine the font properties from your config and output them. If any of your typography field left blank, this function will not output it. Css output example:

font-family: 'Ubuntu';
font-size: 16px;
line-height: 30px;
....

Margin

<?php Css::margin($field['margin']);?>

This function automatically determine the margin properties from your config and output them accordingly. If any field left blank, this function will not output it. Css output example:

margin-top: 16px;
margin-btoom: 30px;
....

Padding

<?php Css::padding($field['padding']);?>

This function automatically determine the padding properties from your config and output them accordingly. If any field left blank, this function will not output it. Css output example:

padding-top: 16px;
padding-btoom: 30px;
....

Css Properties

<?php Css::prop('color', $field['text_color']);?>

This is a dynamic class for all css properties. First argument takes the css properties and second argument takes the value.

More example :

<?php Css::prop('background-repeat', $field['image_repeat']);?>
<?php Css::prop('background-position', $field['image_position']);?>
<?php Css::prop('background-size', $field['image_size']);?>
Joomla SEO Service

Grow rapidly with our Joomla SEO service done by the veterans

With over 12 years of business and a vast array of Joomla templates and extensions, we know Joomla SEO better than anyone you could possiblly hire.

Improve my ranking
On This Page